快速开始

参考 Butterfly 文檔(一) 快速開始 | Butterfly

npm安装

通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成）

1
npm install hexo-theme-butterfly

应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly：

image-20241129174442193

安装插件

如果你没有 pug 以及 stylus 的渲染器，请下载安装：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

升级建议

为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做）：

  • 在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。

原因：

  • Hexo 会自动合并主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

接下里，就可以开始愉快地魔改啦~

添加分类和标签

参考：

Hexo使用攻略-添加分类及标签 - 简书

Butterfly 文檔(二) 主題頁面 | Butterfly

创建标签页

  1. 前往 Hexo 的根目录

  2. 输入 hexo new page tags

  3. 找到 source/tags/index.md 文件

  4. 修改这个文件：

    image-20241129182508456

给文章添加 tags 属性

1
tags: [1,2]

分类页

  1. 前往 Hexo 的根目录

  2. 输入 hexo new page categories

  3. 找到 source/categories/index.md 文件

  4. 修改这个文件：

    image-20241129182725375

给文章添加 categories 属性

1
2
3
4
categories: 
- [1]
- [2]
- [1,2]

hexo一篇文章只能属于一个分类，也就是说如果在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

设置背景透明度

参考：Hexo主题Butterfly配置、踩坑及魔改 | CodeRain

在主题文件夹下找到css文件夹hexo-theme-butterfly\source\css新建一个transpancy.css文件，修改最右边的数字改变透明度：

transpancy.css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 文章页背景 */
.layout_post>#post {
    /* 以下代表透明度为0.7 可以自行修改*/
    background: rgba(255,255,255,.7);
}

/* 所有页面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表透明度为0.7 */
    background: rgba(255,255,255,.7);
}
/*侧边卡片的透明度 */
:root {
  --card-bg: rgba(255, 255, 255, .7);
}

在主题配置文件_config.yml引入css文件,全局检索inject,在以下head位置插入字段

image-20241129174307434