木灵鱼儿

木灵鱼儿 6年前 Bootstrap4

Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

入正后发现官方的这个版本主题是不保存配置了，相对于以前的版本，这次改了好多东西，很多之前的css错位，无奈只能慢慢找方法。本教程只适合购买正版的用户，因为app.js没有被压缩存储主题配置默认都是存储在本地存储的，key值为_HYPER_CONFIG_；所以只能自己去找对应的方法了，然后发现有一段代码：/** * Preserves the config */ LayoutThemeApp.prototype._saveConfig = function (newConfig) { $.extend(this._config, ne...

5345 0 0

Hyper 主题设置

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

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

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

vue使用better-scroll制作左右菜单联动better-scroll是一个纯js的插件，官方推荐配合vue这种纯前端开发使用，在vue中使用需要注意一些地方，比如初始化的时机，html的布局，事件的触发机制安装我现在都是用yarn 方便一些，未来的安装包管理器yarn add better-scrollyarn不写--save默认就是save，如果要--save-dev 如下写法yarn add better-scroll --dev安装完毕后可以在main.js文件中作为全局调用，也可以在对于的组件内调用，我是在组件中的，所以在组件的script元素中import<sc...

8997 2 1

better-scroll 左右菜单联动饿了么菜单

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

木灵鱼儿 6年前 CSS

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

当我们给元素做了flex后，flex内的子元素宽度自适应，但是当我们给子元素设置文本溢出的时候，发现时候无效的，原因是因为他们的宽度没有限制，也就是说原始的宽度无限制，那么这个原始宽度又怎么说呢？他有一个优先级：优先级：flex-basis > width > 内容宽度。我们可以通过设置max-width或者min-width来限制他的宽度，但是并不是很合适，因为这两个只是一个区间，而我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。我们给这个flex子元素设置width:0;即可，设置一个极小的宽度。

7059 3 0

flex 文本溢出

vue cli4 创建全局scss变量

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

vue cli4 创建全局scss变量

之前我的用法就是，哪个组件需要引入这个变量就import引入，现在感觉有点麻烦，就想能不能做一个全局的，所有组件都可以直接引入这个scss文件中的内容。首先我们需要安装一个插件：style-resources-loadervue add style-resources-loader回车后会有提示四个选项，我们scss就选择scss然后回车。安装完毕后在项目根目录创建一个vue的配置文件，有就不用创建，直接用。创建vue.config.js文件，将下面的代码丢进去，自己改下路径地址：const path = require("path"); module.exports...

5825 0 0

vue cli4 scss scss全局变量

yarn 安装vant并启动自动按需引入 core-js报错

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

yarn 安装vant并启动自动按需引入 core-js报错

官方新增了个自动按需引入，非常棒，前提是需要安装babel的一个插件babel-plugin-import，安装完后在babel.config.js文件中加上{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }然后就报错了，错误来源是router路由文...

7004 0 0

yarn vant 按需引入 core-js

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

木灵鱼儿 6年前 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了，再重新安...

6352 0 0

vue yarn node-sass

typecho 完美自定义分页

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

typecho 完美自定义分页

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

22.7w 0 196

typecho 分页自定义分页

typecho 自定义文章分类

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

typecho 自定义文章分类

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

2.5w 0 31

typecho 分类自定义

帮群友写了个落地页

木灵鱼儿 6年前 HTML

帮群友写了个落地页

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

3996 0 0

落地页

typecho 获取指定独立页链接

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

4840 0 0

typecho

Typecho 自定义评论模板

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

Typecho 自定义评论模板

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

3.5w 3 19

主题 typecho Typecho 自定义评论模板

uni 上传文件

木灵鱼儿 6年前 UNI-APP

uni 上传文件

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

3478 0 0

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

木灵鱼儿 6年前 UNI-APP

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

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

3766 0 0

uni 微信登录

木灵鱼儿 6年前 UNI-APP

uni 微信登录

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

4506 0 0

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

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

4987 0 0

多端下载

uni h5端使用video.js

木灵鱼儿 6年前 UNI-APP

uni h5端使用video.js

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

1.3w 0 5

video.js

muse-ui cli4 开启水波纹

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

3880 0 0

muse-ui 水波纹

.sync 的用法

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

.sync 的用法

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

3882 0 0

.sync

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

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

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

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

5913 0 0

keep-alive 滚动条

keep-alive 缓存指定路由

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

keep-alive 缓存指定路由

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

4095 0 0

小鱼儿壁纸 H5 App制作成功

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

小鱼儿壁纸 H5 App制作成功

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

3872 0 0

app 小鱼儿壁纸 H5 App

babel es6转es5

木灵鱼儿 6年前 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":[] }保存完毕转...

4449 0 0

锤子的字体样式

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

5312 0 0

字体样式锤子字体

常用的特效库

木灵鱼儿 6年前教程

常用的特效库

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

7225 0 1

特效库前端特效

3d 视差特效

木灵鱼儿 6年前 JavaScript

3d 视差特效

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

3671 0 0

木灵鱼儿

Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

vue cli4 创建全局scss变量

yarn 安装vant并启动自动按需引入 core-js报错

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 视差特效

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

flex自适应宽度由后text-overflow:ellipsis;失效 文本溢出失效

vue cli4 创建全局scss变量

yarn 安装vant并启动自动按需引入 core-js报错

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 视差特效

最近评论

博客文章RSS订阅

博客评论RSS订阅

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

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