摘要
莫改完就开源了开源主题，大家自己研究吧
安装前提
安装 Hexo 相当简单，只需要先安装下列应用程序即可：
Node.js (Node.js 版本需不低于
10.13，建议使用 Node.js 12.0 及以上版本)
Git
如果您的电脑中已经安装上述必备程序，那么恭喜您！你可以直接前往 安装
Hexo 步骤。
如果这两个软件都不会安装你就放弃吧
安装
开源地址：plasx520/blog-butterfly:
hexo静态博客butterfly魔改主题 (github.com)
默认在桌面上创建一个blog文件夹
按从1按倒5就安装完成了然后覆盖主题到桌面blog文件夹内
安装步骤1–4–5–覆盖–6–j–7–完成0预览
魔改教程
魔改教程
安装主题后出错
按6安装常用插件 按 j
安装必备插件
如果不用上面的代码工具就手动下面的代码
一键安装主题必备插件（和分开二选一）
npm install --save hexo-tag-aplayer && npm install ...
Docs文檔
未读📖 本教程更新於 2022 年 10 月 31
日，教程的內容針對最新穩定版而更新（如果你是舊版，教程會有些出入，請留意）
🦋 Butterfly 已經更新到 4.5.1
📚 文檔目錄
🚀
快速開始 -
📑
主題頁面 -
🛠
主題配置-1 -
⚔️
主題配置-2 -
❓
主題問答 -
⚡️
進階教程 -
✨
更新日誌 - 🤞
打賞
你可以通過右下角的 簡 按鈕切換為簡體顯示
hexo-theme-butterfly是基於 hexo-theme-melody
的基礎上進行開發的。
安裝
Git安裝 (Github)Git安裝 (Gitee)npm安裝穩定版【建議】
在你的 Hexo 根目錄裏
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
測試版
測試版可能存在 bug，追求穩定的請安裝穩定版
如果想要安裝比較新的 dev 分支，可以
git c ...
最新
这是一篇基础教程，简单的搭建hexo博客
前言
hexo也算是老牌博客框架了，以前对于hexo的了解也仅仅停留在知道他是一个能够快速将本地的markdown文件生成静态网站的框架。
最早的个人博客网站还是自己动手，从0-1的一个spa，并做了大量seo，设备适配，性能优化，配套开发的服务也包括后台管理系统，node服务以及sql数据库，当然个人还兼备产品设计，UI设计等工作。
入坑尝试hexo是由于看到hexo：
主题丰富，且多端适配良好。
seo优化，网页性能👍🏻。
方便管理，迁移。
安装
准备好基本环境：
git
node
直接全局安装hexo-cli
npm install -g hexo-cli
运行检查是否安装完成
hexo version
cmd快速辅助工具
...
外置标签
效果
此作品博主暂未作出评价
查看详情
诡秘之主
注意填写内容时不要有英文符号，不然会出bug
参数
描述
默认值
标题
作品的名字
未知
链接
作品的详情页，填写后会显示查看详情按钮
无
背景
背景
图片Url（必须是图片，想要实现颜色可自行更改代码）
纯色#333
评分
范围
0-5，可以是小数，如3.5和3.1表示三星半，图标只有半星的）
0
评价
点评内容
此作品博主暂未作出评价
图标
左上角图标，请填写fontawsome图标
无
标签
右上角标签
无
宽度
卡片宽度，需要填单位，如：100px 或 10rem
220px
高度
卡片高度，要求同上
300px
// 使用js是为了高亮代码，不必在意// 参数如下：{% card ...
给全站添加复制提示弹窗，进站提示弹窗
欢迎弹窗提示页面
新建hygl.js
if (GLOBAL_CONFIG.Snackbar) { btf.snackbarShow('欢迎光临')}
引入时注意不要添加pjax字样不然会进一个页面显示一次，未开启pjax的小伙伴不建议添加
引入格式
bottom: # # 欢迎光临 - <script src="/js/hygl.js"></script>
复制提示
新建fuzhi.js
/** 监听copy事件 */document.addEventListener("copy",function(e){ //复制的内容 btf.snackbarShow('复制成功，请遵循GPL协议', false, 3000)})
引入格式 注意：添加 data-pjax=""
负责可能会失效
bottom: # # 复制 ...
学习笔记
未读
1b693c4938223286468132b2f7068bf6098157620d78df6a8d32bb51e3f325b181ab70623eeb2a3f7a6bc681afafbdfe713bdd1c6f193890fe2449d416193fec46af80b0cd7431187dd1f97bc499b3a97063d6cd884e2c809e34e520f4b5e97f4eb7f79689595cc57d7c7994692d164d31c2a7570a462152b99123bf54a17b29f4b18fac8f4f9c7299d34a26d9dbf46b17396c1043009096a09107500989ab74afae2debfa632d68a4b6c099d04ae7847db3d535b7f12c6d1f936c3521ebdac2c968a84182a998ebd903c0397c0ecb0cc30097b381f517f6a733a6e702f8cd26dfe7067073fe559282103ca35c6f540dd04c17df041cab414 ...
hexo插件
未读
插件
功能
文档链接
hexo-generator-index-pin-top
文章置顶
https://github.com/netcan/hexo-generator-index-pin-top
hexo-wordcount
文章字数统计和阅读时长统计
https://github.com/willin/hexo-wordcount
hexo-abbrlink
生成URL短链接
https://github.com/rozbo/hexo-abbrlink
hexo-lazyload-image
图片懒加载
https://github.com/Troy-Yang/hexo-lazyload-image
hexo-generator-baidu-sitemap
生成baidusitemap.xml
https://github.com/coneycode/hexo-generator-baidu-sitemap
hexo-generator-sitemap
生成sitemap.x ...
hexo插件
未读
hexo-pdf插件一键搞定，页面展示PDF
安装hexo-pdf
npm install --save hexo-pdf
使用
使用本地资源，可以在markdown文件路径下创建一个同名文件夹，其内放pdf文件
例如：
在需要的文章添加如下语句：
{% pdf mydocument.pdf %}
使用外部资源同理，
{% pdf https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/pdf/小作文讲义.pdf %}
单调的鼠标增加一点乐趣让小球跟着鼠标走
鼠标小点追拖影追踪
新建文件
[BlogRoot]\source\js\cursor.js，在里面写上如下代码：
var CURSOR;Math.lerp = (a, b, n) => (1 - n) * a + n * b;const getStyle = (el, attr) => { try { return window.getComputedStyle ? window.getComputedStyle(el)[attr] : el.currentStyle[attr]; } catch (e) {} return "";};class Cursor { constructor() { this.pos = {curr: null, prev: null}; this.pt ...
首页的大标题和小标题还有logo显示霓虹灯闪烁
黑夜霓虹灯
此教程会有两处地方有霓虹灯效果：一个是大标题和个人信息的动态霓虹灯，默认周期为
1200ms；另外的是菜单栏的小字有夜光效果，为你的博客增添几分赛博朋克风～
1. 首先在自定义的样式文件
[BlogRoot]\source\css\custom.css
中引入以下代码，这部分代码是菜单栏文字有夜光效果的，变量部分
var(--theme-color) 可以换为自己喜欢的颜色，例如紫色
rgb(179, 71, 241)：
/* 夜间模式菜单栏发光字 */[data-theme="dark"] #nav .site-page,[data-theme="dark"] #nav .menus_items .menus_item .menus_item_child li a { text-shadow: 0 0 2px var(--theme-color) !important;}/* 手机端适配 */[data-theme="dark& ...
