基础设置

安装butterfly主题

参考资料：
Butterfly 安裝文檔(一) 快速開始
Hexo博客搭建基础教程(二)

1.从主题仓库克隆最新版本主题文件
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2.修改 Hexo 根目錄下的 _config.yml，把主題改為 butterfly

1
theme: butterfly

3.安装pug 以及 stylus 的渲染器

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

4.移动_config.butterfly.yml
在 hexo 的根目錄創建一個文件 _config.butterfly.yml，並把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 里面。

添加标签页、分类页、友情链接等

标签页

1
hexo new page tags

打开\source\tags\index.md，添加type: "tags"

1
2
3
4
5
---
title: tags
date: 2024-08-18 12:00:00
type: "tags"
---

分类页

做法与上述相同，hexo new page categories,添加type: "categories"

友情链接

如添加友情链接，打开\source，新建文件夹_data,创建一个文件link.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- class_name: 1.技术支持
  class_desc: 本网站的搭建由以下开源作者提供技术支持
  link_list: 
    - name: Hexo 
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
      siteshot: https://source.fomal.cc/siteshot/hexo.io.jpg
      
- class_name: 2.友情链接
  class_desc: 一些好朋友~~
  link_list:
    - name: Fomalhaut🥝
      link: https://fomal.cc/
      avatar: /assets/head.jpg
      descr: Future is now 🍭🍭🍭
      siteshot: https://source.fomal.cc/siteshot/www.fomal.cn.jpg

添加图库

hexo new page gallery,随后复制老博客内容

添加电影、音乐等其它页面

与上述操作相同。

_config.yml 和 _config.butterfly.yml 设置

参考基于 Hexo 从零开始搭建个人博客（五）

博客魔改（重要）

生成文章唯一链接

参考基于 Hexo 从零开始搭建个人博客（六）

  1. 安装npm install hexo-abbrlink --save
    2.修改_config.yml内容
    1
    2
    3
    4
    5
    6
    - permalink: :year/:month/:day/:title/
    #上面一行删除，修改为
    permalink: post/:abbrlink.html # post为自定义前缀
    abbrlink:
      alg: crc32   #算法： crc16(default) and crc32
      rep: hex     #进制： dec(default) and hex

添加全局吸底APlayer

参考Butterfly添加全局吸底Aplayer教程
1.安装npm i hexo-tag-aplayer --save
2.在_config.yml中添加以下内容：

1
2
3
4
# APlayer音乐插件
aplayer: 
  meting: true
  asset_inject: false

3.修改_config.butterfly.yml
1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

4.插入Aplayer html,在_config.butterfly.yml-inject-bottom中添加
1
2
3
4
inject:
  head:
  bottom:
  - <div class="aplayer no-destroy" data-id="497232737" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-lrctype="1" data-preload="none" data-autoplay="false" muted> </div> #全局吸底Aplayer

5.调整UI（可不做）
修改_config.butterfly.yml,在inject-head中添加
1
2
3
4
5
6
7
inject:
    head:
    #向上调整
    - '<style type="text/css">#toggle-sidebar {bottom: 80px}</style>'
    #向右调整
    - '<style type="text/css">#toggle-sidebar {left:100px}</style>'
    #上述效果二选一

外挂标签（重要，涉及到文章的迁移）

参考Tag Plugins Plus
1.安装npm install hexo-butterfly-tag-plugins-plus --save
2.安装hexo-renderer-marked,卸载hexo-renderer-kramed(后者支持复杂的数学公式，mathjax的渲染方式)

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

3.在_config.yml中添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 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

一图流

设置后图片不随鼠标滚动而变化，且每一页都是一张相同的图片
参考博客魔改教程总结(一)
1.source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页脚与头图透明 */
#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;
}

2.在_config.butterfly.yml添加
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

3.取消头图与页脚图的加载项避免冗余加载
在_config.butterfly.yml中修改
1
2
3
4
5
# The banner image of home page
index_img: 

# Footer Background
footer_bg: false

4.一图流改完了背景图也没了，那大概率是之前没设置背景图
1
background: url(https://pic.imgdb.cn/item/66c19556d9c307b7e9a78550.jpg)

每页单独背景

参考博客魔改教程总结(二)
1.修改\themes\butterfly\layout\includes\layout.pug

1
2
3
4
5
6
  if theme.background
-   #web_bg 
+   if page.background
+     #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
+   else
+     #web_bg

2.在每篇文章的front-matter里添加background
1
2
3
4
5
6
---
title: 
cover: 'xxx.png'
background: url(xxx.png)
description: 
---

3.修改\themes\butterfly\layout\includes\third-party\pjax.pug
1
2
3
4
5
6
7
8
9
10
11
  script(src=url_for(theme.CDN.pjax))
  script.
    let pjaxSelectors = [
      'title',
      '#config-diff',
      '#body-wrap',
      '#rightside-config-hide',
      '#rightside-config-show',
+     '#web_bg',
      '.js-pjax'
    ]

页面样式调节（透明度）

通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。
参考博客魔改教程总结(二)
添加以下内容至custom.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/* 页面样式调节开始 */
:root {
  --trans-light: rgba(255, 255, 255, 0.75);
  --trans-dark: rgba(25, 25, 25, 0.6);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}


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

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
/* 页面样式调节结束 */

页脚遮罩

添加css

1
2
3
4
5
6
7
8
9
/* 页脚遮罩开始 */
#footer-wrap a {
  border-radius: 30px;
}
#footer-wrap {
  padding: 20px 20px;
  background-color: #12121288 !important;
}
/* 页脚遮罩结束 */

文章置顶滚动栏

参考Swiper Bar
1.安装npm install hexo-butterfly-swiper --save
2.添加以下内容至_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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初始化方法

3.在需要置顶滚动的文章的front_matter内添加以下内容
1
2
3
---
swiper_index: 1  #置顶轮播图顺序，非负整数，数字越大越靠前
---

页脚徽标

参考Add Github Badge
1.安装npm install hexo-butterfly-footer-beautify --save
2.添加以下内容至_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# 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://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: 3 #若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ #徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
      message: 博客框架为Hexo_v5.4.0 #徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v3.8.2
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 本站使用JsDelivr为静态资源提供CDN加速
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站采用双线部署，默认线路托管于Vercel
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
      message: 本站采用双线部署，联通线路托管于Coding
    - 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

3.徽标制作：shields.io