{% note info no-icon %}魔改前请备份，要不然出错了又不知道怎么改就完啦！！！
{% endnote %}

vscode

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

外挂标签引入（店长）

{% folding green, 查看教程 %}
参考：教程原帖

  1. 在博客目录打开git bush并运行以下命令：
BASH
npm install hexo-butterfly-tag-plugins-plus --save
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  1. 在_config.yml添加以下配置

{% endfolding %}

live2d（店长）

{% folding green, 查看教程 %}
参考：教程原帖

安装

  1. 我个人不推荐装live2d，除非特别喜欢或者有特殊需求
  2. 在博客目录打开git bush并运行以下命令：
BASH
npm install --save hexo-helper-live2d
  1. 打开_config.yml搜索Live2D，并修改成以下配置（如没有，请在最底部添加）

完成后进行hexo三连

BUSH
hexo cl;hexo g;hexo s

卸载live2d

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

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

violet留言板（店长）

{% folding green, 查看教程 %}
{% hideBlock 点我预览, blue %}
详见：信笺样式留言板
image (1)
{% endhideBlock %}

  1. 在博客目录运行命令
BUSH
npm install hexo-butterfly-envelope --save

在站点配置文件_config.yml添加以下代码

{% endfolding %}

一图流

{% folding green, 查看教程 %}
{% hideBlock 点我预览, blue %}
image (2)
{% endhideBlock %}

  1. 在博客主目录source文件夹下再创建一个css文件夹，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：
CSS
/* 页脚与头图透明 */
  #footer{
    background-color: rgba(0, 0, 0, .25) !important;
    }
  #page-header {
    background: transparent !important;
  }
  :root {
    --card-bg: rgba(255, 255, 255, 0.91);
}

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

  1. 在主题配置文件_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）
YML
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  1. 在主题配置文件_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载
YML
# The banner image of home page
index_img: 

# Footer Background
footer_img: false
  1. 如果你改完一图流之后背景图不显示的话请在主题配置文件_config.butterfly.yml文件中的background配置项设置背景图
YML
background: url(https://mccsjs.eu.org/img/m.png/)

{% endfolding %}

首页分类磁贴（小冰）

{% folding green, 查看教程 %}
详见：原帖
{% hideBlock 点我预览, blue %}
image (3)
{% endhideBlock %}

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

  1. 自定义 tags 或 categories 的排列和展示
  2. 自定义 tags 或 categories 的展示图标，名称
  3. 自定义排列的行数，默认 2 行
    在博客根目录下打开终端，运行以下指令：
BASH
npm i hexo-magnet --save

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

教程：

  1. 在网站配置文件_config.yml新增以下项 (注意不是主题配置文件)，这里的分类名字必须和你文章的分类名字一一对应：
  1. 黑夜模式下看起来特别的别扭，还要做一下黑夜模式的颜色适配，在custom.css文件中添加以下代码适配黑夜模式(具体颜色可以自己调节)：

{% endfolding %}

文章置顶滚动栏(店长)

{% folding green, 查看教程 %}
{% hideBlock 点我预览, blue %}
详见：Swiper Bar
image (4)
{% endhideBlock %}

  1. 安装插件,在博客根目录下打开终端，运行以下指令：
BASH
npm install hexo-butterfly-swiper --save
  1. 添加配置信息，在站点配置文件_config.yml下添加
  1. 使用方法:在文章的front_matter中添加swiper_index配置项即可。
MARKDOWN
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

{% endfolding %}

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

{% folding green, 查看教程 %}
{% note warning simple %}声明：非商免字体未经授权仅限个人使用，不得用于商业用途！
推荐找一些免费可商业字体使用{% endnote %}

  1. 准备好字体文件后，在source/css/custom.css（没有就自己创建）中添加以下代码：

支持格式：.eot(老版本IE)，.otf，.ttf，.woff，*.woff2(推荐)
2. 在主题配置文件_config.butterfly.yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：

  1. 重启项目就能看到了
BASH
hexo cl;hexo s

{% endfolding %}

wowjs动画

{% folding green, 查看教程 %}
{% hideBlock 点我预览, blue %}
详见：Add Blog Animation – Wowjs
image (5)
{% endhideBlock %}

  1. 安装插件,在博客根目录下打开终端，运行以下指令：
BASH
npm install hexo-butterfly-wowjs --save
  1. 在站点配置文件_config.yml添加：

hexo cl;hexo s看看效果

{% endfolding %}

自定义字体

{% folding green, 查看教程 %}

  1. 在/source新建一个/font文件夹，把你的字体扔进去，在/source/css新建一个font.css
  1. 引入css并设置字体
    编辑_config.butterfly.yml
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">

字体部分

YML
font:
  global-font-size: 16px
  code-font-size: 15px
  font-family: MyCustomFont, "Georgia", "Arial", sans-serif
  code-font-family: MyCodeFont, "Fira Code", "Courier", monospace
BASH
之后hexo cl;hexo s

看看效果

{% endfolding %}

博客魔改教程一
https://blog.seln.cn/posts/e7f6bd97
作者mccsjs
发布时间2023-02-16
更新时间2026-06-08
许可协议 CC BY-NC-SA 4.0

评论