木灵鱼儿

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

修改Gravatar的头像源为七牛源

之前有一段时间我发现网站功能都加载完了，但是浏览器还是显示转圈，找了半天发现是个人的头像加载太慢了，于是今天特意去找了下有什么快速的源，于是看到了七牛的一个源...真香....233话不多说，上教程首先我们要打开typecho根目录配置文件config.inc.php,在里面加上这句话！/** 更换gravatar头像源*/ define('__TYPECHO_GRAVATAR_PREFIX__', 'https://dn-qiniu-avatar.qbox.me/avatar/'); 完事！如果你自己反代了源，也可以把https这个链接改为你自己的。

5020 0 0

Gravatar源

关于原生Bootstrap4 二级菜单点击整个菜单消失的bug

木灵鱼儿 5年前 Bootstrap4

关于原生Bootstrap4 二级菜单点击整个菜单消失的bug

在写《MUFlow》主题的时候，我遇到一个很头疼的问题，就是点击分类会显示分类菜单，但是这个菜单还会有子级菜单，按照嵌套规则，我对这个子级的菜单元素，用一个div包裹，并且加上了class类名dropdown-menu，然后里面的内容就按照官方的标准书写，但是就出现了一个问题。当我点击子级菜单后，整个菜单都消失了。一脸蒙蔽，什么鬼，难道我做错了，什么情况，在不断的对照不同人写的例子后，我崩溃了，然后无意间看到开发者控制台的class变化后，我大概有点知道为什么了。当我点击子级菜单后，子级菜单对应的dropdown-menu元素是显示的，它的class有了show类名，但是一级菜单就没了，...

4478 0 0

多级菜单 bootstrap-submenu

jQ 音乐播放器

木灵鱼儿 5年前锋利的JQuery

jQ 音乐播放器

html5对多媒体优化很多，但是到现在我对于音乐和视频还是未知，所以这次就研究了下关于audio的用法。预览图功能[x] 播放&暂停[x] 上一曲&下一曲[x] 停止[x] 音量静音&音量条调整[x] 歌词[x] 播放进度条，可操控[x] 已播放时间&单曲总时长[x] 播放列表，支持双击播放，高亮提示[x] 三种播放模式，随机、列表循环、单曲循环注意由于火狐浏览器因为版权问题，并不支持mp3格式，所以我找到的办法就是从对火狐浏览器的设置进行调整，具体说明demo上贴了。demo[hide]音乐播放器[/hide]

9984 0 6

audio 音乐播放器

远程字体详解阿里巴巴矢量字体库css原理

木灵鱼儿 5年前 CSS

远程字体详解阿里巴巴矢量字体库css原理

关于自定义字体，我一开始只以为只能本地加载，也就是css里面定义的字体，都只能从本地加载到，但是后来我了解到字符图标，一开始也是照本宣科使用本地字体，这就导致了一个问题，如果服务器网速带宽不够，就会产生字符字体文件未加载完整时，有一个占位字符显示，时间一长就显得极度的难看。然后我使用了阿里矢量字体库里面的字体，是可以直接下载一个css文件，然后本地引用，就可以直接用了，我就奇了怪了，怎么做到的，当然，这个疑问到今天也就完全明白了。首先要明确一点，阿里巴巴的那个css文件虽然写的很多，但是个人测试的时候好像也不支持ie9以下，也不知道是代码问题还是什么，不过现在能兼容ie11就不错了。自定...

5291 0 0

font-face 自定义字体远程字体

web复制按钮功能实现

木灵鱼儿 5年前 JavaScript

web复制按钮功能实现

三种方式，两种原生js方式，一种js插件。html代码<div class="container my-5"> <p id="box">这是福实打实大师空dsadada间大空间的哈实践活动卡萨很大快速</p> <button class="btn btn-info mb-3" id="copy">复制</button> <input type="text" class="form-contr...

4791 2 2

web复制按钮

剪贴板事件 copy、cut、paste

木灵鱼儿 5年前 JavaScript

剪贴板事件 copy、cut、paste

很多项目里面会用到复制和粘贴两个功能，但是我平时也用不到，这里就详细学习一下是怎么运作的。剪贴板事件了解剪贴板有6个事件，其中现代浏览器火狐只支持三个，ie和谷歌则支持全部。事件名说明beforecopy复制事件触发之前触发copy复制beforecut剪切事件触发之前触发cut剪切beforepaste粘贴事件触发之前触发paste粘贴其中火狐浏览器只支持 copy，cut，paste三个事件。其中ie和谷歌浏览器的话是都支持的，并且在ie中使用右键菜单进行复制剪切粘贴的操作，事件会触发多次，而在现代浏览器中，你复制一次，只会触发一次copy事件和beforecopy事件这种，哪怕是右...

4354 0 0

剪贴板事件 copy cut

垃圾佬1700预算组装一台跑分20万itx

木灵鱼儿 5年前教程

垃圾佬1700预算组装一台跑分20万itx

去年一时冲动买了追风者218，被迫买了一块itx主板，但是坑爹的因为垃圾风道搞得我显卡风扇坏了，然后又没有地方有卖风扇，新显卡又买不起，无奈走上了垃圾的不归路。首先我们看下娱乐大师跑分：这个分数玩网游，吃鸡，包括程序员代码，都不是问题了，甚至用于办公都游刃有余。配置：主板主板是去年买来闲置的七彩虹H110 pro v20;因为垃圾追风者被迫购买，后来换了先马米立方，itx就闲置了，过年的时候就一直想着怎么把这个板子用上，于是打起了itx的主意。主板带m.2固态接口，但是走的sata带宽，对于我来说足够了，因为我用了几年这种接口，做个系统完全足够，对于我这个半吊子小白前端就是ojbk。况且...

3723 0 0

itx

Reach 使用文档

木灵鱼儿 5年前 Typecho 主题

Reach 使用文档

独立页面目前只做了友链和关于页面，像分类页和时间归档这些基本没什么用，也就没有做，而FAQ页面准备设置为主题的帮助页面，但是目前太忙也没来得及做，到时候更新的时候加上去。创建友链和关于页面：如果你之前也有独立页面并且不是下面两个，我建议是删除，不删除虽然也会在导航栏输出，但是进去不会有内容，本主题暂时只适配这两个独立页面，有能力者也可以自行开发友链撰写 --- 创建页面 --- 标题填：友链 --- 链接自定义填：links --- 自定义模板选：links截图忘记写了，友链右侧的页面顺序填1友链的内容格式为表格，md的写法，格式如下：| LOGO | 站点名称 | 站点...

1.1w 0 7

Reach Reach 使用文档

vue 引入本地文件其他路由页面刷新后报错不存在

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

vue 引入本地文件其他路由页面刷新后报错不存在

一般来说，vue的本地资源引入是由index.html文件进行引入的，但是我做页面的时候遇到一个问题，就是在首页刷新没有问题，在其他路由页面刷新，就会出现报错，提示某某某js文件或者方法不错在，或者资源文件，如css，img这些引入出错。原因就是因为引入时在开头加./，按道理来说，加这个也没有问题，因为在vue-cli3里面，index.html文件是和静态文件在同一个目录的，这样引入并不会报错。但是错也错在这里，由于打包后，目录结构发生了变化，之前的./可能无法正确的获取，所以解决办法就是不要.了。目录结构示意图：正确的引入方式：<link rel="styleshe...

3293 0 0

vue 引入本地资源

try_files $uri $uri/ /index.html;try_files $uri $uri/ /index.html;

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

try_files $uri $uri/ /index.html;try_files $uri $uri/ /index.html;

一般我们认为启用history模式只是去掉地址栏的#符号，然后Nginx服务器为了实现这个效果需要添加一段代码用于支持该效果。但实际上并不是表面上那么简单，给Nginx添加这段代码后，我们可以直接在地址栏输入路由链接，从而进入到对应的路由页面，如果没有使用该段代码，地址栏的#号依旧会消失，但是你无法通过直接输入路由地址直接进入到对应的页面。代码：## 启用history模式（什么请求都只返回index.html） location / { try_files $uri $uri/ /index.html; }

5399 0 0

try_files $uri $uri/ /index.html;try_files $uri $uri/ /index.html;

vue cli3 如何绑定图片src属性

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

vue cli3 如何绑定图片src属性

升级到3之后，静态的文件都统一存放在public目录下，但是这个目录下，你在index.html的时候很好引入，在组件中，就不行了，因为webpack打包后路径就变了，所以我们要使用一个动态的参数。动态参数绑定这种情况一般出现在我们用v-for遍历一个对象，在对象里面会有对于的图片的地址，但是这个地址一般来说可能只写图片的名字，因为路径是一样的，直接在遍历的时候统一就行了，但是这个时候我们会发现地址是失效的。<img v-for="item in imgarr" :src="'../../images/'+item.src"...

3767 0 0

vue绑定图片src

数字跳动特效-countUp插件用法

木灵鱼儿 5年前 JavaScript

数字跳动特效-countUp插件用法

逛高斯键盘官网的时候，应该是去年的时候，官网改版后有一个特效挺有意思的，就是数字跳动，之前一直没空研究，今天抽空去看了下，js有一个开源的插件：countUp.js 先看看高斯的效果图：效果就是这样，我们先去下载js文件CountUp.js下载完我们找到dist目录下的countUp.min.js文件，拿出来在你需要的项目中。再新建一个js文件，名称自定义，这里是用于调用countUp的，你可以命名为：start.counUp.js教程注意，使用该功能你需要一个服务器环境，本地直接打开是不行的!引用由于版本更新后，采用了es6的模块写法，引入js文件的时候需要注意不能使用传统的type属...

7122 50 0

数字跳动特效

css3 字体渐变动效

木灵鱼儿 5年前 CSS

css3 字体渐变动效

以前写过一篇关于字体渐变效果的文章，那时候初出茅庐，啥都不太懂，就只会个静态，这次逛animate.css网站的时候发现他的字体是动态渐变效果的，这就有点刺激了，于是研究了一下。效果图教程主要是利用了css3的滤镜效果，也就是hue-rotate()色调转盘，他会根据当前的颜色进行调整，大概可以理解为ps中的调整色相吧。 p { font-size: 60px; color: #f35626; background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%); -webkit-ba...

4336 0 0

字体渐变动效

string类型的match()如何匹配多个值

木灵鱼儿 5年前 JavaScript

string类型的match()如何匹配多个值

match()方法是可以匹配一个或者多个相同的值，并返回匹配的结果数组。比如：变量a的值为'bbb';它是一个三个相同字符的变量，我们使用match进行匹配var a = 'bbb'; console.log(a.match('b'));你会发现只会返回含有一个b的数组：['b']；但事实上我们是有三个b的，按道理应该要返回三个b的数组才对，那么这是为什么呢？首先我们要看一下w3c对于match的一段解释：match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文...

5950 0 0

match

vue 理解双向绑定v-model和调用组件为何要用v-mdel绑定

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

vue 理解双向绑定v-model和调用组件为何要用v-mdel绑定

vue中绑定一个属性使用的是v-bind:指令，简写形式为:；使用该指令可以绑定data中的key，从而获取它对于的value值，但是这个绑定它是单向的，如果你元素本身修改了内容，并不会影响到data中对于的值。在与表单的交互中只有单向绑定是不实用的，于是有了双向绑定，我们可以给一个input表单元素通过v-model双向绑定一个key，并且当我们修改input中的内容时，绑定的值也会跟着发生变化。其原理也非常简单。v-model绑定：<input type="text" v-model="name" />v-mode原理<inp...

4193 0 0

v-model

多行文本溢出显示省略号

木灵鱼儿 5年前 CSS

多行文本溢出显示省略号

css控制文本溢出隐藏css兼容最好的就是单行文本溢出省略号了，我们先看下单行的css是怎么设置的：p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }表示文本不换行，做一行显示，然后文本超出p元素的宽度做省略号显示，且为了兼容低版本浏览器加了超出部分裁剪的css效果。这个就是一个基本的文本溢出省略号显示的一个效果。但是，单行已经不能满足我们日常所需了，在一些文本简介中，我们都希望的是能够有多行的显示，再多则做省略号显示，这个功能目前来说，只有webkit内核的浏览器支持这个效果，i...

6857 0 1

多行文本溢出

html class="no-js"

木灵鱼儿 5年前 HTML

html class="no-js"

这个class是需要配合一个js文件才有效果，主要就是检查浏览器是否支持css3和html5的特性，通过js的一些操作，减少不同浏览器之前的差异。配合modernizr.js文件，该文件需要在head标签中引用。modernizr官网引用后给html标签加上class<html class="no-js">当然，我没有去测试这个东西，只是作为一个知识去了解一下，因为typecho的官方默认主题就用了这个class，但是他没有对应的效果，也没有引入modernizr，而是使用html5shiv，加上我写主题，本着懂的地方我就可以动，不懂就不动的做法，这个cl...

3864 0 0

no-js

html lang中文的最新标准

木灵鱼儿 5年前 HTML

html lang中文的最新标准

通过lang属性可以告诉浏览器，这是一个什么语言的界面，像网页的那些自动翻页工具，也会通过检测lang的属性来判断当前页面是什么语言。那么，这么多年了，lang的中文属性是否有变动呢？答案是有的，这里我就简单说一下一般设置为什么值才表示这个网页是中文简体。兼容性写法：<html lang="zh-CN">最新写法<html lang="zh-Hans-CN">表示：中国大陆的简体中文

4726 0 0

lang

百度举报就是个摆设

木灵鱼儿 5年前 ·

百度举报就是个摆设

百度搜索举报系统就是个摆设，明明写了，如果站点被恶意镜像是可以通过举报反馈的，搜博客名恶意网站都顶到前头来了，结果两次举报毫无效果，回复统一，从回复的内容上看，摆明了就是不管你的死活，呵呵.....既然垃圾内容能够得到保护，而辛苦的原创者只能成为案板上的肉，任人宰割，还能得到保护，容我说一句，百度倒闭，指日可待！垃圾内容充斥着搜索页，这种东西不用也罢！以防人家以为我瞎掰，这里放上截图，给你们看看百度是怎么处理的。话也不多说，垃圾的东西就是垃圾，恶心，大家做网站记得防范一下那些恶意反代的。

5868 0 3

jQuery 天气插件reachweather

木灵鱼儿 5年前锋利的JQuery

jQuery 天气插件reachweather

图是我目前主题使用的样式，但是插件不带任何ui样式，他只有三个参数选项，通过传入的success函数进行天气数据对象的操作。更新2020-2-25新增高德ip定位，增加准确性！参数参数类型说明baidukeystring百度普通ip定位开发者keyamapkeystring高德天气开发者keysuccessfunction接受一个参数，该参数为返回的天气数据对象，具体可以查看高德天气说明我们先看下success接受的data是什么东西可以看到他就是一个键值对的对象，可以通过点方法调用到对应得值。调用方法 $.reachweather({ baidukey: '百度开发者...

5039 0 0

天气插件

源映射错误：Error request failed with status 404

木灵鱼儿 5年前教程

源映射错误：Error request failed with status 404

源映射错误：Error: request failed with status 404 源 URL：https://www.mulingyuer.com/usr/themes/Reach/js/vendor.min.js 源映射 URL：vendor.min.js.map在火狐浏览器发现了这个黄色警告，提示映射源错误，但事实上js文件都是引用成功的，为此也有点摸不着头脑，怎么就弹窗了，然后往下看可以看到有一个.map的文件。首先来了解一下.map文件是做什么的map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等元信息数据文件，一般这种文件和min.js主文件放在同一个目录下。...

7188 0 1

源映射错误

jQ常用方法

木灵鱼儿 6年前锋利的JQuery

jQ常用方法

$(document).ready(function () { /*禁用右键菜单 * 所有元素都有contextmenu事件，通过冒泡的方式可以触发到最外围的元素 * 直接给document元素设置该事件可以阻止右键菜单事件 * */ $(document).on('contextmenu', function () { return false; }); //给a元素设置新建窗口打开 $('a[href^="http"]').attr('...

4406 0 0

jQ常用方法

jQ 狂野飙车9加载动画V1.1

木灵鱼儿 6年前锋利的JQuery

jQ 狂野飙车9加载动画V1.1

响应国家号召，在家里待着实在是没啥娱乐方式，就下了狂野飙车9玩，期间对它这个加载动画很喜欢，觉得能搞下来，就自己仿着样式写了个加载动画，这个动画以后将加入的我的自用主题效果，废话不多说，上图！更新2020-2-3优化的最后阶段动画展示方式修复快结束动画的时候，窗口发生变化导致的动画重载针对部分宽屏做了初始化原汁原味效果（默认显示固定方格位置的背景图）预览图教程设置颜色<div id="aligame" data-theme='{"backgroundColor":"#1b2a2f","borderCol...

4157 0 0

狂野飙车9加载动画

JQ Mobile框架

木灵鱼儿 6年前锋利的JQuery

JQ Mobile框架

了解了一下jq的移动端框架，因为年代久远，让我怀念曾经的时代，是何其的辉煌。首先由于年代久远，jq的版本需要使用1.0.1版本，然后下载jquery.mobile - 1.4. 5.zip，里面会有很多文件，我们需要拿两个主要文件，还有图片就行，文件分别为：jquery.mobile-1.4.5.min.cssjquery.mobile-1.4.5.min.js一个css文件，一个js文件，然后引入顺序为，css，jq，jq.mobile使用方法：通过自定义的元素属性来配置，基本结构如下<div data-role="page"> <div ...

5371 0 1

JQ Mobile框架

横向轮播

木灵鱼儿 6年前锋利的JQuery

横向轮播

应群友要求写了一个横向轮播，嗯.....有些小问题，但是不影响使用，后续再优化吧！不过现在都是用别人现成的成品了，组件那些，自写轮播挺少的了！预览图demo由于毛子的服务器移动网进不去，等回广州了再传吧！

4319 0 0

轮播

木灵鱼儿

修改Gravatar的头像源为七牛源

关于原生Bootstrap4 二级菜单点击整个菜单消失的bug

jQ 音乐播放器

远程字体详解阿里巴巴矢量字体库css原理

web复制按钮功能实现

剪贴板事件 copy、cut、paste

垃圾佬1700预算组装一台跑分20万itx

Reach 使用文档

vue 引入本地文件其他路由页面刷新后报错不存在

try_files $uri $uri/ /index.html;try_files $uri $uri/ /index.html;

vue cli3 如何绑定图片src属性

数字跳动特效-countUp插件用法

css3 字体渐变动效

string类型的match()如何匹配多个值

vue 理解双向绑定v-model和调用组件为何要用v-mdel绑定

多行文本溢出显示省略号

html class="no-js"

html lang中文的最新标准

百度举报就是个摆设

jQuery 天气插件reachweather

源映射错误：Error request failed with status 404

jQ常用方法

jQ 狂野飙车9加载动画V1.1

JQ Mobile框架

横向轮播

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

修改Gravatar的头像源为七牛源

关于原生Bootstrap4 二级菜单点击整个菜单消失的bug

jQ 音乐播放器

远程字体 详解阿里巴巴矢量字体库css原理

web复制按钮功能实现

剪贴板事件 copy、cut、paste

垃圾佬1700预算组装一台跑分20万itx

Reach 使用文档

vue 引入本地文件其他路由页面刷新后报错不存在

try_files $uri $uri/ /index.html;try_files $uri $uri/ /index.html;

vue cli3 如何绑定图片src属性

数字跳动特效-countUp插件用法

css3 字体渐变动效

string类型的match()如何匹配多个值

vue 理解双向绑定v-model和调用组件为何要用v-mdel绑定

多行文本溢出显示省略号

html class="no-js"

html lang中文的最新标准

百度举报就是个摆设

jQuery 天气插件reachweather

源映射错误：Error request failed with status 404

jQ常用方法

jQ 狂野飙车9加载动画V1.1

JQ Mobile框架

横向轮播

最近评论

博客文章RSS订阅

博客评论RSS订阅

远程字体详解阿里巴巴矢量字体库css原理