Hexo+Butterfly主题美化
注意:请将文章中涉及到 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。
更新记录
2022-05-22 valine获取评论失败
请将文章中涉及到 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。之后抽空会更新从零搭建Hexo的教程,敬请期待。更新valine表情包数据(不想更新的话,请将valine.json中的 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。
2021-11-27 valine获取评论失败
新增valine获取评论失败说明。
2021-11-22 持续优化
新增禁止右键及F12等事件说明。新增部分动效说明。新增部分页面插入视频。
2021-09-17 介入外挂标签
教程篇幅过长,对读者阅读不是很友好,所以在形式上进行了整改,希望效果能比之前好。有什么建议,也可以提出来,谢谢!
2021-08-26 持续优化
新增首页分类磁铁。新增侧边栏电子时钟。更换字体。 ...
Hanging lanterns
前言之前有小伙伴留言问我博客悬挂灯笼如何实现的? 那现在写一篇简单的教程。
悬挂灯笼效果还是先看效果,如果没有达到您的审美高度,建议不要使用。
PCMobile
步骤
新建CSS样式在 themes\Butterfly\source\css 文件下新建 CSS 文件,并命名为 lantern.css( 当然名字随便取,只要在主题配置文件中引入对应的CSS文件即可 ),将以下代码复制到新建的lantern.css中。/* 灯笼 Start */* { box-sizing: border-box;}/* 移动端显示/隐藏 /none/block,可自定义显示一个 */@media screen and (max-width: 970px) { .d-box1 { display: none; } .dengl .d-box { right: 0px; top: -40px; /* 自定义灯笼大小 */ transform: scale(0.4); }}. ...
基于Butterfly的外挂标签引入
本文摘自:Akilarの外挂标签引入
更新记录
2021-04-27 butterfly3.4.0 -> 3.7.1
更新v3.7.1适配方案注意一点的是,butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache} 改为 { cache:true }。
点开查看外挂标签配置教程
下载资源文件 下载Tag_Plugins_v1.5.zip 将下载的Tag_Plugins.zip解压得到butterfly文件夹。将butterfly文件夹复制到[Blogroot]\node_modules\hexo-theme-butterfly目录下,覆盖当前的butterfly主题文件夹,提示重复则选择替换。(如果担心覆盖自己的其他魔改内容,可以根据静态文件内容自主比对修改)修改[Blogroot]\_config.butterfly.yml的inject配置项,添加CDN依赖项。由于issues写入timeline和site-car ...
Vue后台管理系统模板推荐
更新记录
2021-06-18
新增几款后台管理系统模板。注意一点的是,在原基础上直接加在后面(未按starts数排序)。
2021-03-06
推荐一些 Vue 常用后台管理系统模板。
前言Vue.js 是一个目前比较流行的前端框架,已经到了前端人人都会的地步,今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-Vue,另外还有Vuetify、Buefy (Bulma css)、Vue Material 等等。基于这些组件库封装的后台管理模板,推荐一些常用 VUE后台模板 给大家。按照 Github 星标数量来依次介绍。
vue-element-admin (68.6k)Vue-Element-Admin(github上的标星数为63.3k)是一个后台前端解决方案,它基于 Vue 和 Element-UI 实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快 ...
一种自动化生成骨架屏的方案
今天分享的主题是:「一种自动化生成骨架屏的方案」, 先看下市场上常见的骨架屏优化效果。
某宝 PC端
某东 PC端
某推 APP
某博 APP
今天的分享主要分为三个部分:
首屏加载状态演进
如何构建骨架屏
将骨架屏打包的项目中
首屏加载的演进我们先来看一些权威机构所做的研究报告。
一份是 Akamai 的研究报告,当时总共采访了大约 1048 名网上购物者,得出了这样的结论:
大约有 47% 的用户期望他们的页面在两秒之内加载完成。
如果页面加载时间超过 3s,大约有 40% 的用户选择离开或关闭页面。
这是 TagMan 和眼镜零售商 Glasses Direct 合作进行的测试,研究页面加载速度和最终转化率的关系:
在这份测试报告中,发现了网页加载速度和转化率呈现明显的负相关性,在页面加载时间为1~2 秒时的转化率是最高的,而当加载时间继续增长,转化率开始呈现一个下降的趋势,大约页面加载时间每增加 1s 转化率下降6.7个百分点。
另外一份研究报告是 MIT 神经科学家在 2014 年做的研究,人类可以在 13ms 内感知到离散图片的存在,并将图片的大概 ...
uni-app中websocket的使用 断开重连、心跳机制
前言最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连。查阅资料后发现了一个心跳机制,也就是客户端间隔一段时间就向服务器发送一条消息,如果服务器收到消息就回复一条信息过来,如果一定时间内没有回复,则表示已经与服务器断开连接了,这个时候就需要进行重连。
被动断开则进行重连,主动断开的不重连。
说明:下图针对两个Tab项(Open Trades 和 Closed Trades),只希望在 tabIndex = 0 (Open Trades 高亮时)触发webSocket , 如果点击第二个栏目 , tabIndex = 1(Closed Trades高亮时)则主动关闭webSodket连接。
TabIndex = 0 时 ,被动断开则自动重连。
效果
webScoket连接并接收推送的消息
将接收的消息转换成目标数据,并渲染
如果主动关闭,则不进行重连,监听关闭事件
显示已关闭,不重连
监听错误事件,比如地址,协议错误等,则会自动重连五次,五次重连仍失败后则需要进行手动重连 ...
推荐一些面向 Web 开发者的杀手级网站
这里有一些值得分享的网站,快快添加到你的收藏夹吧。
Random Image via API网址:https://source.unsplash.com/
世界上最强大的照片引擎。Unsplash API 是一种现代 JSON API,它显示了为用户构建任何体验所需的所有信息
Embeddable Widget Apps for Notion网址:http://apption.co/
这个网站上面有很多小工具,你可以将它们直接添加到自己的网站上,或者自定义更改后嵌入到网站上,非常简单方便
Carbon这个网站可以把你的代码转成一张精美海报,我一直在用,非常不错,carbon 具有以下功能特性:
从GitHub的要点导入:只需将一个 GitHub gist id 追加到url
定制:自定义图片的语法主题,窗口样式等等
快速分享:点击一下即可保存您的图片或者点击链接
网址:http://carbon.now.sh
Peppertype利用AI可以在几秒钟内生成内容,扩写你的博客内容,假如你平常不写博客,这个网站用处应该不大。
网址:https://www.peppert ...
记录关于Vue+element-ui的系列问题
这里将记录自己工作或学习中关于Vue+element-ui的系列问题,如果您有有更好的解决方法可以在下面进行评论喔~
DatePicker快捷选项/* * @name: range-pick-opt.js 日期选择器快捷选项 * @Author: tzy1997 * @Date: 2020-11-18 17:30:20 * @LastEditors: tzy1997 * @LastEditTime: 2021-11-22 15:16:14 */import i18n from '@/lang' // 如果不需要 中英文则注释掉//时间选择const rangePickerOptions = { shortcuts: [{ // text: "今天", text: i18n.t('shortcuts.t1'), onClick(picker) { const end = new Date(); const start = new Date(); ...
CSS 实现新拟态(Neumorphism) UI 风格
新拟态是一种图形样式,其原理是为界面的UI元素赋予真实感。
原生名词有几个叫法,Neumorphism / soft ui,翻译过来是新拟态或者是软ui。国内的翻译叫,新拟物风格。Neumorphism,是New +Skeuomorphism的组合词。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」
新拟态 UI 风格与扁平、投影风格的对比
从上面这张对比图可以看出,扁平风格就像是一张纸贴在墙面上,投影风格像是浮在半空中,而新拟态风格则像是墙面上直接凸起了一块。要实现这种风格,精髓在于一个白色的阴影+一个常规阴影。一个示例如下图所示:
Neumorphism css 在线生成器地址:https://neumorphism.io
前端实现的效果:
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta chars ...
关于JavaScript常用的工具函数汇总
前言随着开发经验的积累,很多人会有自己的常用站点,一些网址收藏,自己造的轮子或者别人的轮子,工具函数库等等。这里提供一些常用的工具函数,如果你也有一些觉得挺不错的库,欢迎在下方评论💓。
格式化时间戳export function formatDateTimeStamp(date, fmt) { // 格式化时间戳 : formatDateTimeStamp(new Date(time),'yyyy-MM-dd hh:mm:ss') if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': d ...