木灵鱼儿

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

Typecho 自定义评论模板

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

3w 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里面有一些功能模块的预览，看视频说是有一个裁剪图片的组件，找了半天没找到，有兴趣的可以去看看。

3044 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获取到的用户信...

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

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

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

3446 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布尔值。子...

3408 0 0

.sync

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

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

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

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

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

3566 0 0

小鱼儿壁纸 H5 App制作成功

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

小鱼儿壁纸 H5 App制作成功

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

3442 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":[] }保存完毕转...

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

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

6485 0 1

特效库前端特效

3d 视差特效

木灵鱼儿 5年前 JavaScript

3d 视差特效

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

3304 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对象调用。我们先讲一下大概过程再来说调用方法：首先我们要有语言文件，...

7288 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="...

4182 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"><...

4110 0 0

APlayer

前端可视化图表库

木灵鱼儿 5年前 JavaScript

前端可视化图表库

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

3397 0 0

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

谷歌 google验证码 reCAPTCHA V3 对接

木灵鱼儿 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...

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

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

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

5507 0 0

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

木灵鱼儿

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

前端可视化图表库

谷歌 google验证码 reCAPTCHA V3 对接

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

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

MUFlow V1.5 使用文档

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

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

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

前端可视化图表库

谷歌 google验证码 reCAPTCHA V3 对接

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

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

MUFlow V1.5 使用文档

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

最近评论

博客文章RSS订阅

博客评论RSS订阅

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

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

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

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