教程··0 次阅读·10 分钟·总字数 2,993
博客魔改教程其一
魔改前请备份，要不然出错了又不知道怎么改就完啦！！！
### vscode
写博客或者魔改配置建议使用[vscode](https://code.visualstudio.com/)目前我也在用
文章中出现的_config.butterfly.yml是node_modules/hexo-butterfly文件里面的config复制过来并改名的，关于主题的修改可以直接在里面改
### 外挂标签引入（店长）
查看教程
参考：[教程原帖](https://akilar.top/posts/615e2dec/)
1. 在博客目录打开git bush并运行以下命令：
```bash
npm install hexo-butterfly-tag-plugins-plus --save
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
```
2. 在_config.yml添加以下配置
```yml
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
enable: true # 开关
priority: 5 #过滤器优先权
issues: false #issues标签依赖注入开关
link:
placeholder: /img/link.png #link_card标签默认的图标图片
CDN:
anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css
```
### live2d（店长）
查看教程
参考：[教程原帖](https://akilar.top/posts/5b8f515f/)
#### 安装
1. 我个人不推荐装live2d，除非特别喜欢或者有特殊需求
2. 在博客目录打开git bush并运行以下命令：
```bash
npm install --save hexo-helper-live2d
```
3. 打开_config.yml搜索Live2D，并修改成以下配置（如没有，请在最底部添加）
```bash
# 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三连
```bash
hexo cl;hexo g;hexo s
```
#### 卸载live2d
```bash
npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称
```
为了保证不出错，`_config.yml`里的配置项给删掉
### violet留言板（店长）
查看教程
blue
详见：[信笺样式留言板](https://akilar.top/posts/e2d3c450/)
### 一图流
查看教程
blue
### 首页分类磁贴（小冰）
查看教程
详见：[原帖](https://zfe.space/post/hexo-magnet.html)
blue
### 文章置顶滚动栏(店长)
查看教程
blue
详见：[Swiper Bar](https://akilar.top/posts/8e1264d1/)
### 自定义字体(老版本，新版看下面)
查看教程
声明：非商免字体未经授权仅限个人使用，不得用于商业用途！
推荐找一些免费可商业字体使用
1. 准备好字体文件后，在source/css/custom.css（没有就自己创建）中添加以下代码：
```css
@font-face {
/* 为载入的字体取名字(随意) */
font-family: 'neko';
/* 字体文件地址(相对或者绝对路径都可以) */
src: url(/font/neko.woff2);
/* 定义加粗样式(加粗多少) */
font-weight: normal;
/* 定义字体样式(斜体/非斜体) */
font-style: normal;
/* 定义显示样式 */
font-display: block;
}
```
支持格式：*.eot(老版本IE)，*.otf，*.ttf，*.woff，*.woff2(推荐)
2. 在主题配置文件_config.butterfly.yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：
```bash
# 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: neko, -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: neko, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif
```
3. 重启项目就能看到了
```bash
hexo cl;hexo s
```
### wowjs动画
查看教程
blue
详见：[Add Blog Animation – Wowjs](https://akilar.top/posts/abab51cf/)
### 自定义字体
查看教程
1. 在/source新建一个/font文件夹，把你的字体扔进去，在/source/css新建一个font.css
```css
/* 引入全局字体（b.woff2） */
@font-face {
font-family: 'MyCustomFont';
src: url('/font/b.woff2') format('opentype'); /* otf字体，ttf把format改成truetype */
font-weight: normal;
font-style: normal;
}
/* 引入代码字体（shaonv.ttf） */
@font-face {
font-family: 'MyCodeFont';
src: url('/font/neko.woff2') format('truetype'); /* ttf字体，otf把format改成opentype */
font-weight: normal;
font-style: normal;
}
/* 设置全局字体 */
body {
font-family: 'MyCustomFont', "Georgia", "Arial", sans-serif;
font-size: 16px;
}
/* 设置代码字体 */
code, pre {
font-family: 'MyCodeFont', "Fira Code", "Courier", monospace;
font-size: 16px;
}
```
2. 引入css并设置字体
编辑_config.butterfly.yml
```yml
# Inject
# Insert the code to head (before '' tag) and the bottom (before '
