博客魔改教程总结(一)
Live2D教程（店长）
点击查看教程
目前只推荐这个(因为消耗资源较少)，这是博客自带的看板娘，这孩子不会说话也不能换装，只会跟着你的鼠标晃动脑袋，不过有几款超可爱。
安装
在Hexo根目录
[Blogroot]下打开终端，输入以下指令安装必要插件：npm install --save hexo-helper-live2d
打开站点配置文件
[Blogroot]\config.yml
搜索live2d,按照如下注释内容指示进行操作。
如果没有搜到live2d的配置项，就直接把以下内容复制到最底部。# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true #开关插件版看板娘
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-wanko # npm-module package name
# use: wanko # 博客根目录/live2d_models/ 下的目录名
# use: ./wives/wanko # 相对于博客根目录的路径
# use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
display:
position: right #控制看板娘位置
width: 150 #控制看板娘大小
height: 300 #控制看板娘大小
mobile:
show: true # 手机中是否展示完成后保存修改，在Hexo根目录下运行指令。
hexo clean
hexo g
hexo s之所以必须要使用
hexo clean是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。
更换
同样是在Hexo根目录
[Blogroot]下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是live2d-widget-model-koharu，一个Q版小正太。其他的模型也可以在模型预览里查看以供选择。输入指令
npm install --save live2d-widget-model-koharu
然后在站点配置文件
[Blogroot]\_config.yml里找到model项修改为期望的模型model:
use: live2d-widget-model-koharu
# 默认为live2d-widget-model-wanko之后按部就班的运行
hexo clean
hexo g
hexo s就能在
localhost:4000上查看效果了。
卸载看板娘
卸载插件和卸载模型的指令都是通过npm进行操作的。在博客根目录[Blogroot]打开终端，输入：
npm uninstall hexo-helper-live2d #卸载看板娘插件 |
卸载后为了保证配置项不出错，记得把[Blogroot]\_config.yml里的配置项给注释或者删除掉。
violet留言板（店长）
点击查看教程
详见：信笺样式留言板
在
[BlogRoot]运行指令npm install hexo-butterfly-envelope --save
在站点配置文件
_config.yml或主题配置文件_config.butterfly.yml添加以下配置项# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
enable: true #控制开关
custom_pic:
cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
message: #信笺正文，多行文本，写法如下
- 有什么想问的？
- 有什么想说的？
- 有什么想吐槽的？
- 哪怕是有什么想吃的，都可以告诉我哦~
bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
height: #1050px，信封划出的高度
path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
front_matter: #【可选】comments页面的 front_matter 配置
title: 留言板
comments: true
一图流教程
点击查看教程
在
[BlogRoot]\source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：/* 页脚与头图透明 */
#footer {
background: transparent ;
}
#page-header {
background: transparent ;
}
/* 白天模式遮罩透明 */
#footer::before {
background: transparent ;
}
#page-header::before {
background: transparent ;
}
/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
background: transparent ;
}
[data-theme="dark"] #page-header::before {
background: transparent ;
}在主题配置文件
[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）inject:
head:
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">在主题配置文件
[BlogRoot]\_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载# The banner image of home page
index_img:
# Footer Background
footer_bg: false
页脚Github徽标（店长）
点击查看教程
安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：npm install hexo-butterfly-footer-beautify --save
添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加（这是我的配置）# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
enable:
timer: true # 计时器开关
bdage: true # 徽标开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
exclude: #屏蔽页面
# - /posts/
# - /about/
layout: # 挂载容器类型
type: id
name: footer-wrap
index: 0
# 计时器部分配置项（看你喜欢哪个，最好下载下来放到自己的项目中不然会增加我网站的负载）
# 这是我的
# runtime_js: https://www.fomal.cc/static/js/runtime.js
# runtime_css: https://www.fomal.cc/static/css/runtime.min.css
# 这是店长的
runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
# 徽标部分配置项
swiperpara: 0 #若非0，则开启轮播功能，每行徽标个数
bdageitem:
- link: https://hexo.io/ #徽标指向网站链接
shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
message: 博客框架为Hexo_v6.2.0 #徽标提示语
- link: https://butterfly.js.org/
shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
message: 主题版本Butterfly_v4.3.1
- link: https://vercel.com/
shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
message: 本站采用多线部署，主线路托管于Vercel
- link: https://dashboard.4everland.org/
# https://img.shields.io/badge/Hosted-4EVERLAND-3FE2C1?style=flat&logo=IPFS
shields: https://img.shields.io/badge/Hosted-4EVERLAND-22DDDD?style=flat&logo=IPFS
message: 本站采用多线部署，备用线路托管于4EVERLAND
- link: https://github.com/
shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
message: 本站项目由Github托管
- link: http://creativecommons.org/licenses/by-nc-sa/4.0/
shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| enable.timer | true/false | 【必选】计时器控制开关 |
| enable.bdage | true/false | 【必选】徽标控制开关 |
| enable_page | path | 【可选】填写想要应用的页面,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填all，默认为all |
| exclude | path | 【可选】填写想要屏蔽的页面，可以多个。仅当enable_page为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。 |
| layout.type | id/class | 【可选】挂载容器类型，填写id或class，不填则默认为id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位 |
| runtime_js | url | 【必选】页脚计时器脚本，可以下载上文填写示例的链接，参照注释和教程：Native JS Timer自行修改。 |
| runtime_css | url | 【可选】自定义样式，预留开发者接口，可自行下载。 |
| swiperpara | number | 【可选】若非零，则开启轮播功能，此项表示每行最多容纳徽标个数，用来应对徽标过多显得页脚拥挤的问题 |
| bdageitem.link | url | 【可选】页脚徽标指向的网站链接 |
| bdageitem.shields | url | 【必选】页脚徽标对应的API，API具体写法示例参照教程Add Github Badge |
| bdageitem.message | text | 【可选】页脚徽标悬停时显示的信息 |
| swiper_css | url | 【可选】swiper的依赖 |
| swiper_js | url | 【可选】swiper的依赖 |
| swiperbdage_init_js | url | 【可选】swiper初始化方法 |
首页分类磁贴新版(店长)
点击查看教程
安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：npm install hexo-butterfly-categories-card --save
添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加以下代码，注意要根据他的默认描述排序改为你自己对应的分类名字：# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
column: odd # odd：3列 | even：4列
row: 1 #显示行数，默认两行，超过行数切换为滚动显示
message:
- descr: Ubuntu指南
cover: https://assets.akilar.top/image/cover1.webp
- descr: 玩转Win10
cover: https://assets.akilar.top/image/cover2.webp
- descr: 长篇小说连载
cover: https://assets.akilar.top/image/cover3.webp
- descr: 个人日记
cover: https://assets.akilar.top/image/cover4.webp
- descr: 诗词歌赋
cover: https://assets.akilar.top/image/cover5.webp
- descr: 杂谈教程
cover: https://assets.akilar.top/image/cover6.webp
custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| enable | true/false | 【必选】控制开关 |
| enable_page | path/all | 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘ |
| layout.type | id/class | 【可选】挂载容器类型，填写id或class，不填则默认为id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位 |
| column | odd/even | 【可选】显示列数，考虑到比例问题，只提供3列和4列，odd为3列， even为4列 |
| row | number | 【可选】显示行数，默认两行，超过行数切换为滚动显示 |
| message.descr | text | 分类描述,需要和你自己的文章分类一一对应。 |
| message.cover | url | 分类背景,需要和你自己的文章分类一一对应。 |
| custom_css | url | 【可选】自定义样式，会替换默认的css链接，可以下载文档给出的cdn链接后自主修改 |
首页分类磁贴1.0（小冰）
点击查看教程
这个插件主要实现了以下功能：
- 自定义 tags 或 categories 的排列和展示
- 自定义 tags 或 categories 的展示图标，名称
- 自定义排列的行数，默认 2 行
教程：
在博客根目录
[Blogroot]下打开终端，运行以下指令：npm i hexo-magnet --save
注意，一定要加
--save，不然本地预览的时候可能不会显示！！！在网站配置文件
_config.yml新增以下项 (注意不是主题配置文件)，这里的分类名字必须和你文章的分类名字一一对应：magnet:
enable: true
priority: 1
enable_page: /
type: categories
devide: 2
display:
- name: 教程
display_name: 小冰の魔改教程
icon: 📚
- name: 游戏评测
display_name: 小冰の游戏评测
icon: 🎮
- name: 生活趣闻
display_name: 小冰の生活趣闻
icon: 🐱👓
- name: vue
display_name: 小冰の编程学习
icon: 👩💻
- name: 学习
display_name: 小冰の读书笔记
icon: 📒
- name: 随想
display_name: 小冰の胡思乱想
icon: 💡
color_setting:
text_color: black
text_hover_color: white
background_color: "#f2f2f2"
background_hover_color: "#b30070"
layout:
type: id
name: recent-posts
index: 0
temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
plus_style: ""配置项的含义：
enable
参数：true/false
含义：是否开启插件enable_page
参数：/
含义：路由地址，如 / 代表主页。/me/ 代表自我介绍页等等priority
参数：1
含义：插件的叠放顺序，数字越大，叠放约靠前。type
参数：categories/tags
含义：选择筛选分类还是标签devide
参数：2
含义：表示分隔的列数，2 表示分为两列展示display
参数：
- name: 教程 # 这里是tags或者categories的名称
display_name: 小冰の魔改教程 # 这里是替换的名称
icon: 📚 # 这里是展示的图标含义：配置项，可自行设置，按照设置的顺序展示
color_setting
参数：
text_color: black # 文字默认颜色
text_hover_color: white # 文字鼠标悬浮颜色
background_color: "#f2f2f2" # 文字背景默认颜色
background_hover_color: "#b30070" # 文字背景悬浮颜色含义：颜色配置项，可自行设置
layout
参数：type; （class&id）
参数：name;
参数：index；（数字）
含义：如果说 magnet 是一幅画，那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。
最后墙的名字即是 name;<div name="我是墙" id="recent-posts">
<!-- id=>type recent-posts=>name -->
<div name="我是画框">
<div name="我是纸">
<!--这里通过js挂载magnet，也就是画画-->
</div>
</div>
</div>temple_html
参数：html 模板字段
含义：包含挂载容器<div class="recent-post-item" style="width:100%;height: auto"> <!--文章容器-->
<div id="catalog_magnet"> <!--挂载容器-->
${temple_html_item}
</div>
</div>plus_style
参数：“”
含义：提供可自定义的 style，如加入黑夜模式。
执行 hexo 三连
hexo clean
hexo g
hexo s我们可以看到黑夜模式看起来特别的别扭，因此还要做一下黑夜模式的颜色适配，在
custom.css文件中添加以下代码适配黑夜模式(具体颜色可以自己调节)：/* 小冰分类分类磁铁黑夜模式适配 */
/* 一般状态 */
[data-theme="dark"] .magnet_link_context {
background: #1e1e1e;
color: antiquewhite;
}
/* 鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
background: #3ecdf1;
color: #f2f2f2;
}
文章置顶滚动栏(店长)
点击查看教程
详见：Swiper Bar
安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：npm install hexo-butterfly-swiper --save
添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
timemode: date #date/updated
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
default_descr: 再怎么看我也不知道怎么描述它的啦！
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| enable | true/false | 【必选】控制开关 |
| enable_page | path/all | 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all |
| timemode | date/updated | 【可选】时间显示，date为显示创建日期，updated为显示更新日期,默认为date |
| layout.type | id/class | 【可选】挂载容器类型，填写id或class，不填则默认为id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位 |
| default_descr | text | 默认文章描述 |
| swiper_css | url | 【可选】自定义的swiper依赖项css链接 |
| swiper_js | url | 【可选】自定义的swiper依赖项加js链接 |
| custom_css | url | 【可选】适配主题样式补丁 |
| custom_js | url | 【可选】swiper初始化方法 |
使用方法:在文章的front_matter中添加swiper_index配置项即可。
--- |
自定义字体
点击查看教程
声明：非商免字体未经授权仅限个人使用，不得用于商业用途！
准备好字体文件后，在
[BlogRoot]\source\css\custom.css（没有就自己创建）中添加以下代码：@font-face {
/* 为载入的字体取名字(随意) */
font-family: 'YSHST';
/* 字体文件地址(相对或者绝对路径都可以) */
src: url(/font/优设好身体.woff2);
/* 定义加粗样式(加粗多少) */
font-weight: normal;
/* 定义字体样式(斜体/非斜体) */
font-style: normal;
/* 定义显示样式 */
font-display: block;
}各个属性的定义：
- font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。
- src属性值中首先指定了字体文件所在的路径。
- format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
- font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
- 支持格式：*.eot(老版本IE)，*.otf，*.ttf，*.woff，*.woff2(推荐)
在主题配置文件
_config.butterfly.yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
global-font-size: '15px'
code-font-size: '14px'
font-family: YSHST, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
code-font-family: Consolas, YSHST, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link:
font-family: YSHST, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif重启项目即可看到
hexo cl; hexo s
文章双侧栏显示(小冰)
点击查看教程
在博客根目录
[Blogroot]下打开终端，运行以下指令：npm i hexo-butterfly-article-double-row --save
在网站配置文件
_config.yml新增以下项 (注意不是主题配置文件)：butterfly_article_double_row:
enable: true这时候插件有个bug，就是最后一页文章数目为奇数的时候，会出现这种情况
会显得很不舒服，感谢唐志远大佬修复了这个bug，只需要在
custom.css文件添加以下代码即可：/* 翻页按钮居中 */
#pagination {
width: 100%;
margin: auto;
}执行 hexo 三连：
hexo clean
hexo g
hexo s
wowjs动画
点击查看教程
效果预览：
安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：npm install hexo-butterfly-wowjs --save
添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加wowjs:
enable: true #控制动画开关。true是打开，false是关闭
priority: 10 #过滤器优先级
mobile: false #移动端是否启用，默认移动端禁用
animateitem:
- class: recent-post-item #必填项，需要添加动画的元素的class
style: animate__zoomIn #必填项，需要添加的动画
duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
offset: 100 #选填项，开始动画的距离（相对浏览器底部）
iteration: 2 #选填项，动画重复的次数
- class: card-widget
style: animate__zoomIn
animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| enable | true/false | 【必选】控制开关 |
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| mobile | true/false | 控制移动端是否启用，默认移动端禁用 |
| animateitem.class | class | 【可选】添加动画类名，只支持给class添加 |
| animateitem.style | text | 【可选】动画样式，具体类型参考animate.css |
| animateitem.duration | time,单位为s或ms | 【可选】动画持续时间，单位可以是ms也可以是s。例如3s，700ms。 |
| animateitem.delay | time,单位为s或ms | 【可选】动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。 |
| animateitem.offset | number,单位为px | 【可选】开始动画的距离（相对浏览器底部）。 |
| animateitem.iteration | number,单位为s或ms | 【可选】动画重复的次数 |
| animate_css | URL | 【可选】animate.css的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css |
| wow_js | URL | 【可选】wow.min.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js |
| wow_init_js | URL | 【可选】wow_init.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js |
wowjs详细用法见原帖。
GitCalendar(店长)
点击查看教程
详见：Gitcalendar
安装
安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：npm install hexo-filter-gitcalendar --save
添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件如_config.butterfly.yml中添加# hexo-filter-gitcalendar
gitcalendar:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
# butterfly挂载容器
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
user: Fomalhaut-Blog #git用户名
apiurl: 'https://gitcalendar.fomal.cc' # 这是我的API，最好自己弄一个
minheight:
pc: 280px #桌面端最小高度
mibile: 0px #移动端最小高度
color: "['#d9e0df', '#c6e0dc', '#a8dcd4', '#9adcd2', '#89ded1', '#77e0d0', '#5fdecb', '#47dcc6', '#39dcc3', '#1fdabe', '#00dab9']" # 目前我在用的
# "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
# color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
# color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
# color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调
container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器，需要使用pug语法
gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| enable | true/false | 【必选】控制开关 |
| enable_page | path/all | 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘ |
| layout.type | id/class | 【可选】挂载容器类型，填写id或class，不填则默认为id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位 |
| user | text | 【必选】git用户名 |
| apiurl | url | 【可选】默认使用提供文档提供的api，但还是建议自建api，参考教程：自建API部署 |
| minheight.pc | 280px | 【可选】桌面端最小高度，默认为280px |
| minheight.mobile | 0px | 【可选】移动端最小高度，默认为0px |
| color | list | 【可选】一个包含11个色值的数组，文档给出了四款预设值 |
| container | pug | 【可选】预留的父元素容器，用以适配多主题，需要用pug语法填写，目前已适配butterfly，volantis，matery，mengd主题，这四个主题，插件会自自动识别_config.yml内填写的theme配置项。其余主题需要自己填写父元素容器。 |
| gitcalendar_css | URL | 【可选】自定义CSS样式链接 |
| gitcalendar_js | URL | 【可选】自定义js链接 |
自定义挂载容器
很多人反映不想挂在首页，想挂在关于或者统计等页面，只需要做2步:
在对应页面创建一个DOM让插件有地方挂载，例如演示的就是在关于页面(
/about/)的文件中直接写入一个div块<!-- GitCalendar容器 -->
<div id="gitZone"></div>在对应配置项改为与你容器
id以创建页面路径相关的（是改不是加!!!）enable_page: /about/ # 应用页面(记住最后带/)
layout: # 挂载容器类型
type: id
name: gitZone
index: 0重启项目就会看见
hexo cl; hexo s
自建API部署
虽然Vercel的访问应当没有次数限制，但是不排除存在因访问次数过多而限流等限制。所以还是建议各位自建API。使用Vercel部署，完全免费，且无需服务器。
将此项目fork到你的Github仓库
访问Vercel官网，点击右上角的sign up进行注册，注册并登录后点击右上角创建一个项目，并选择以Github继续。
此时应该会看到你刚刚
fork过来的你仓库的项目，看不到就输入关键字进行搜索。点击该仓库右边的
Import进行导入，Vercel的PROJECT NAME可以自定义，不用太过在意，但是之后不支持修改，若要改名，只能删除PROJECT以后重建一个了，下方三个选项保持默认就好，点击Deploy进行部署。到此时，
Vercel的部署已经完成，可以使用Vercel提供的默认域名来访问api链接。例如我获取到的默认域名为github-calendar-api.vercel.app,则用它来替换冰老师教程中的自建API，填写到[Blogroot]\_config.butterfly.yml中关于gitcalendar的apiurl中。注意源码修改版不要带协议，不要带后缀。就填写给你的默认域名就好。而插件版需要带协议gitcalendar:
enable: true
simplemode: true
user: Akilarlxh
apiurl: github-calendar-api.vercel.app
color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']"
导航栏魔改
点击查看教程
在[BlogRoot]\source\css\custom.css中引入如下css代码，然后在主题配置文件_config.butterfly.yml中引入该文件：
/* 一级菜单居中 */ |
此处的css实现了两个作用：菜单栏居中、子菜单横向显示。其中子菜单横向显示要根据自己的实际情况来改，例如你的以及菜单的第2个选项中有子菜单，那就要加一项调节第2个选项中的子菜单，这个具体调节多少要根据你的具体情况为准，可以自己慢慢调到中间。
此时我们的手机端子菜单默认是展开显示的，如下图所示：
此时我们只需要在主题配置文件_config.butterfly.yml中列表对应的地方加一个hide即可，如下图的列表选项：
menu: |
此时有人觉得右边搜索按钮露出搜索两个字很丑，我们也可以把它隐藏了，在[BlogRoot]\themes\Butterfly\layout\includes\header\nav.pug（npm安装的在[BlogRoot]\node_moudules\hexo-theme-butterfly\layout\includes\header\nav.pug）中把以下语句删除或注释掉即可，搜索两个字就不会显示出来(这种语句统一写法是直接删除+就可以，不用补空格)。
nav#nav |
黑夜霓虹灯
点击查看教程
此教程会有两处地方有霓虹灯效果：一个是大标题和个人信息的动态霓虹灯，默认周期为1200ms；另外的是菜单栏的小字有夜光效果，为你的博客增添几分赛博朋克风~
首先在自定义的样式文件
[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) ;
}
/* 手机端适配 */
[data-theme="dark"] #sidebar #sidebar-menus .menus_items .site-page {
text-shadow: 0 0 2px var(--theme-color) ;
}新建文件
[BlogRoot]\source\js\light.js并写入以下代码，本质就是计时器，大家可以根据自己的喜好调节闪烁周期，默认为1200ms：// 霓虹灯效果
// 颜色数组
var arr = ["#39c5bb", "#f14747", "#f1a247", "#f1ee47", "#b347f1", "#1edbff", "#ed709b", "#5636ed"];
// 颜色索引
var idx = 0;
// 切换颜色
function changeColor() {
// 仅夜间模式才启用
if (document.getElementsByTagName('html')[0].getAttribute('data-theme') == 'dark') {
if (document.getElementById("site-name"))
document.getElementById("site-name").style.textShadow = arr[idx] + " 0 0 15px";
if (document.getElementById("site-title"))
document.getElementById("site-title").style.textShadow = arr[idx] + " 0 0 15px";
if (document.getElementById("site-subtitle"))
document.getElementById("site-subtitle").style.textShadow = arr[idx] + " 0 0 10px";
if (document.getElementById("post-info"))
document.getElementById("post-info").style.textShadow = arr[idx] + " 0 0 5px";
try {
document.getElementsByClassName("author-info__name")[0].style.textShadow = arr[idx] + " 0 0 12px";
document.getElementsByClassName("author-info__description")[0].style.textShadow = arr[idx] + " 0 0 12px";
} catch {
}
idx++;
if (idx == 8) {
idx = 0;
}
} else {
// 白天模式恢复默认
if (document.getElementById("site-name"))
document.getElementById("site-name").style.textShadow = "#1e1e1ee0 1px 1px 1px";
if (document.getElementById("site-title"))
document.getElementById("site-title").style.textShadow = "#1e1e1ee0 1px 1px 1px";
if (document.getElementById("site-subtitle"))
document.getElementById("site-subtitle").style.textShadow = "#1e1e1ee0 1px 1px 1px";
if (document.getElementById("post-info"))
document.getElementById("post-info").style.textShadow = "#1e1e1ee0 1px 1px 1px";
try {
document.getElementsByClassName("author-info__name")[0].style.textShadow = "";
document.getElementsByClassName("author-info__description")[0].style.textShadow = "";
} catch {
}
}
}
// 开启计时器
window.onload = setInterval(changeColor, 1200);在主题配置文件
_config.butterfly.yml引入以上两个文件，要注意的是，js文件这里必须为defer，不能为ansyc，保证脚本会延迟到整个页面都解析完后再执行，此时才有对应的元素进行操作：inject:
head:
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
bottom:
- <script defer src="/js/light.js"></script> # 霓虹灯(必须defer否则有时候会不生效)重启项目即可看到效果
hexo cl; hexo s
星空背景和流星特效
点击查看教程
在
[BlogRoot]/source/js目录下新建universe.js，输入以下代码：function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()在
[BlogRoot]/source/css目录下新建universe.css，输入以下代码：/* 背景宇宙星光 */
#universe{
display: block;
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* 这个是调置顶的优先级的，-1在文章页下面，背景上面，个人推荐这种 */
z-index: -1;
}在主题配置文件
_config.butterfly.yml的inject配置项中bottom下填入：inject:
bottom:
- <canvas id="universe"></canvas>
- <script defer src="/js/universe.js"></script>在主题配置文件
_config.butterfly.yml的inject配置项中head下填入：inject:
head:
- <link rel="stylesheet" href="/css/universe.css">重新编译即可看到效果。
侧边栏电子时钟(安知鱼)
点击查看教程
安装
如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突），在博客根目录
[Blogroot]下打开终端，运行以下指令# 卸载原版电子钟
npm uninstall hexo-butterfly-clock安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：npm install hexo-butterfly-clock-anzhiyu --save
添加配置信息，以下为写法示例
在主题配置文件_config.butterfly.yml（注意一定要主题配置文件）中添加：# electric_clock (安知鱼电子钟)
# see https://anzhiy.cn/posts/fc18.html
electric_clock:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
exclude:
# - /posts/
# - /about/
layout: # 挂载容器类型
type: class
name: sticky_layout
index: 0
loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
qweather_key: # 和风天气key
gaud_map_key: # 高得地图web服务key
default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
rectangle: 113.34532,23.15624 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置其中qweather_key 和gaud_map_key 最好自己去申请对应的 api key，默认使用
鱼的，可能会被限制，不保证可靠性。参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填 |
| enable | true/false | 【必选】控制开关 |
| enable_page | path/all | 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all |
| exclude | path | 【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。 |
| layout.type | id/class | 【可选】挂载容器类型，填写 id 或 class，不填则默认为 id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位 |
| loading | URL | 【可选】电子钟加载动画的图片 |
| clock_css | URL | 【可选】电子钟样式 CDN 资源 |
| clock_js | URL | 【可选】电子钟执行脚本 CDN 资源 |
| ip_api | URL | 【可选】获取时钟 IP 的 API |
| qweather_key | text | 【可选】和风天气 key |
| gaud_map_key | text | 【可选】高得地图 web 服务 key |
| default_rectangle | text | 【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气 |
| rectangle | text | 【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置 |
API申请教程
一、qweather_key申请地址: https://id.qweather.com/#/login
登录后进入控制台
创建应用
填写应用名称和 key 名称随意
选择 WebApi
复制 key
二、gaud_map_key 申请地址: https://lbs.amap.com/
登录后进入控制台
创建应用，名称随意，类型选其他
点击添加,
key名称随意，服务平台选择Web服务,点击提交复制 key
个人卡片渐变色
点击查看教程
在[BlogRoot]\source\css\custom.css自定义样式的文件中引入如下代码（最后记得在inject配置项引入!!!）：
/* 侧边栏个人信息卡片动态渐变色 */ |
🍕🍕🍕写在最后
大家有啥教程想看的可以在评论区留言，如果搭建或者魔改过程中遇到不懂的可以加下面的群讨论
相关推荐
评论