Butterfly主题介绍

官方文档：Hexo Butterfly 主题官方文档

GitHub 仓库：Hexo Butterfly 主题 GitHub 仓库

Hexo官网上面有非常多好看的主题，你可以选择自己喜欢的主题下载下来放到 themes文件夹下面

比较好看的主题有 Butterfly、Fluid、Matery、Kira 、Ayer 、Annie 。

Hexo Butterfly 主题是一个基于 Hexo 博客框架的优雅、简洁且功能丰富的主题。它受到了 Butterfly 主题的启发，提供了许多现代化的设计和功能，使得博客搭建和维护变得更加便捷和美观。以下是 Hexo Butterfly 主题的一些主要特点：

  1. 美观的设计：Hexo Butterfly 主题采用了现代化的设计风格，提供了多种配色方案和布局选项，可以根据个人喜好进行定制。
  2. 响应式设计：主题支持响应式设计，可以在不同设备上（如桌面、平板和手机）提供良好的阅读体验。
  3. 丰富的插件支持：Hexo Butterfly 主题集成了许多实用的插件，如搜索功能、评论系统、标签云、归档页面等，方便用户快速搭建功能齐全的博客。
  4. SEO 优化：主题内置了 SEO 优化功能，可以帮助博客在搜索引擎中获得更好的排名。
  5. 多语言支持：Hexo Butterfly 主题支持多语言，可以根据需要切换不同的语言显示。
  6. 自定义配置：主题提供了丰富的配置选项，用户可以通过修改配置文件来调整主题的外观和功能。
  7. 社区支持：Hexo Butterfly 主题拥有活跃的社区支持，用户可以在社区中获取帮助、分享经验和交流技巧。

a

基础配置

首先点击 官方下载地址 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。

当然你也可以使用 git clone 命令来下载，例如下载Butterfly主题

1
2
$ cd blog
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

然后修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: butterfly

按照官方建议，为了减少升级主题后带来的不便，可以将主题配置复制到与主配置同级目录内

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml)

注意： 不要把主题目录的 _config.yml 删掉

注意： 以后只需要在 _config.butterfly.yml 进行配置就行。
如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

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

image-20231227111143672

网站背景

可以是网络地址，也可以是文件相对路径

1
2
# The banner image of home page
index_img: /img/bg.jpg

一般情况下，source目录为资源文件根目录

image-20231229173121194

效果如下

image-20231229173400619

头像

修改 主题配置文件

1
2
3
avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

image-20231229174646391

网站图标

1
favicon: /img/avatar.png

导航栏设置

1
2
3
4
nav:
  logo: /img/avatar.png # image
  display_title: true
  fixed: false # fixed navigation bar

image-20231229175005011

目录

image-20240410141110170

image-20240410141501281

社交图标

Butterfly支持 font-awesome v6 图标.

书写格式 图标名：url || 描述性文字 || color

1
2
3
social:
  fab fa-github: https://github.com/xxxxx || Github || "#hdhfbb"
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email || "#000000"

图标名可在这寻找

image-20231227113027323

配置文章链接转数字或字母

hexo-abbrlink

1
$ npm install hexo-abbrlink --save

在 _config.yml文件中进行配置：

1
2
3
permalink: posts/:abbrlink/ 
# or
permalink: posts/:abbrlink.html

新增以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  # Generate categories from directory-tree
  # depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
     enable: true  #true(default)
     depth:        #3(default)
     over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.

设置关于页、分类页、标签页

butterfly 主题默认带有不少菜单，如关于（about）、分类（categories）、标签（tags）等，默认处于注释状态，将需要取消的菜单注释掉，然后生成相应的 page 即可。

image-20240229224058010

打开 ~\themes\butterfly\_config.yml 文件，找到 menu 相关的设置，取消掉需要的菜单项的注释。重新生成部署后，可以看到新增的菜单项

image-20240229224330301

但是单击后会报如下错误

image-20240229224359976

1
2
3
Cannot GET /about/
Cannot GET /tags/
Cannot GET /categories/
  1. 这是因为还需要运行如下命令新建相关 page
1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"
  1. 新建 page 后，会在 source 目录下新建 about、tags、categories文件夹，每个文件夹下还会创建一个index.md文件表示关于、标签页分类页面，编辑这三个MarkDown文件可以自定义这三个页面的内容.
  2. 最后一步，编辑各页面对应的index.md文件，增加 type 即可。注意冒号 : 后必须空一格，title 和 date 是默认生成的。重新部署后能够看到效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: about
date: 2021-03-13 15:21:30
type: "about"
---
 
---
title: tages
date: 2021-03-13 15:21:30
type: "tags"
---
 
---
title: categories
date: 2021-03-13 15:21:30
type: "categories"
---
  1. 在新建博文的头部，直接输入该博文的分类、标签等即可。分类只能有一个，标签能有多个，多个标签不能一行，注意下面的格式。
1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Hello World # 标题
date: 2019/3/26 hh:mm:ss # 时间
categories: # 分类
	- 分类  # 只能由一个
tags: # 标签
	- PS3  # 能有多个
	- Games  # 一个标签一行
---

摘要
<!--more-->
正文

设置好后重启生效，效果如下：

image-20240229225113589

可以根据需要更改目录显示名和页面titile更改标题

image-20240229230330445

效果如下

image-20240229230711688

相册

可参考 Hexo添加相册

在主题配置里添加相册目录

image-20240317221036623

在 blog\source目录下新建一个目录用于存放相册文件，例如 gallery

image-20240317222422995

在其子目录下新建 index.html 或者 index.md文件

写法如下

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
  • name：图库名字
  • description：图库描述
  • link：连接到对应相册的地址
  • img-url：图库封面的地址

例如：

1
2
3
<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/gallery/wallpaper' https://img2023.cnblogs.com/blog/2233039/202403/2233039-20240301000822337-2125206689.jpg %}
</div>

image-20240410114016522

Group Image Gallery
壁纸

收藏的一些壁纸

新建一个.md文件用于存放预览的图片，文件名称与目录中引用的路径名称一致，例如 wallpaper.md

image-20240317222954041

引入需要预览的图片，格式如下：

1
2
3
{% gallery [lazyload],[rowHeight],[limit] %}
markdown 图片格式
{% endgallery %}

说明：

参数 解释
lazyload 【可选】点击按钮加载更多图片，填写 true/false。默认为 false。
rowHeight 【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 220。
limit 【可选】每次加载多少张照片。默认为 10。

其他示例：

1
2
3
4
5
6
7
8
9
10
11
{% gallery %}
markdown 图片格式
{% endgallery %}

{% gallery true,220,10 %}
markdown 图片格式
{% endgallery %}

{% gallery true,,10 %}
markdown 图片格式
{% endgallery %}

如下：

image-20240317223026620

重新执行 hexo g 生成网页文件，即可预览

相册也可在其他文章中引用

image-20240317222704558

展示效果如下

image-20240317222728162

评论

其他配置可参考

Hexo基于LeanCloud搭建评论功能

Hexo基于Gitalk搭建评论功能

Twikoo文档

开启双评论

最多支持两种评论系统

image-20240410135508689

开启双评论后如下所示

image-20240410135939306

设置文章隐藏评论

某些文章我们不希望显示评论，例如标签页，只需在文章源信息上添加 comments: false 即可

image-20240410135610619

系列文章

在页面上显示系列文章

image-20240624123742022

修改 主题配置文件

1
2
3
4
5
6
# series (系列文章)
series:
  enable: true
  orderBy: 'title' # Order by title or date
  order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
  number: true

在文章的 front-matter 上添加参数 series，并给与一个标识

image-20240624124447103

使用此标签外挂，会把相同标识的文章以列表的形式展示

写法：

1
2
{% series %}
{% series [series name] %}

如果不写 series 标识，则默认为你使用此标签外挂所在的文章的 series 标识

插件

本地搜索

hexo-generator-search

1
$ npm install hexo-generator-search --save

在 _config.yml文件中进行配置：

1
2
3
4
5
# 本地搜索
search:
  path: search.xml
  field: all
  content: true

主题的配置文件也需修改，此处仍以Butterfly主题为例，修改 _config.butterfly.yml配置信息

1
2
3
# Local search
local_search:
  enable: true

Aplayer 音乐播放器

hexo-tag-aplayer

安装插件

1
npm install hexo-tag-aplayer --save

修改主题配置文件：

1
2
3
aplayerInject:
  enable: false
  per_page: true
1
2
3
4
5
6
7
8
9
10
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
    # aplayer音乐
    - <div class="aplayer no-destroy" data-id="10051718332" data-server="netease" data-type="playlist"   data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div>

修改以下参数配置自己喜欢的歌单

id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease(即网易), tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist

以网易云为例，登录网易云网页版，找到自己的歌单，可以在浏览器地址栏查看歌单播放列表id

image-20240514141138279

百度主动推流

1
npm install hexo-baidu-url-submit --save
1
2
deploy:
  - type: baidu_url_submitter # 百度主动推送

live2d

1
2
3
4
# 安装live2d
npm install --save hexo-helper-live2d
# 安装模型
npm install --save live2d-widget-model-koharu

在 _config.yml文件中进行配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true #开关插件版看板娘
  scriptFrom: local # 默认
  # scriptFrom: https://cdn.cbd.int/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-koharu # npm-module package name
    # use: https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json # 你的自定义 url
  display:
    position: left #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
  mobile:
    show: false # 手机中是否展示

sitemap

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save-dev

在 _config.yml文件中进行配置：

1
2
3
4
5
6
7
8
9
10
# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
  path: sitemap.xml
  rel: false
  tags: true
  categories: true
  
# https://github.com/coneycode/hexo-generator-baidu-sitemap
baidusitemap:
    path: baidusitemap.xml

Rss

1
npm install hexo-generator-feed --save

在 _config.yml文件中进行配置：

1
2
3
4
5
6
7
# https://github.com/hexojs/hexo-generator-feed
#Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20
rss: /atom.xml

追番插件

1
npm install hexo-bilibili-bangumi --save
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
# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
  enable: true
  path:
  vmid: 372204786
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: false
  loading:
  metaColor:
  color:
  webp:
  progress:
  extra_options:
    key: value
cinema: # 追剧设置
  enable: false
  path:
  vmid: 372204786
  title: '追剧列表'
  quote: '生命不息，追剧不止！'
  show: 1
  lazyload: true
  loading:
  metaColor:
  color:
  webp:
  progress:
  extra_options:
    key: value

主题配置文件开启懒加载

1
2
3
4
# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true

参考

Butterfly

使用Hexo免费搭建个人博客教程