木灵鱼儿

木灵鱼儿 5年前 JavaScript

谷歌 google验证码 reCAPTCHA V3 对接

v3它没有显式的一个操作，他可以在用户不知道的情况下进行验证，通过判断用户评分这些，不过评分判断要配合后端使用，如果是纯前端操作，那么会和v2一样，成功会返回一个token。基本<script src="https://www.recaptcha.net/recaptcha/api.js?render=第一个key"></script> <script> grecaptcha.ready(function () { grecaptcha.execute('第一个key', { action: ...

1w 0 5

reCAPTCHA

谷歌 google验证码 reCAPTCHA V2 隐藏式对接

木灵鱼儿 5年前 JavaScript

谷歌 google验证码 reCAPTCHA V2 隐藏式对接

相对于复选框式的，该插件还支持隐藏式的。基本型基本型是最简单的一个方式，它需要先将js文件引入，不能异步，并且要开启自动加载组件，基本就是把一个组件绑定在一个按钮元素上，而且这个隐藏式，还需要单独申请一个隐藏式的key，自行申请。<script src="https://www.recaptcha.net/recaptcha/api.js"></script> <script> function onSubmit(token) { console.log(token) } </script><but...

5301 0 1

reCAPTCHA

谷歌 google验证码 reCAPTCHA V2 复选框形式对接

木灵鱼儿 5年前 JavaScript

谷歌 google验证码 reCAPTCHA V2 复选框形式对接

申请key地址：googlev2版就是常见的验证方式，v3是通过判断评分的方式，这里先看看v2的用法。首先google官方文档：文档提供的api链接国内是无法使用的，需要调整下：https://www.google.com/recaptcha/api.js将这段链接改为：https://www.recaptcha.net/recaptcha/api.js即可。引入js由于js我们可以异步引入，所以官方支持一个load回调，所以使用异步加载js文件的话，你的回调函数记得要写在加载js文件之前官方引入示例：<script src="https://www.recaptcha...

5704 0 0

reCAPTCHA

MUFlow V1.5 使用文档

木灵鱼儿 5年前 Typecho 主题

MUFlow V1.5 使用文档

更新日志v1.1修复微信二维码分享弹出问题调整部分css样式增加文章缩略信息页快速编辑文章功能部分php调整增加部分js文件加速v1.3.3加入pjax，浏览更加顺滑加入主题设置，增加丰富的自定义布局、自定义特效、自定义图片加速，之前php设置可以放弃了，直接主题里设置修复一些历史遗留bugv1.4新增自选二次元美化样式修复缩略图的一些bug样式调整v1.5新增书签模板新增三种缩略文章样式选择针对瀑布流布局增加一些设置样式调整遗留bug修复主题设置预览书签模板教程新建独立页就不多说了，自己选择自定义模板为bookmark即可，然后书签的格式为：## 工具 1. ![七牛](htt...

6715 0 2

MUFlow

flex弹性布局和grid格子布局常用5种布局结构

木灵鱼儿 5年前 HTML CSS

flex弹性布局和grid格子布局常用5种布局结构

flex弹性布局flex第一种基本布局header会占据除去footer的所有高度，footer高度可以自己设置，默认是占满的。<div id="layout"> <div class="one">header</div> <div class="two">footer</div> </div>html,body { height: 100%; margin: 0; padding: 0; } #layout { heigh...

5607 0 0

flex弹性布局 grid格子布局 5种布局结构

fit-content()函数

木灵鱼儿 5年前 CSS

fit-content()函数

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

5082 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}无法被修改。但是还有一种情况，...

4251 2 0

仿写了一个angular落地页

木灵鱼儿 5年前 HTML

仿写了一个angular落地页

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

3956 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...

3537 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...

5139 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...

5762 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...

7344 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'...

5002 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...

18.2w 0 189

cloudflare 后台进不去

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

木灵鱼儿 5年前锋利的JQuery

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

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

6593 0 4

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

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

木灵鱼儿 5年前 JavaScript

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

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

3604 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函数主要功能是删除字符串中的引号：不管是双引号还是单引号包裹的字符串，引号皆被去掉；只能删除字符串最前边和最后边的引号，没法去掉中间的引号；如果字符串没有带引号，则返回原字符串；若引号中，有半个不...

8739 0 0

sass 函数

@extend 继承

木灵鱼儿 5年前 SASS

@extend 继承

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

3477 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 { ...

4815 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...

3184 0 0

嵌套

木灵鱼儿 5年前 SASS

嵌套

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

3571 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...

3446 0 0

sass变量

vue cli4创建项目去除git

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

vue cli4创建项目去除git

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

3684 0 0

木灵鱼儿

谷歌 google验证码 reCAPTCHA V3 对接

谷歌 google验证码 reCAPTCHA V2 隐藏式对接

谷歌 google验证码 reCAPTCHA V2 复选框形式对接

MUFlow V1.5 使用文档

flex弹性布局和grid格子布局常用5种布局结构

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

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

谷歌 google验证码 reCAPTCHA V3 对接

谷歌 google验证码 reCAPTCHA V2 隐藏式 对接

谷歌 google验证码 reCAPTCHA V2 复选框形式 对接

MUFlow V1.5 使用文档

flex弹性布局和grid格子布局常用5种布局结构

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

最近评论

博客文章RSS订阅

博客评论RSS订阅

谷歌 google验证码 reCAPTCHA V2 隐藏式对接

谷歌 google验证码 reCAPTCHA V2 复选框形式对接