博客魔改教程一

魔改前请备份，要不然出错了又不知道怎么改就完啦！！！

vscode

写博客或者魔改配置建议使用vscode目前我也在用文章中出现的_config.butterfly.yml是node_modules/hexo-butterfly文件里面的config复制过来并改名的，关于主题的修改可以直接在里面改

外挂标签引入（店长）

查看教程

在博客目录打开git bush并运行以下命令：

npm install hexo-butterfly-tag-plugins-plus --save
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

在_config.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（店长）

查看教程

参考：教程原帖

安装

我个人不推荐装live2d，除非特别喜欢或者有特殊需求
在博客目录打开git bush并运行以下命令：

npm install --save hexo-helper-live2d

打开_config.yml搜索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 cl;hexo g;hexo s

卸载live2d

npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

为了保证不出错，_config.yml里的配置项给删掉

violet留言板（店长）

查看教程

blue

详见：信笺样式留言板

npm install hexo-butterfly-envelope --save

在站点配置文件_config.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

一图流

查看教程

blue

在博客主目录source文件夹下再创建一个css文件夹，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：

/* 页脚与头图透明 */
  #footer{
    background-color: rgba(0, 0, 0, .25) !important;
    }
  #page-header {
    background: transparent !important;
  }
  :root {
    --card-bg: rgba(255, 255, 255, 0.91);
}

如果不想要我这样的透明遮罩的话就用以下配置：

/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

在主题配置文件_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

在主题配置文件_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载

# The banner image of home page
index_img: 

# Footer Background
footer_img: false

如果你改完一图流之后背景图不显示的话请在主题配置文件_config.butterfly.yml文件中的background配置项设置背景图

background: url(https://mccsjs.eu.org/img/m.png/)

首页分类磁贴（小冰）

查看教程

详见：原帖

blue

这个插件主要实现了以下功能：

自定义 tags 或 categories 的排列和展示
自定义 tags 或 categories 的展示图标，名称
自定义排列的行数，默认 2 行在博客根目录下打开终端，运行以下指令：

npm i hexo-magnet --save

一定要加--save，不然本地预览的时候可能不会显示！！！

教程：

在网站配置文件_config.yml新增以下项 (注意不是主题配置文件)，这里的分类名字必须和你文章的分类名字一一对应：

magnet:
  enable: true
  priority: 1
  enable_page: / # 显示的页面
  type: categories #加以识别的，可以为tag
  devide: 2 #默认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: ""

黑夜模式下看起来特别的别扭，还要做一下黑夜模式的颜色适配，在custom.css文件中添加以下代码适配黑夜模式(具体颜色可以自己调节)：

/* 小冰分类分类磁铁黑夜模式适配 */
/* 一般状态 */
[data-theme="dark"] .magnet_link_context {
  background: #1e1e1e;
  color: antiquewhite;
}
/* 鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
  background: #3ecdf1;
  color: #f2f2f2;
}

文章置顶滚动栏(店长)

查看教程

blue

详见：Swiper Bar

安装插件,在博客根目录下打开终端，运行以下指令：

npm install hexo-butterfly-swiper --save

添加配置信息，在站点配置文件_config.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初始化方法

使用方法:在文章的front_matter中添加swiper_index配置项即可。

---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

自定义字体(老版本，新版看下面)

查看教程

声明：非商免字体未经授权仅限个人使用，不得用于商业用途！推荐找一些免费可商业字体使用

准备好字体文件后，在source/css/custom.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配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：

# 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

重启项目就能看到了

hexo cl;hexo s

wowjs动画

查看教程

blue

详见：Add Blog Animation – Wowjs

安装插件,在博客根目录下打开终端，运行以下指令：

npm install hexo-butterfly-wowjs --save

在站点配置文件_config.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: 1 #选填项，动画重复的次数
    - 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

hexo cl;hexo s看看效果

自定义字体

查看教程

在/source新建一个/font文件夹，把你的字体扔进去，在/source/css新建一个font.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;
}

引入css并设置字体编辑_config.butterfly.yml

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href=" /css/font.css">

字体部分

font:
  global-font-size: 16px
  code-font-size: 15px
  font-family: MyCustomFont, "Georgia", "Arial", sans-serif
  code-font-family: MyCodeFont, "Fira Code", "Courier", monospace

之后hexo cl;hexo s

看看效果

vscode

外挂标签引入（店长）

live2d（店长）

安装

卸载live2d

violet留言板（店长）

一图流

首页分类磁贴（小冰）

文章置顶滚动栏(店长)

自定义字体(老版本，新版看下面)

wowjs动画

自定义字体

评论