建议

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

音乐

音乐界面使用了插件 hexo-tag-aplayer
使用方法请参考插件文档

音乐页面只是普通的page页，按普通页面操作生成就行。

以下内容可供选择配置

注意： 仍需要安装插件hexo-tag-aplayer

插件会在每一个文件都插入 js 和 css，为了避免这一情况，3.0 版本内置了 aplayer 需要的 css 和 js。

首先在Hexo根目录_config里配置asset_inject为false

1
2
aplayer:
  asset_inject: false

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

1
aplayer: true

这样只会在需要aplayer的页面插入js和css。

如何添加全局 Aplayer 播放，请参考 这篇文章

Butterfly添加全局吸底Aplayer教程

如果你想使用 aplayer，很多人都会推荐安装 hexo-tag-aplayer 这款插件。这款插件通过 Hexo 独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的 html。如果你只是使用一些简单的功能，其实无需使用到这个插件，只需以 html 格式书写就行，不用插件去转换。

例如：

如果使用插件，在 markdown中要这样写

1
{% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

其会被插件渲染为

1
<div id="aplayer-uxAIfEUs" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#3F51B5"></div>

如果我们不想使用插件，就需要在markdown中用html的格式书写，同时把主题配置文件中的aplayerInject开启

1
<div class="aplayer" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mutex="true" data-preload="auto" data-theme="#3F51B5"></div>

这样我们就可以不用使用多一个插件，当然这种东西见仁见智，选自己喜欢的就行。

回到正题，这篇文章将教大家如何在Butterfly上使用全局吸底 Aplayer

关闭 asset_inject

此步骤适用于安装了 hexo-tag-aplayer 插件的人

由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为 false

在 Hexo 的配置文件中

1
2
aplayer:
  asset_inject: false

开启主题的 aplayerInject

在主题的配置文件中，enable 设为 true 和 per_page 设为 true

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

插入 Aplayer html

为了适配 hexo-tag-aplayer，主题内置的 Meting js 仍为 1.2 版本，并非最新的 2.x 版本。

Aplayer html 例子：

1
<div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

参数解释

option default description
data-id require song id / playlist id / album id / search keyword
data-server require music platform: netease(网易云), tencent（qq音乐）, kugou, xiami, baidu
data-type require song, playlist, album, search, artist
data-fixed false enable fixed mode
data-mini false enable mini mode
data-autoplay false audio autoplay
data-theme #2980b9 main color
data-loop all player loop play, values: ‘all’, ‘one’, ‘none’
data-order list player play order, values: ‘list’, ‘random’
data-preload auto values: ‘none’, ‘metadata’, ‘auto’
data-volume 0.7 default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
data-mutex true prevent to play multiple player at the same time, pause other players when this player start play
ata-lrctype 0 lyric type
data-listfolded false indicate whether list should folded at first
data-listmaxheight 340px list max height
data-storagename metingjs localStorage key that store player setting

require 代表着这些参数是必须要使用的，其它的参数则可以根据自己需要配置。

配置全局吸底，data-fixed 和 data-mini 也必须配置，配置为 true

如果使用 Pjax，则在 class 里需添加 no-destroy，这样防止切换页面时 Aplayer 被销毁

把 aplayer代码 插入到主题配置文件的 inject.bottom 去

1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

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

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

电影

电影界面使用了插件 hexo-butterfly-douban

使用方法请参考插件的文档。

注意：

  1. hexo-butterfly-douban 会主动生成页面，所以不需要自己创建。
  2. 如遇到无法抓取问题，显示 INFO 0 movies have been loaded in xxx ms, because you are offline or your network is bad
    请过段时间再试试，这我也无能为力。

説説

Artitalk

安装插件 hexo-butterfly-artitalk

具体配置查看插件文档

HexoPlusPlus Talk

安装插件 hexo-butterfly-hpptalk

具体配置查看插件文档

自定义侧边栏

自定义 widget

如果你想添加自己的内容到侧边栏去，你可以自定义。

创建 widget.yml

在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:

参数详解
op: 创建的 widget 会出现在非 sticky 区域（即所有页面都会显示)

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

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

生成的 代码 为

1
2
3
4
5
6
7
8
9
<div class="card-widget 所写的 class_name" id="所写的 id_name" style="order: 所写的 order">
    <div class="item-headline">
        <i class="所写的 icon"></i>
        <span>所写的 name</span>
    </div>
    <div class="item-content">
        所写的 html
    </div>
</div>

Icon

Butterfly主题内置了Font Awesome V5 图标，目前已更新到 5.13.0，总共有1,588个免费图标。由于是国外的图标网站，对于国内的一些网站Icon并不支持。如有需要，你可以引入其它的图标服务商。

iconfont

国内最出名的莫过于iconfont,功能很强大且图标内容很丰富的矢量图标库。很多Font Awesome不支持的图标都可以在这里找到。同时，iconfont支持选择需要的图标生成css链接，减少不必要的CSS加载。

注册账号

打开iconfont的网站，点击导航栏的人像图标，会跳出注册界面，按要求注册账号。

添加图标入库

选择自己需要的图标，把鼠标移到图标上，会显示三个按钮（依次是添加入库、收藏和下载），而我们需要的是把图标添加入库

添加入库后，你可以看到网站右上角购物车图标显示了1字，代表图标已经添加入库，点击购物车图标，会弹出侧边栏显示详情。

已选择的图标会显示在上面，你可以重复上面的操作，把需要的图标添加入库，然后点击添加到项目。

接下来会要求选择项目名称，没有的自己创建一个。

生成CSS链接

在添加到项目之后，会跳到项目的详情界面。点击Font class，然后再点击暂无代码，点击生成文字。网站会自动生成CSS链接，我们只需要复制链接就行。

添加链接进主题配置文件

打开主题配置文件，找到inject配置，按要求把链接填入


在我们需要使用的地方填入icon，例如Menu，图片使用格式为iconfont icon名字

运行Butterfly之后，你就可以看到menu的图标生效了

其他添加方法

除了通过引入CSS链接使用图标，iconfont也支持通过其它方法使用图标，具体可查看iconfont官方使用文档

图片压缩

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

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

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

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

开源软件，支持Windows和macOS。可以批量压缩软件，无限制。

插件推荐

hexo-abbrlink

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

hexo-generator-feed

生成RSS文件的插件

hexo-filter-nofollow

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

hexo-generator-sitemap

生成sitemap的插件

hexo-generator-baidu-sitemap

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