木灵鱼儿

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

yarn 安装node-sass报错的解决办法

听说yarn很好用，所以这次初始化项目的时候使用的就是yarn，在安装完yarn后，再用vue create会自动调用yarn进行初始化，应该是吧，我初始化的时候显示用的yarn。但是安装node-sass的时候会报错，原因可能是因为网络问题，所以需要给yarn更换为国内的源：yarn config set registry https://registry.npm.taobao.org -gyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g两段命令都提示success就ok了，再重新安...

5827 0 0

vue yarn node-sass

typecho 完美自定义分页

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

typecho 完美自定义分页

大人，时代变了！目前typecho最完美的解决方案了，因为百度只能看到固定思维的代码。先看看实际生成的html代码截图，干净到让人窒息完全的自定义，包括给li元素加上class，给a元素加上class，给上一页下一页加上class，去除typecho自带用于表示更多的li标签。甚至里面的内容我也能添加一些文字。废话不多说，上源码：[hide]<nav class="my-5"> <?php ob_start(); $this->pageNav('«','&...

19.6w 0 196

typecho 分页自定义分页

typecho 自定义文章分类

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

typecho 自定义文章分类

默认情况下，官方给的代码<?php $this->category(','); ?>是一个a链接，然后多个则用第一个参数逗号分隔。如果我们不想要a链接，可以给第二个参数传个false，这样输出的就是文本了。<?php $this->category(',',false); ?>即便是这样也不方便，因为我们可能需要对这个a元素添加class，但是官方这个生成的是定死的，不太方便，所以我搞了半天，写了个完全自定义的文章分类。[hide]<?php $categories = $this->categor...

2.2w 0 31

typecho 分类自定义

帮群友写了个落地页

木灵鱼儿 5年前 HTML

帮群友写了个落地页

帮群友写了个落地页参考了下某框架里面的主题落地页，花了几个小时做出来了，满意，虽然可能赶时间，class的命名有点怪怪的，哈哈哈。。。

3669 0 0

落地页

typecho 获取指定独立页链接

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

typecho 获取指定独立页链接

<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?> <?php while ($pages->next()) : ?> <?php if($pages->slug === 'about') :?> <li> <a href="<?php $pages->permalink(); ?>"><?php $pages->t...

4339 0 0

typecho

Typecho 自定义评论模板

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

Typecho 自定义评论模板

百度了好多篇文章，用起来都会报错，花了一天时间研究，终于搞明白自定义评论是怎么做的。typecho的评论模板是comments.php文件，在这个文件，可能会有人在开头加上这句话：<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>事实上这句话是不需要的，记得删除它。自定义评论的基本结构很多人在看官方的文档时就会迷糊，说了那么多，到底自定义评论的完整结构是啥，这里我就简单列出来，就三个部分。comments.php|---- 自定义评论列表函数|---- 评论表单|---- 评论列表输出其中评论表单和评论...

3.1w 2 19

主题 typecho Typecho 自定义评论模板

uni 上传文件

木灵鱼儿 5年前 UNI-APP

uni 上传文件

非H5端用uni的api，比如上传图片就用uni.chooseImage，通过配置一些基本设置，回调函数会返回一个本地的地址段，然后通过uni.uploadFile将文件上传。uni.uploadFile有回调函数，并且支持H5，所以H5端如果要做上传，我们可以直接使用file的input元素。官方制作的demo apphello uni-app这个app里面有一些功能模块的预览，看视频说是有一个裁剪图片的组件，找了半天没找到，有兴趣的可以去看看。

3123 0 0

uni 非H5微信小程序多端登录

木灵鱼儿 5年前 UNI-APP

uni 非H5微信小程序多端登录

首先你需要在manifest.json里面配置对应的登录的key那些。配置完毕，函数流程如下用户点击一个按钮，判断这个按钮是什么登录，比如是QQ触发uni.login()方法，它的provider为qq，然后在回调里面则表示登录成功，但是还不能拿到用户的信息。在回调里面调用 uni.getUserInfo();它的provider为qq，然后在回调函数success里面，接受一个对象，这个对象里面就包含了用户的信息。基本上这些第三方登录，都会有一个唯一的id返回给你，后端可以利用这个唯一的id来判断用户是否已经注册了或者其他。然后还可以进行关联，比如将getUserInfo获取到的用户信...

3381 0 0

uni 微信登录

木灵鱼儿 5年前 UNI-APP

uni 微信登录

首先button获取用户基本信息： <button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">登录</button>open-type="getUserInfo" 获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括头像、昵称等信息（微信小程序、百度小程序、QQ小程序）@getuserinfo用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserI...

4090 0 0

uni h5端+小程序实现多端下载

木灵鱼儿 5年前 UNI-APP

uni h5端+小程序实现多端下载

uni不支持h5下载，因为其api不支持，所以我们只能用h5的办法来解决这个问题。最简单的办法就是利用a链接，因为只用处理手机端，所以本来更合适pc+移动端的axios方案可以不用。封装一个下载方法：saveFile: function(url, success) { const dA = document.createElement("a"); dA.download = ''; // 设置下载的文件名，默认是'下载' dA.href = url; document.body.appendChi...

4518 0 0

多端下载

uni h5端使用video.js

木灵鱼儿 5年前 UNI-APP

uni h5端使用video.js

官方最近更新了使用文档，所以本文提供的方法可能不是有效的，反正就自己摸索吧，大概原理，看一遍应该就明白，悟性很重要，教程的更新肯定不如人家开发的快，吸取经验就行了。uni的h5端video组件，它不支持hsl视频格式，但是目前来说， m3u8格式文件是个常用性较多的了，所以我研究了下uni怎么弄。首先，官方要求需要创建一个html文件，这个文件和vue-cli的index.html异曲同工，而且位置还可以自由设置，按照开发尿性，放项目根目录应该算是合理的路径了。内容的话直接copy官方提供的就行了，顺带官方连cdn引入video都弄好了。官方文件index.html创建好后去配置文件配置...

1.2w 0 5

video.js

muse-ui cli4 开启水波纹

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

muse-ui cli4 开启水波纹

只要还是vue的版本太高了。需要安装稍微低一点的版本才可以有水波纹动效，这个方法也是百度找到的，非常有用。原方法出处: 修改Vue.js版本，以修复MuseUI没有水波纹效果的BUG首先卸载vue：npm uninstall vue npm uninstall vue-template-compiler 安装指定版本npm install vue@2.6.8 -save npm install vue-template-compiler@2.6.8 -save-dev 重启，完事。最后发现新版路由也不能很好的支持，要换旧版的，我使用的是2.6.0.npm uninstall vue-...

3509 0 0

muse-ui 水波纹

.sync 的用法

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

.sync 的用法

sync在vue早期版本2.0的时候被移除了，后来又加上了，作为一个用于子组件修改父组件传入的prop而存在的语法，用法如下：父组件：< template> < Snackbar :open.sync="showMessage" /> < /template> <script> export default { data() { return { showMessage: true, }; } </script>子组件通过接受父组件的showMessage布尔值。子...

3475 0 0

.sync

keep-alive 滚动条位置不还原的问题

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

keep-alive 滚动条位置不还原的问题

我想来想去，可能是布局的问题，或者是过渡动画导致的，元素的scroll无法记住。我尝试给html，body，和最外围的父元素隐藏滚动条，然后只给内容的容器元素设置滚动条，结果切换的时候还是无法记住。实在没辙，只能用点强迫办法了，就是在路由出去之前记住当前容器的滚动条高度，然后进入的时候延迟一点点时间，再恢复，为什么要延迟呢，这个主要是因为动画的问题。在需要记住滚动条高度的路由页面使用路由守卫：//离开之前保存scrollTop beforeRouteLeave(to, from, next) { //保存滚动条元素div的scrollTop值 this.scrollY = ...

5413 0 0

keep-alive 滚动条

keep-alive 缓存指定路由

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

keep-alive 缓存指定路由

一般情况下，keep-alive会对组件进行缓存，然后下次进入的时候使用的是缓存，从而节省性能，但是也会有一定的问题，就是如果你的路由页面有分子路由，用户此时进入到了子路由b，而我们默认路由时a。这就导致当我们利用路由跳转的时候，即便跳的是子路由a，但是因为缓存的问题，导致进入的是b，因为b被缓存了。解决办法：利用meta标签来判断，是否需要缓存，这就需要在每个路由配置上设置一个属性：export default[ { path:'/', name:'home', components:Home, meta:{ keepA...

3648 0 0

小鱼儿壁纸 H5 App制作成功

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

小鱼儿壁纸 H5 App制作成功

这段时间花了点心思在这个项目上，之前做的书签项目因为后端的问题，不得不放弃，而这个壁纸项目就不用全依赖后端，后端只要提供数据就行了。功能特性用户注册用户登录用户修改账户信息图片排行榜图片随机页图片每日强力搜索：关键词搜索分类筛选相关性筛选（强）颜色筛选（牛）排序分辨率比例图片详情页图片下载浏览量图片色带颜色预览 + 一键复制图片上传者信息图片详细信息图片tag标签搜索，点击进入图片原图查看预览图目前只做app浏览好了私聊我给地址，最好提供邮箱

3503 0 0

app 小鱼儿壁纸 H5 App

babel es6转es5

木灵鱼儿 5年前 Node

babel es6转es5

全局安装babelnpm i -g babel-cli创建一个项目并node初始化新建一个文件夹就是了，然后输入npm init接着会出来一堆配置信息，可填可回车，无所谓，因为我们只需要转义js就行了。局部安装转换包npm i -save-dev babel-preset-es2015 babel-cli安装完package文件里面应该也有对应的东西了。配置babel创建.babelrc文件，有可以不用创建文件内容如下{ "presets":[ "es2015" ], "plugins":[] }保存完毕转...

4037 0 0

锤子的字体样式

木灵鱼儿 5年前 CSS

锤子的字体样式

font-family: Helvetica Neue, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; color: #666; font-...

4717 0 0

字体样式锤子字体

常用的特效库

木灵鱼儿 5年前教程

常用的特效库

CSS Spinners 加载动画库官网Loaders 加载动画库Spinners 只有几款动画而已，而这个有超多的githubhover动画库 Hover.css官网githubjs动画库 Anime.js官网github可以对transform和svg对象进行动画，很强大。scrollReveal.js通过scroll进行的动画，应该可以用于滚动页面，然后对应的内容缓缓出现官网githubWaves.js 水波纹按钮官网githubpace.js 网页进度条之前pajx的时候使用过一款进度条，这里还有另一款官网githubbutton按钮样式库官网githubOdometer.js...

6618 0 1

特效库前端特效

3d 视差特效

木灵鱼儿 5年前 JavaScript

3d 视差特效

已经写好demo了，但是想做成一个jq插件，暂时又不想动手，以后再说吧，先上个图。

3357 0 0

jQ jquery-i18n-properties 多语言切换国际化

木灵鱼儿 5年前锋利的JQuery

jQ jquery-i18n-properties 多语言切换国际化

一直想搞个多语言切换的东西，想的头发都没了。终于让我看到了一个插件，虽然已经是很久以前的东西了，但是我测试了下，还真鸡儿好用。github地址: 官网引入文件，因为是jq的插件，所以在jq文件后面引入：<script src="https://cdn.jsdelivr.net/gh/jquery-i18n-properties/jquery-i18n-properties/jquery.i18n.properties.min.js"></script>引入后可以通过jQuery对象调用。我们先讲一下大概过程再来说调用方法：首先我们要有语言文件，...

7405 0 0

多语言切换 jquery-i18n-properties 国际化

fancybox 视频弹窗

木灵鱼儿 5年前 JavaScript

fancybox 视频弹窗

刚了解了下dplayer所以，兴起，想试试看看fancybox怎么弹出视频。我去fancybox官网了解了一下，发现一个官方的弹窗有三个例子，头两个都是使用原生的video标签，这就不是很方便了，因为目前来说，能拿到mp4这种通用格式的视频文件直连很难了。加上我本身就是要使用插件Dplayer的，所以要使用第三种方式，href关联id。结构如下：<a href="#video" data-fancybox="video">点击查看视频</a> <div id="video" class="...

4293 0 0

fancybox 视频弹窗

视频插件 Dplayer

木灵鱼儿 5年前 JavaScript

视频插件 Dplayer

官网：中文 github: Dplayer这个如果是按照普通的开发模式，本地开发的话，要引入一个css和js，js在github上有，而css没有，我找不到，最后在cdn库里面翻到一个，所以这里就提供一下吧！<link rel="stylesheet" href="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.css"> <body> <div id="dplayer"></div> <script src...

1.3w 1 1

Dplayer 视频插件

音乐插件 APlayer

木灵鱼儿 5年前 JavaScript

音乐插件 APlayer

官网：中文github：链接基本用法引入<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MoePlayer/APlayer/dist/APlayer.min.css"> <script src="https://cdn.jsdelivr.net/gh/MoePlayer/APlayer/dist/APlayer.min.js"></script>容器<div id="aplayer"><...

4191 0 0

APlayer

前端可视化图表库

木灵鱼儿 5年前 JavaScript

前端可视化图表库

百度的ECharts官网：ECharts这是我看到百度唯一一个良心的东西了，很强大，主题定制也有，插件也可以自己定制。蚂蚁金服的ant-v官网

3466 0 0

前端可视化图表库 ECharts ant-v

木灵鱼儿

yarn 安装node-sass报错的解决办法

typecho 完美自定义分页

typecho 自定义文章分类

帮群友写了个落地页

typecho 获取指定独立页链接

Typecho 自定义评论模板

uni 上传文件

uni 非H5微信小程序多端登录

uni 微信登录

uni h5端+小程序实现多端下载

uni h5端使用video.js

muse-ui cli4 开启水波纹

.sync 的用法

keep-alive 滚动条位置不还原的问题

keep-alive 缓存指定路由

小鱼儿壁纸 H5 App制作成功

babel es6转es5

锤子的字体样式

常用的特效库

3d 视差特效

jQ jquery-i18n-properties 多语言切换国际化

fancybox 视频弹窗

视频插件 Dplayer

音乐插件 APlayer

前端可视化图表库

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

yarn 安装node-sass报错的解决办法

typecho 完美自定义分页

typecho 自定义文章分类

帮群友写了个落地页

typecho 获取指定独立页链接

Typecho 自定义评论模板

uni 上传文件

uni 非H5微信小程序多端登录

uni 微信登录

uni h5端+小程序 实现多端下载

uni h5端使用video.js

muse-ui cli4 开启水波纹

.sync 的用法

keep-alive 滚动条位置不还原的问题

keep-alive 缓存指定路由

小鱼儿壁纸 H5 App制作成功

babel es6转es5

锤子的字体样式

常用的特效库

3d 视差特效

jQ jquery-i18n-properties 多语言切换 国际化

fancybox 视频弹窗

视频插件 Dplayer

音乐插件 APlayer

前端可视化图表库

最近评论

博客文章RSS订阅

博客评论RSS订阅

uni h5端+小程序实现多端下载

jQ jquery-i18n-properties 多语言切换国际化