基础设置

安装butterfly主题

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

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

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 里面。

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

标签页

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,随后复制老博客内容

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

与上述操作相同。

添加说说页面

butterfly5.0新增功能。
hexo new page shuoshuo创建新页面，打开source/shuoshuo/index.md，添加type: "shuoshuo"
在_config.butterfly.yml中修改菜单相关内容：

1
2
3
menu:
  首页: / || fas fa-home
  说说: /shuoshuo/ || fa-blog

打开source/_data,创建文件shuoshuo.yml
1
2
3
4
5
6
7
8
- author: 黑心の南瓜🎃
  avatar: https://pic.imgdb.cn/item/66c605b4d9c307b7e9a53ea1.jpg
  date: 2024-07-07 09:00:00
  key: key-1
  tags: 
  content: |
    我是一条说说。
    ![我是配图](https://xxx.com/xxx.png)

_config.yml 和 _config.butterfly.yml 设置

参考基于 Hexo 从零开始搭建个人博客（五）
2024.11.10更新：butterfly版本更新至5.2.2，参考Butterfly 文档(三) 主题配置

博客魔改（重要）

生成文章唯一链接

参考基于 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

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

参考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

一图流

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  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: #留空

# The background image of footer
footer_img: #留空

4.一图流改完了背景图也没了，那大概率是之前没设置背景图
1
2
3
# Website Background
# Can set it to color or image url
background: https://pic.imgdb.cn/item/66c19556d9c307b7e9a78550.jpg

每页单独背景

参考博客魔改教程总结(二)
2024.11.10 butterfly更新至5.2.2版本，修改内容
1.修改\themes\butterfly\layout\includes\layout.pug

1
2
3
4
5
6
  if theme.background
-   #web_bg(style=getBgPath(theme.background))
+   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(style=getBgPath(theme.background))

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  #置顶轮播图顺序，非负整数，数字越大越靠前
---

页脚徽标(2024.11.10 已卸载)

参考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

文章标题居中(2024.11.10 已取消)

2024.11.10 butterfly更新至5.2.2，主题设置文件中已添加相关功能。

旧版写法，已废弃

参考【hexo】关于butterfly主题的文章标题及其相关信息布局的修改位置
打开\themes\butterfly\source\css\_layout\head.styl，修改以下内容：

1
2
3
4
5
6
7
8
9
#post-info
  position: absolute
  // 修改bottom值
- bottom: 30px     
+ bottom: 100px     
  padding: 0 8%
  width: 100%
  // 添加下面一行使文章标题居中
+ text-align: center

文章评论（twikoo+MongoDB+netlify）

参考资料：
基于 Hexo 键入评论功能
Twikoo网站评论系统 快速上手

1.注册MongoDB Atlas账号
参见MongoDB Atlas，按照此教程内容，保存好MongoDB连接字符串。

2.在netlify上部署
参见Netlify 部署，完成后envId为https://xxx.netlify.app/.netlify/functions/twikoo，xxx为自己设置的三级域名。

3.修改_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Comments System
# --------------------------------------
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use:
    # - Disqus
    # - Valine
    - Twikoo # 选择Twikoo作为评论系统
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

twikoo:
  envId: https://xxx.netlify.app/.netlify/functions/twikoo   #此处填写获得的环境ID
  region:
  visitor: true  #显示文章阅读数
  option:

文章显示数学公式

参考资料：Math 數學
1.修改_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
math:
  # Choose: mathjax, katex
  # Leave it empty if you don't need math
  use: mathjax
  per_page: true
  hide_scrollbar: false

  mathjax:
    # Enable the contextual menu
    enableMenu: true
    # Choose: all / ams / none, This controls whether equations are numbered and how
    tags: none

2.卸载hexo自带的markdown渲染器，安装hexo-renderer-kramed
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
kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

给博客添加RSS订阅

参考资料：
Hexo butterfly主题添加RSS插件
hexo-generator-feed

1.安装npm install hexo-generator-feed --save
2.添加以下内容至_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
feed:
  enable: true #是否启用插件
  type: atom #有atom和rss2两个选项，使用默认atom就好了
  path: atom.xml #也用默认配置atom.xml就行
  limit: 20 #展示文章的数量,使用 0 或 false 代表展示全部
  hub: #这个我没用上，根据官网，空着就行
  content: #默认是false，true的话会在rss文件中包含整个文章内容
  content_limit: 140 #摘要长度
  content_limit_delim: ' ' #没看明白官方的意思，就跟着默认不填了
  order_by: -date #采用日期进行排序
  icon: icon.png #给rss链接配置icon
  autodiscovery: true #自动发现提要
  template: #给rss文章配置模板

3.添加以下内容至_config.butterfly.yml

1
2
3
4
5
6
7
8
#找到 social settings 项，添加以下内容
social:
  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'
  fa-solid fa-rss: https://www.blackpumpkin.site/atom.xml || RSS

#以下为新增内容
rss: /atom.xml

头像呼吸灯

参考资料：博客魔改教程总结(四)
在/source/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
/* 头像呼吸灯 */
[data-theme="light"] .avatar-img {
  animation: huxi_light 4s ease-in-out infinite;
}
[data-theme="dark"] .avatar-img {
  animation: huxi_dark 4s ease-in-out infinite;
}
@keyframes huxi_light {
  0% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #e9f5fa;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
}
@keyframes huxi_dark {
  0% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #39c5bb;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
}

添加搜索功能（Algolia）

参考资料：
基于 Hexo 键入搜索功能
Butterfly 文檔(三) 主題配置
1.安装npm install hexo-algoliasearch --save
2.添加以下内容至_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
algolia:
  appId: "your applicationID"
  apiKey: "your Search-Only API Key"
  adminApiKey: "your Admin API Key"
  chunkSize: 5000
  indexName: "your indexName"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title


【applicationID】填入图中位置的 Applicaiton ID，【apiKey】填入图中位置的 Search-Only API Key，【Admin API Key】填入图中位置的 Admin API Key，【indexName】填入前面创建的索引名称。
3.修改_config.butterfly.yml
1
2
3
4
5
6
7
8
9
10
search:
  # Choose: algolia_search / local_search / docsearch
  # leave it empty if you don't need search
  use: algolia_search
  placeholder:

  # Algolia Search
  algolia_search:
    # Number of search results per page
    hitsPerPage: 6

4.执行hexo algolia;hexo cl;hexo g;hexo d

搜索引擎收录

参考资料：【hexo】hexo 提交到搜索引擎收录

添加全局吸底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>'
    #上述效果二选一

APlayer美化+适配黑夜模式

参考hexo 博客 butterfly 主题 aplyer 音乐播放器美化与深色模式
在/source/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
81
82
83
84
85
86
87
88
89
/*aplayer日间模式调整*/
  /*背景色*/
.aplayer{
	background: rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: relative;
}
.aplayer.aplayer-fixed .aplayer-lrc:after,.aplayer.aplayer-fixed .aplayer-lrc:before {
	display: none
}
.aplayer.aplayer.aplayer-fixed .aplayer-body{
	background:rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: fixed;
}
  /*毛玻璃效果*/
.aplayer-list{
	backdrop-filter: blur(3px);
}
.aplayer-info{
	backdrop-filter: blur(3px);
}
  /*滚动条*/
.aplayer .aplayer-list ol::-webkit-scrollbar {
	width: 5px
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: #b0e1ff
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
	background-color: #b0e1ff
}
  /*圆角*/
.aplayer.aplayer-fixed .aplayer-list{
    border-radius: 6px 6px 0 0!important;
}
.aplayer.aplayer-fixed .aplayer-miniswitcher{
    border-radius: 0 6px 6px 0!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{
    transition: 0.28s!important;
    border-radius: 6px!important;
}	
  /*选中与播放中歌曲激活颜色*/
.aplayer .aplayer-list ol li:hover{
    background: #b0e1ff!important;
}
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #ffdffa!important;
}

/*aplayer黑暗模式*/
[data-theme=dark]
.aplayer{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer.aplayer-fixed .aplayer-body{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{
	fill: #d4d4d4;
}
[data-theme=dark]	
.aplayer .aplayer-list ol li:hover{
    background: #407290!important;
}
[data-theme=dark]
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #9c8098!important;
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-index{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-author{
    color: #d4d4d4;
}

博客宽屏适配

参考博客魔改教程总结(四)
在/source/css/custom.css内添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 博客宽屏适配 */
.layout {
  max-width: 1400px;
}

/* 侧边卡片栏宽度 */
.aside-content {
  max-width: 318px;
  min-width: 300px;
}

/* 平板尺寸自适应(不启用侧边栏宽度限制) */
@media screen and (max-width: 900px) {
  .aside-content {
    max-width: none !important;
    padding: 0 5px 0 5px;
  }
}
/* 博客宽屏适配结束 */

右下角添加sakana弹簧

参考快来为你的 Hexo 博客添加可爱的石蒜模拟器吧！
在theme/butterfly/layout/includes/layout.pug内添加以下内容：

1
2
3
4
5
6
#sakana-widget(style='position:fixed;bottom:10px;right:10px;')
script.
  function initSakanaWidget() {
  new SakanaWidget().mount('#sakana-widget');
  }
script(async='' onload='initSakanaWidget()' src='https://cdn.jsdelivr.net/npm/sakana-widget@2.2.1/lib/sakana.min.js')