不要把个人需要的文件/图片放在主题source文件夹里，因为在升级主题的过程中，可能会把文件覆盖删除了。
在Hexo根目录的source文件夹里，创建一个文件夹来放置个人文件/图片。引用文件直接为/文件夹名称/文件名

自定义图标

Butterfly主题内置了Font Awesome V5 图标，目前已更新到 5.13.0，总共有1,588个免费图标。由于是国外的图标网站，对于国内的一些网站Icon并不支持。如有需要，你可以引入其它的图标服务商。下面介绍iconfont-阿里巴巴矢量图标库引入自定义icon

iconfont登录页

搜索想要的图标，添加到购物车并添加到项目（没有新建一个）

iconfont添加图标入库

添加成功后跳转到我的项目中，点击Font class，点击生成在线链接

iconfont生成CSS链接

打开_config.butterfly.yml，找到inject配置，按要求把链接填入

1
2
3
4
5
6
7
8
9
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3587689_u063afxcp1.css">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

在我们需要使用的地方填入icon，例如icon-Bing，图片使用格式为iconfont icon名字，我的社交图标配置：

1
2
3
4
5
social:
  iconfont icon-github: https://gitee.com/pgh1038 || Github
  iconfont icon-bilibili-line: https://space.bilibili.com/334851399 || bilibili
  iconfont icon-gitee-fill-round: https://gitee.com/pgh1038 || Gitee
  iconfont icon-csdn: https://blog.csdn.net/qq_46231952 || CSDN

因为第三方图标样式可能和主题内置图标样式不一致，需要修改：

新建博客根目录/source/css/blog.aqcoder.cn.css，blog.aqcoder.cn.css这里修改为你自己的网站，样式文件内容：

1
2
3
4
/* 第三方图标样式 */
.iconfont {
    font-size: 18px;
}

修改_config.butterfly.yml：

1
2
3
4
5
6
7
8
9
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3587689_u063afxcp1.css">
    - <link rel="stylesheet" href="/css/blog.aqcoder.cn.css">
  bottom:
    # - <script src="xxxx"></script>

社交图标

音乐

1
npm install --save hexo-tag-aplayer
1
hexo new page music

插件会在每一个文件都插入 js 和 css，为了避免重复插入，修改_config.yml：

1
2
aplayer:
  asset_inject: false

然后在你需要使用aplayer的页面Front-matter添加

1
aplayer: true

这样只会在需要aplayer的页面插入js和css。在音乐页面使用以下语句即可展示音乐播放器：

1
{% meting "8594368955" "tencent" "playlist" %}

music/index.md配置示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 音乐
date: 2022-08-05 23:50:30
comments: false
top_img: false
aplayer: true

---

<font color=#0c74d6 size=3 face="黑体">**喜欢的英文歌**</font>

<!-- Simple example (songid, server, type)  -->

{% meting "8594368955" "tencent" "playlist" %}

还有引入原生js展示音乐播放器的形式

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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
{% aplayerlist %}
{
    "narrow": false,                          
    "autoplay": false,                         
    "mode": "circulation",                         
    "showlrc": 3,                             
    "mutex": true,                            
    "theme": "#e6d0b2",	                      
    "preload": "metadata",                    
    "listmaxheight": "513px",                 
    "music": [
        {
            "title": "Mine Mine",
            "author": "周杰伦",
            "url": "https://music.aqcoder.cn/song/100.mp3",
            "lrc": "/lrc/100.lrc",
            "pic": "https://music.aqcoder.cn/pic/100.webp"
        },
        {
            "title": "Mojito",
            "author": "周杰伦",
            "url": "https://music.aqcoder.cn/song/101.mp3",
            "lrc": "/lrc/101.lrc",
            "pic": "https://music.aqcoder.cn/pic/101.webp"
        }
    ]
}
{% endaplayerlist %}

使用hexo-tag-aplayer生成的音乐界面

使用hexo-tag-aplayer生成的音乐界面

使用原生js导入的音乐界面

使用原生js导入的音乐界面

全局吸底Aplayer

_config.yml添加：

1
2
3
aplayer:
  meting: true
  asset_inject: false #为了防止插入重复的资源，需要把asset_inject设为false

修改_config.butterfly.yml：

1
2
3
4
5
6
7
8
9
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true
  
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="8594368955" data-server="tencent" data-type="playlist" data-fixed="true" data-autoplay="false" data-lrctype="1"> </div>

Aplayer html参数解释

optiondefaultdescription
data-idrequiresong id / playlist id / album id / search keyword
data-serverrequiremusic platform: netease, tencent, kugou, xiami, baidu
data-typerequiresong, playlist, album, search, artist
data-fixedfalseenable fixed mode
data-minifalseenable mini mode
data-autoplayfalseaudio autoplay
data-theme#2980b9main color
data-loopallplayer loop play, values: ‘all’, ‘one’, ‘none’
data-orderlistplayer play order, values: ‘list’, ‘random’
data-preloadautovalues: ‘none’, ‘metadata’, ‘auto’
data-volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
data-mutextrueprevent to play multiple player at the same time, pause other players when this player start play
data-lrctype0lyric type
data-listfoldedfalseindicate whether list should folded at first
data-listmaxheight340pxlist max height
data-storagenamemetingjslocalStorage key that store player setting

运行 Hexo 就可以看到网页左下角出现了 Aplayer

全局Aplayer吸底

最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的pjax设为 true

侧边栏电子时钟（弃用）

为简洁画面，已弃用

安装插件

1
npm i hexo-electric-clock --save

在_config.yml添加：

1
2
3
4
5
6
7
8
9
electric_clock:
  priority: 5
  enable: true
  enable_page: all
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>'
参数解释
enable是否开启插件
enable_page路由地址，all 代表全局开启。如 / 代表主页。
priority插件的叠放顺序，数字越大，叠放约靠前。
layout.typehtml类型可以是class或id
layout.name名字
layout.index在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个

在md文件上也可以使用模板展示时钟，需要注意id/class值和配置文件的id/class值一样

1
2
3
4
5
6
7
8
<div desc="我是墙" class="sticky_layout">
  <!-- id=>type  recent-posts=>name    -->
  <div desc="我是画框">
    <div desc="我是纸">
      <!--这里通过js挂载electric_clock，也就是画画-->
    </div>
  </div>
</div>

侧边栏电子时钟

侧边栏Git贡献

安装插件

1
npm i hexo-githubcalendar --save

在_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
# githubcalendar
# github近期代码贡献度
# https://github.com/Zfour/hexo-github-calendar
githubcalendar:
  enable: true
  enable_page: /about/
  user: flow2000
  layout:
    type: id
    name: github_calendar
    index: 0
  githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
  pc_minheight: 280px
  mobile_minheight: 0px
  # 以下色调选择喜欢的一行保留即可。其余注释。—————akilar的糖果色
  # color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
  # color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
  color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调
  # 如果想搭建自用 api，具体的部署方案可看考 python_github_calendar_api 及 python_gitee_calendar_api 的文档说明
  api: https://python-github-calendar-api-eta.vercel.app/api
  # api: https://python-gitee-calendar-api.vercel.app/api
  calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
  plus_style: ""
参数解释
enable是否开启插件
enable_page路由地址，all 代表全局开启。如 / 代表主页。
user你的 github 或者 gitee 用户名
priority插件的叠放顺序，数字越大，叠放约靠前。
layout.typehtml类型可以是class或id
layout.name名字
layout.index在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个
pc_minheight电脑端插件的最小高度，减少加载带来的视觉偏移
mobile_minheight手机端插件的最小高度，减少加载带来的视觉偏移
colorcalendar 的主题色
api获取贡献数据api
calendar_jsjsd 加速的 js，将 github calendar 挂载入容器中
plus_style提供可自定义的 style

在md文件上也可以使用模板展示git贡献，在md文件填写以下代码：

1
2
3
4
5
6
7
8
<div name="我是墙" id="github_calendar">
  <!-- id=>type  recent-posts=>name    -->
  <div name="我是画框">
    <div name="我是纸">
      <!--这里通过js挂载githubcalendar，也就是画画-->
    </div>
  </div>
</div>

需要注意id/class值和配置文件的id/class值一样

侧边栏Git贡献

侧边栏历史上的今天（弃用）

为简洁画面，已弃用

安装插件

1
npm i hexo-history-calendar --save

在_config.yml添加：

1
2
3
4
5
6
7
8
9
10
# 历史上的今天
history_calendar:
  priority: 4
  enable: true
  enable_page: /share/
  layout:
    type: id
    name: history_calendar
    index: 0
  temple_html: '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>'
参数解释
enable是否开启插件
enable_page路由地址，all 代表全局开启。如 / 代表主页。
priority插件的叠放顺序，数字越大，叠放约靠前。
layout.typehtml类型可以是class或id
layout.name名字
layout.index在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个
temple_html包含挂载容器

在md文件上也可以使用模板展示历史上的今天，复制以下内容到md文件即可：

1
2
3
4
5
6
7
8
<div name="我是墙" id="history_calendar">
  <!-- id=>type  recent-posts=>name    -->
  <div name="我是画框">
    <div name="我是纸">
      <!--这里通过js挂载githubcalendar，也就是画画-->
    </div>
  </div>
</div>

需要注意id/class值和配置文件的id/class值一样

侧边栏历史上的今天

侧边栏访问统计

建议使用最新版本：Butterfly 博客优化

思路：自定义侧边栏，使用51.LA网站统计V6数据挂件作为访问统计的数据源

注册51.LA网站统计V6，添加域名后，选择普通安装：

51.LA网站统计V6

编辑_config.butterfly.yml添加自己的统计代码：

1
2
3
4
inject:
  head:
    - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>     # 网站统计V6安装代码
    - <script>LA.init({id:"K3C3rxPX9ZnLFSM9",ck:"K3C3rxPX9ZnLFSM9"})</script>                   # 网站统计V6安装代码

添加代码并检测成功后进入配置->参数设置->数据挂件，开启挂件功能，按需求编辑样式：

编辑数据挂件样式

复制代码：

复制代码

可使用博主的挂件样式，只需修改K3C3rxPX9ZnLFSM9为您的网站的值即可：

1
<script id="LA-DATA-WIDGET" charset="UTF-8" src="https://v6-widget.51.la/v6/K3C3rxPX9ZnLFSM9/quote.js?theme=#FFFFFF,#333333,#898989,#333333,#FFFFFF,#1690FF,18&col=true&f=12&display=0,1,1,1,0,0,1,1"></script>

在Hexo博客目录中的source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 widget.yml

格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
top:
  - class_name:
    id_name:
    name:
    icon:
    html:

bottom:
  - class_name:
    id_name:
    name:
    icon:
    order:
    html:

参数讲解

top: 创建的 widget 会出现在非 sticky 区域（即所有页面都会显示)

bottom: 创建的 widget 会出现在 sticky 区域（除了文章页都会显示)

参数解释
class_name所创建的 widget 父类 class 名 （可选）
id_name所创建的 widget 父类 id 名（可选）
name所创建的 widget 标题
icon所创建的 widget 图标
order所创建的 widget 排序 （可选）
html所创建的 widget 相关代码

博主的widget.yml配置：

1
2
3
4
5
6
7
bottom:
  - class_name: website_statistics
    id_name: website_statistics
    name: 访问统计
    icon: iconfont icon-tongji
    order: 1
    html: '<div desc="我是墙" class="sticky_layout"><div desc="我是画框"><div desc="我是纸"><script id="LA-DATA-WIDGET" charset="UTF-8" src="https://v6-widget.51.la/v6/K3C3rxPX9ZnLFSM9/quote.js?theme=#FFFFFF,#333333,#898989,#333333,#FFFFFF,#1690FF,18&col=true&f=12&display=0,1,1,1,0,0,1,1"></script></div></div></div>'

注意：

iconfont icon-tongji是博主在iconfont-阿里巴巴矢量图标库设置的图标，详情点击这里

html中博主添加一些代码防止某些情况无法加载：

1
<div desc="我是墙" class="sticky_layout"><div desc="我是画框"><div desc="我是纸">统计代码</div></div></div>

版本：Butterfly4.4.0 Hexo6.2.0

widget.yml配置：

1
2
3
4
5
6
7
bottom:
  - class_name: website_statistics
    id_name: website_statistics
    name: 访问统计
    icon: iconfont icon-tongji
    order: 1
    html: '<script id="LA-DATA-WIDGET" charset="UTF-8" src="https://v6-widget.51.la/v6/K3C3rxPX9ZnLFSM9/quote.js?theme=#FFFFFF,#333333,#898989,#333333,#FFFFFF,#1690FF,18&col=true&f=12&display=0,1,1,1,0,0,1,1"></script>'

_config.butterfly.yml配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# toc (文章目录)
toc:
  post: true # 对文章页是否有效
  page: false # 对页面是否有效
  number: true # 是否展示章节数
  expand: true # 是否展开
  style_simple: true # for post 开启简洁模式
  
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
  enable: false
  exclude:

Front-matter配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: Butterfly博客搭建（进阶教程）
abbrlink: c90c
date: 2022-08-21 11:24:41
tags:
  - Butterfly
categories: Butterfly
description: 本教程是Butterfly的进阶教程，用于增加博客的多样性，提升美感。
keywords: Butterfly搭建教程
cover: 'https://api.aqcoder.cn/random?w=800&h=480'
top_img: false
highlight_shrink: false
sticky: 99
toc: true
toc_number: true
---

过程：点击文章页，从文章页点击导航栏的主页，访问统计侧边栏会失效：

访问统计侧边栏失效情况

解决方法：

widget.yml的html中修改代码为：

1
<div desc="我是墙" class="sticky_layout"><div desc="我是画框"><div desc="我是纸">统计代码</div></div></div>

图片压缩

Butterfly主题需要使用到很多图片。如果图片太大，会严重拖慢网站的加载速度。

图片压缩能够有效的缓解这个问题。

除了通过gulp-imagemin来压缩图片，还可以通过在线压缩网站和软件来进行压缩。网上有很多这样的工具，挑选一款适合自己的就行。

一个在线压缩的网站。压缩后的图片也保留了很高的质量，在知乎上很多人推荐，不过免费版有限制。

tinypng

imgbot 是一款 Github 插件。

安装后，你上传图片到 Github 去，imgbot 会自动压缩图片并推送 PR，我们只需要合併 PR 就行

你可以配置 imgbot 的侦测方法、压缩方法（有损/无损），具体可以查看插件的文档

插件推荐

可以把链接permalink转为数字的插件，配置容易，生成时自动转为数字。

hexo-generator-feed

生成RSS文件的插件

hexo-filter-nofollow

为网站使用到的所有外链添加rel=”noopener external nofollow noreferrer”, 可以有效地加强网站SEO和防止权重流失

hexo-generator-sitemap

生成sitemap的插件

hexo-generator-baidu-sitemap

看名字就知道，是专门为百度生成sitemap的插件

评论系统

Valine

https://blog.csdn.net/weixin_34434736/article/details/113047474

Twikoo

Twikoo 私有部署

给你的评论添加一个输入提醒吧 | Leonus

在线聊天

看配置文件中的官方地址即可

友链朋友圈

项目部署

前端部署

收录

Hexo系列：（四）Hexo博客提交百度和Google收录 - 简书

Hexo博客百度谷歌收录 | 哆啦 C 梦

参考文章

Butterfly 安裝文檔(六) 進階教程 | Butterfly

Butterfly添加全局吸底Aplayer教程 | Butterfly

教程：hexo-githubcalendar 插件 1.0 | 小冰博客

教程：hexo-electric-clock 电子时钟插件 | 小冰博客