切换夜间暗黑模式后主题显示星空特效，并且还有流星
最近很多小伙伴留言想要星空和流星特效，于是写了这篇文章准备介绍如何部署。
创建js文件
插入Canvas标签
首先打开Butterfly主题的_config.yml文件或者使用HTML直接插入，找到配置文件对应的inject部分
插入<canvas id="universe"></canvas>
创建JS文件
在butterfly/source/js/创建一个universe.js文件，或者添加到自己的js文件中
function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("uni ...
MAC黑色：
#article-container figure.highlight,#article-container pre{color:#f8f8f2;background:#696969}#article-container figure.highlight .highlight-tools{background:#3f3f3f;color:#fff}#article-container figure.highlight .gutter pre{color:#d3d3d3;background:grey}#article-container figure.highlight figcaption a{color:#a9a9a9!important}
MAC白色：
#article-container figure.highlight,#article-container pre{color:#a9a9a9;background:#f3f3f3}#article-c ...
hexo butterfly 养鱼来了
js
没有请创建 blog/source/js/fishes.js 写入
fish();function fish() { return ( $("footer").append( '<div class="container" id="jsi-flying-fish-container"></div>' ), $(".container").css({ width: "100%", height: "160px", margin: 0, padding: 0, }), $("#footer-wrap").css({ position: "absolute", "text-align&q ...
1. cdn 缓存
jsDelivr 提供的全球 CDN
加速，CDN的分流作用不仅减少了用户的访问延时，也减少的源站的负载。因为
jsDelivr 是开源的免费
cdn，所以我个人一直在使用他，当然，你可以使用腾讯云，每个月 10G
基本上也足够用了，老用户甚至还要 50G 每月的流量，也着实很香。
缺点：
当网站更新时，如果CDN节点上数据没有及时更新，即便用户在浏览器使用
Ctrl +F5（win）或者
command+shift+R（mac）的强制刷新方式使浏览器端的缓存失效，也会因为CDN边缘节点没有同步最新数据而导致用户端未能及时更新。
2. jsdelivr的cdn使用规则
其实如何使用 jsdelivr，在官网上面就有介绍了，不过还是简单介绍下我经常使用的
github
https://cdn.jsdelivr.net/gh/user/repo@version/file
具体实例：
master 仓库的 https://github.com/ZhaoUncle/images
#github 原图https://github.com/Z ...
美化魔改避免不了的就是css框架美化教程
这是一篇纯css引入美化教程
代码来源
HEO老大哥自用css
代码来源https://blog.zhheo.com/
代码依赖色彩库
所有代码均可新建css后引入
引入位置
inject: head: - <link rel="stylesheet" href="/css/新建名称.css">
洪哥色彩库
以下css可能会依赖色彩库
如果出错请添加以下代码到css文件内
@charset "UTF-8";:root { --heo-white: #fff; --heo-white-op: rgba(255, 255, 255, 0.2); --heo-black: #000; --heo-black-op: rgba(0, 0, 0, 0.2); --heo-none: #00000000; --heo-gray: #999999; --heo-gray-op ...
美化魔改避免不了的就是css框架美化教程
这是一篇纯css引入美化教程
代码来源
HEO老大哥自用css
代码来源https://blog.zhheo.com/
代码依赖色彩库
所有代码均可新建css后引入
引入位置
inject: head: - <link rel="stylesheet" href="/css/新建名称.css">
搜索框背景虚化模糊
/* 搜索背景模糊 */ #search-mask { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: var(--heo-maskbg); }
消息弹窗美化
顶部消息弹窗美化教程
如果需要提示复制请移步复制提示
/* 消息弹窗 */.snackbar-container { background: var(--heo-main) !imp ...
hexo辅助工具快速命令
注意：本命令为桌面blog文件夹如许设置其他文件夹自行修改代码
新建页面
%userprofile%\Desktop\·%userprofile%\为当前用户名自己设置自己的路径
@echo offset /p cili=输入页面名称、右键粘贴:cd %userprofile%\Desktop\blog && hexo new page %cili%pause
新建文章
@echo offset /p cili=输入文章名称、右键粘贴:cd %userprofile%\Desktop\blog && hexo new %cili%pause
控制台
@echo off&setlocal enabledelayedexpansiontitle hexo安装 怕冷爱上雪 blog.4t.pwmode con cols=45 lines=22color 2FPUSHD %~DP0 & cd /d "%~dp0"%1 %2mshta vbscript:createo ...
摘要
给你的友情链接页面添加一个快速填写链接格式的按钮
预览效果
[{"url":"https://s2.loli.net/2022/11/16/cAd9E1BFrXzMf6V.webp","alt":""}]
加载更多
这篇文章是给友情链接页面添加一个按钮
给hexo
butterfly主题友联页面添加一个快速格式按钮，来有效的添加友情链接。
创建js文件
创建/blog/themes/butterfly/source /source/js/kslink.js
写入下面代码
var leonus = { linkCom: e => { var t = document.querySelector(".el-textarea__inner"); "bf" == e ? (t.value = "```yml\n", t.value += "- name: ...
butterfly主题让你的标题闪闪发光，与众不同
预览效果
[{"url":"https://s2.loli.net/2022/11/11/SpmrvLofkXWDu42.webp","alt":""}]
加载更多
css
创建/blog/themes/butterfly/source /source/css/title.css
写入下面代码
/* 网站标题、副标题闪光 */#page-header #site-title,#page-header #site-subtitle { color: rgb(255, 255, 255); text-shadow: rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 20px, rgb(255, 0, 222) 0px 0px 30px, rgb(255, 0, 222) 0px 0px 40px, rgb(255, 0, 222) 0px 0px 70p ...
魔改教程定位文件自行修改
首页配置文件
1·配置目录
\source\ _data\
ggl.yml 公告栏支持html代码
link.yml 友情链接
notice.yml 首页动态文字
slider.yml 首页论图
valine.json valine表情包配置
widget.yml 侧边栏文件
sourec文件介绍
_data/ 数据文件 _posts/ 文章目录 about/ 关于页面 categories/ 分类
link/ 友情链接 messageboard/ 留言板 music/ 音乐 myself/ This is me
selfjs/ 选用js tags/ 标签 talking/ 自言自语 timeline/ 日志 tuku/ 图库
xiance/ 相册
scaffolds文件
scaffolds文件是创建文章页面的模板
hexo new 文章名称
hexo new page 页面名称
重点文章模板介绍post.md
---title: {{ title }}date: ...
