木灵鱼儿

木灵鱼儿 5年前 CSS

fit-content()函数

css3的grid格子布局中，对于设置格子大小的处理，要么是固定的，要么是百分比这种相对的。如果电脑端这个header的高度为50px，而手机端由于大小限制，原来50px可能要变成30px，那么此时我们可以利用媒体查询去调整：grid-template-rows属性。grid-template-rows: 30px 1fr;调整完这个大小后，我们还要调整里面元素的大小，这样做可能有点麻烦。甚至于我们可能只是改变了里面元素的布局而已，横向的布局改为竖列的多行布局，那么这个高度可能是无法精确获取的，如果内容的高度为100px呢，而我们只设置了30pxgrid的默认效果会是一个overflow...

5007 0 0

Object.freeze() 冻结对象

木灵鱼儿 5年前 ES6

Object.freeze() 冻结对象

const是禁止修改指向，而不是不能改值，由于常量的修改是直接赋值，所以使用const声明的变量是无法修改的。但是object却是可以修改的，我们可以对这个object对象写入数据，那如果我们要禁止这个对象被读写呢？我们可以利用Object.freeze()方法来实现。const obj = { one : 1 }一般我们可以通过obj.one = xx来修改值，现在我们要防止这个值被修改：const obj = Object.freeze({ one : 1 }) obj.one = 5； console.log(obj) //{one:1}无法被修改。但是还有一种情况，...

4177 2 0

仿写了一个angular落地页

木灵鱼儿 5年前 HTML

仿写了一个angular落地页

最近看了angular的官网，感觉还阔以，以前一直想做一个这种页面，这次我logo材料也凑齐了，对侧边栏的一些问题也搞定了，b4也学了，jq也会了，完事具备只欠东风，说干就干预览图demodemo最重要的一点是明白了怎么搞定手机端浏览器底部工具条的问题，这玩意特别让人头疼。

3899 0 0

angular落地页

vuex namespaced 命名空间

木灵鱼儿 5年前 vue 基础

vuex namespaced 命名空间

我们有时候在使用vuex模块的时候，在其中加了一个键值对为：namespaced : trueexport default { namespaced: true, state { zoom: 15 }, getters:{}, mutations:{}, actions:{}, }namespaced为true的作用是告诉vuex，该模块所有的state 、getters、mutations、actions里面的东西调用时都需要加上命名空间，这个命名空间就是该模块被improt时命名的名字。假设这个模块的名字为m...

1w 0 0

namespaced 命名空间

router路由守卫之用户权限

木灵鱼儿 5年前 vue 项目实战

router路由守卫之用户权限

路由守卫一般用于判断用户是否登录，如果已登录，则进入页面，如果没有登录，则跳转到login页，并且记住跳转之前的路径页，方便登录成功后自动跳转到之前的页面。router.beforeEach((to, from, next) => { const user = store.getters.user if (to.matched.some(r => r.meta.private) && !user) { next({ name: 'login', params: { wantedRout...

3477 0 0

网页在线预览pdf文件之PDFObject

木灵鱼儿 5年前 vue 项目实战

网页在线预览pdf文件之PDFObject

pdf.js在了解到这个库的时候还看到了一个叫PDFObject的库，仔细看了下，这个库相对来说太简单了，它只是利用html元素的特性去加载pdf文件，比如<embed>标签、<iframe>标签、<object>标签，所以从移动端角度来说，这个东西并不符合需求，因为手机端暂时还不支持这种。先看看这三种标签的用法吧！embed标签<embed src="pdf文件链接或路径" type="application/pdf" width="100%" height="100%&qu...

5053 0 0

PDFObject

网页在线预览pdf文件的demo pdf.js

木灵鱼儿 5年前 vue 基础

网页在线预览pdf文件的demo pdf.js

在用BOSS直聘的时候发现他那边可以直接查看pdf文档，我想着web能不能做到，于是今天花了一点时间去做这个，顺带用vue写了个单页demo，用的是bootstrap-vue框架。第一次用的这个，文档有点怪怪的，用习惯国内的框架，一上来用英文的，而且也不怎么详细，所以导致没研究出单个模块引入的方式，于是js文件就变的很大了，废话少说，这次的重点是如何在web端查看pdf文件。基本做法就是将文件渲染成画布canvas，然后在输出到网页中，其中最好的，也是最复杂的就是pdf.js，该项目在github开源，并且是mozilla发布，有点东西。不过github的东西可能比较适合使用iframe...

5664 0 0

pdf.js

jq pjax笔记

木灵鱼儿 5年前锋利的JQuery

jq pjax笔记

github地址： pjax中文说明文档（非官方）： pjax基本参数$(document).pjax(selector, [container], options)selector为click选择器container为需要更新内容的容器选择器options为设置selector的一些技巧：我们可以给a元素添加一个属性：data-pjax来表示这是一个需要使用pjax的链接，这样就可以避免全部的a元素使用pjax了<a href="xxxx" data-pjax>$(document).pjax("a[data-pjax]", [con...

7218 0 0

pjax NProgress

typecho 使用CDN后评论过滤插件以及真实ip的问题

木灵鱼儿 5年前 Typecho博客教程

typecho 使用CDN后评论过滤插件以及真实ip的问题

由于使用了cdn，所以ip的获取会出现问题，获取不到你的真实ip，这就导致评论过滤插件依据的ip来判断是否机器人啊，这些就会出现问题，所以要调整一下。解决办法就是：在博客的配置文件config.inc.php里面加上这句话：//cdn获取真实ip地址 define('__TYPECHO_IP_SOURCE__','HTTP_CLIENT_IP');如果上面无效的话可以使用这句：//cdn获取真实ip地址 define('__TYPECHO_IP_SOURCE__','HTTP_X_FORWARDED_FOR'...

4896 0 0

真实ip cdn获取ip地址

关于typecho使用cloudflare后台进不去的问题

木灵鱼儿 5年前 Typecho博客教程

关于typecho使用cloudflare后台进不去的问题

由于前天被人d我的服务器，被d到无限黑洞，无奈只能搞点防护了，免费的cloudflare我之前就使用过，虽然说有用，但是会有一个问题，就是后台无限刷新，就是进不去。有人说是参数问题，因为后台的登录链接是带参数的，有人说是缓存问题，不要缓存后台就行了，但是事实上这些都没用，毫无效果。[hide]其主要问题就是https的问题。首先我们都会去使用cf带的ssl证书，但是为了https，只能开启强制https了，但是可能是源站并没有强制，所以导致cdn那边卡住了，只能无限刷新就是进不去。解决办法就是在博客的配置文件config.inc.php的开头加上一句强制https//https后台 de...

17.8w 0 189

cloudflare 后台进不去

jQ 复制剪切版权信息提示插件 jquery-Copyright-notice

木灵鱼儿 5年前锋利的JQuery

jQ 复制剪切版权信息提示插件 jquery-Copyright-notice

最近发现好多站点都开始做这个功能，每次复制都给我弹一次窗口，每次粘贴末尾总是带一大段版权文字，虽然不喜欢，但是没办法。比较这年头分享的知识ctrl+c和ctrl+v就是自己的了，加上超多机器人抓取，原创分享真的很难呢！效果图默认效果开启弹窗提示使用教程[hide]引入插件后，调用copyrightNotice方法： $("选择器").copyrightNotice();默认效果只会在复制的内容后面添加一句版权信息的提示文字。注意：您复制的为原创内容，转载请注明出处！谢谢！当然也是可以支持自定义的，支持传入一个对象，这个对象有三个参数。keyvalue说明copyri...

6437 0 4

复制剪切版权信息提示插件

关闭或者刷新网页启用弹窗提示

木灵鱼儿 5年前 JavaScript

关闭或者刷新网页启用弹窗提示

之前可能学过但是忘记了，这个东西平时也用的少，但是却很有用处，就是一个事件。$(document).ready(function () { $(window).on("beforeunload", function (e) { return confirm("弹出提示信息") }) });必须要给window绑定一个beforeunload事件，这个事件会在刷新页面或者关闭页面时触发，而且他不会马上生效，要等页面加载后，等一会才会生效。必须要return出一个confirm确认弹出提示，其他的alert这些是无效，不使用return...

3535 0 0

弹窗提示

通用《少数派》文章css样式

木灵鱼儿 5年前 CSS

通用《少数派》文章css样式

本来想多搞几个文章的通用样式的，每次写主题，对于文章的样式确实很头疼，目前用的是vue的文章样式，很适合代码和文字混排，但是对于图文混排感觉一般般吧。所以就做了一个新的样式，仿《少数派》的css样式。预览图[hide]使用方法首先我们需要对使用改css样式的文章元素用一个div包裹，并且这个div的id为pai-md；<div id="pai-md"> 这里放文章内容 </div>这样css的作用域就设置好了，然后我们只需要在head引入这个pai.css即可。特殊的md写法## **红色数字**标题二级标题的第一个加粗元素颜色是红色高亮还...

1.3w 0 19

sass 函数

木灵鱼儿 5年前 SASS

sass 函数

函数部分比较少用，有时间我再来细看，这里扒了一下简书的文章。文章来自：链接1. 字符串函数unquote（$string）：删除字符串中的引号；quote（$string）：给字符串添加引号；To-upper-case（$string）：将字符串小写字母转换为大写字母To-lower-case（$string）：将字符串大写字母转换为小写字母（1） unquote（$string）unquote函数主要功能是删除字符串中的引号：不管是双引号还是单引号包裹的字符串，引号皆被去掉；只能删除字符串最前边和最后边的引号，没法去掉中间的引号；如果字符串没有带引号，则返回原字符串；若引号中，有半个不...

8647 0 0

sass 函数

@extend 继承

木灵鱼儿 5年前 SASS

@extend 继承

sass支持继承css属性，一般来说，我们的css继承是从父元素继承一部分可以继承的属性，比如color，font啊，这些，但是如果我们书写一个button按钮，样式会复杂很多，我们会修改它的颜色，边框，内边距等等一系列的属性，但是这些属性我们可能复用很多部分。但一般来说我们不可能对button这个元素名进行样式修改，而是单独建立一个class名来进行样式定制，但就是因为这样，后面如果还有多个button元素，我们可能会不断重复书写一些相同的代码。sass可以通过@extend 去继承某一个class的属性，并且本身也能够进行变动。.button-basic { border: ...

3416 0 0

@extend 继承

@mixin 和 @include

木灵鱼儿 5年前 SASS

@mixin 和 @include

@minxin为混入，实际上可以理解为一个通用的变量，这个变量会将自身里面的属性全部return出去，和function一样，你调用我，我就给你返回一个内容。定义一个混入@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; }混入的名字为：important-text，并且这个名字使用了连接符号-，和class的命名一样，并且sass的连接符除了这个还可以使用下划线_，也就是可以写成：important_text调用混入body { ...

4696 0 0

@mixin @include

@import

木灵鱼儿 5年前 SASS

@import

sass可以将文件分割成多个片段文件，并通过一个scss文件引入这些片段，从而生成一个完整的css文件。首先我们要知道css3有一个 @import的属性，它可以引入本地或者外部文件，但是会生成一个http的请求，这就会导致网页的css渲染会发生延迟。而sass也支持这个属性，但是它的作用远不止如此。@import假设我们现在有两个sass文件，一个是主要的style.scss，一个用于初始化的reset.scss文件，我们要在style中引入reset；@import "reset"; body { font-family: Helvetica, sans-s...

3104 0 0

嵌套

木灵鱼儿 5年前 SASS

嵌套

sass最大的也是最常用的功能就是嵌套了。#nav { ul { color:red; } }这种写法可以理解为：#nav ul { color:red; }当我们要对#nav下多个元素控制css样式的时候，嵌套就显得非常方便，因为父选择器我们只需要写一次。虽然说可以无限嵌套下去，但是如果你根据dom树的结构进行嵌套，你会发现维护起来非常麻烦，因为内容一多，你可能都不知道这个class的父级是谁，所以一般来说，sass的嵌套最好保持在四层以内。嵌套属性我们写css经常会有很多重复的前缀名，比如说font系列的前缀，background的前缀，前面都是相同的，只有后面部...

3491 0 0

sass嵌套

变量

木灵鱼儿 5年前 SASS

变量

sass支持变量，开头使用$符号表示，并且可以存储多种数据类型。字符串数字颜色值布尔值列表null 值例子$myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; }变量也是有作用域的。$myColor: red; h1 { $myColor: green...

3354 0 0

sass变量

vue cli4创建项目去除git

木灵鱼儿 5年前 vue 项目实战

vue cli4创建项目去除git

本地创建的demo项目一般来说不需要git，但是默认的话，是会自动创建的，我暂时没有发现有什么办法可以在已经创建好的项目上直接去除，但是可以在项目创建时进行选择。vue create demo -n-n表示不需要git仓库。

3633 0 0

10天目标计划

木灵鱼儿 5年前实例

10天目标计划

学习scss 已完成

6528 0 4

MUTool 计划流产

木灵鱼儿 5年前 vue 项目实战

MUTool 计划流产

本来是想基于谷歌的firebase服务进行单页app开发，但是遇到了一些问题，但是大概的结构已经摸清楚了，经历了几天头痛欲裂的查看官方文档日子。。。痛并快乐着，又成长了许多。首先介绍一下目前已经做好的功能：功能用户注册用户登录无登录状态可获取公共内容，也就是书签书签分类添加书签二级分类添加书签具体信息添加，包括：logo，title，href三个值，并且增加了对应的表单验证书签分类修改&删除书签二级分类修改&删除书签信息修改&删除搜索功能用户登录后才允许出现新建和编辑功能用户登录有效期（暂时只设置了临时有效）目前就很潦草的开发了这些功能，因为一个人要做很多事情，还要阅读大量莫名其妙的文档...

3175 0 0

MUTool

vue vue-router路由动态修改查询参数query并且页面也要自动更新数据

木灵鱼儿 5年前 vue 项目实战

vue vue-router路由动态修改查询参数query并且页面也要自动更新数据

在使用搜索跳转路由时我遇到了一个问题，我的使用要求是，当我在顶部搜索框输入文字并回车时，要跳转至搜索页，并且搜索页要根据我传入的路由的查询参数进行处理。首次运行的时候很正常，路由页面能够进入，处理也能进行。但是当我第二次的时候，也就是已经进入搜索页的情况下，再次回车搜索时，就会报错，因为我重复进入同一个路由页面了。那么第一个问题：如何避免重复进入同一个路由报错如何避免重复进入同一个路由报错找了半天发现一串有意思的代码：this.$router.push({query: {plan: 'private'}})也就是说，我们路由跳转的时候，只传一个对象，这个对象只包含qu...

1w 0 2

query 查询参数

vue vue-router路由动态修改查询参数query并且页面也要自动更新数据

Reach 响应式Typecho博客主题V1.4

木灵鱼儿 5年前 Typecho 主题

Reach 响应式Typecho博客主题V1.4

Reach 基于Bootsarp4的响应式博客主题，目的是为了更好的阅读体验，更快捷的使用方式，更优质的UI而存在。预览图功能特性[x] todo列表[x] 目录树[x] 评论表情[x] 轮播[x] 面包[x] 分享功能[x] bnner轮播[x] 代码高亮[x] 图箱[x] 主题切换[x] 文章自定义缩略图[x] 图片预加载[x] loading动画[x] 天气......下一版开发进度[ ] 锁屏功能[ ] 新的缓存方式[ ] ......更新内容v1.1修复nav菜单链接不支持非伪静态增加手机端搜索评论表单样式优化天气功能增加文章样式微调loading加载动画图片预加载文章缩略图也...

4.3w 0 28

博客主题 Reach 响应式Typecho博客主题

typecho 博客完美备份还原教程

木灵鱼儿 5年前 Typecho博客教程

typecho 博客完美备份还原教程

终于把站点迁移过来了，期间遇到一些问题，很蛋疼，比如，把站点文件夹整个打包备份后，数据库也一并备份，然后还原的时候会遇到一个神奇的bug。你的邮件回复提醒功能再也无法生效了，哪怕你重新设置账户信息。[hide]数据库备份为此我试了好久，发现只有一个办法可以完美解决这问题，就是会比较麻烦一些，但是文章数据，评论，分类信息，标签都可以完美保留。我们的效果就是，博客的设置信息全部丢弃，只保留文章数据，评论，分类信息，标签。所以我们首先要进入数据库管理，找到对应的几个表：accesscommentscontentsfieldsmetasrelationships如果你用的是默认前缀，那么其完整表...

17.9w 0 172

typecho 博客备份还原

木灵鱼儿

fit-content()函数

Object.freeze() 冻结对象

仿写了一个angular落地页

vuex namespaced 命名空间

router路由守卫之用户权限

网页在线预览pdf文件之PDFObject

网页在线预览pdf文件的demo pdf.js

jq pjax笔记

typecho 使用CDN后评论过滤插件以及真实ip的问题

关于typecho使用cloudflare后台进不去的问题

jQ 复制剪切版权信息提示插件 jquery-Copyright-notice

关闭或者刷新网页启用弹窗提示

通用《少数派》文章css样式

sass 函数

@extend 继承

@mixin 和 @include

@import

嵌套

变量

vue cli4创建项目去除git

10天目标计划

MUTool 计划流产

vue vue-router路由动态修改查询参数query并且页面也要自动更新数据

Reach 响应式Typecho博客主题V1.4

typecho 博客完美备份还原教程

最近评论

博客文章RSS订阅

博客评论RSS订阅