回到文章目录

你用的还是 Hexo 默认的主题，现在我们来切换更好看的主题。

Butterfly - A Simple and Card UI Design theme for Hexo

首先，由于我时间有限，本文只能教学一些简单的配置，希望根据本文的思路，你可以逐渐找到跟着官网配置的方法。许多你需要解决的问题可能都在官网可以找到解决方案。

安装 Butterfly

1
2
3
cd {你的博客目录}/{你的博客名称}
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save
  • 更改 _config.yml 主题配置
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape                                # 改为 butterfly

Hexo 试运行 Butterfly 主题

注：打开 hexo s 可以实时查看主题变化。

配置 Butterfly

  • 将 theme/butterfly/_config.yml 重命名为 _config.butterfly.yml 并复制到个人博客根目录。

  • 此时 _config.butterfly.yml 的优先级将高于 theme/butterfly/_config.yml，之后我们的所有配置都将在 _config.butterfly.yml 中进行，而如果配置错了，可以去 theme/butterfly/_config.yml 找回。

  • butterfly 可用选项非常多，有约 1000 行，但是全文注释非常详细，还有详细文档 Butterfly 安裝文檔。右下角有简繁体切换。

Butterfly.yml 默认配置预览

CDN 内容源

  • 为 Butterfly 提供图标源的 jsdelivr，在国内寄了，因此需要将 CDN 改为本地并按提示安装 hexo-butterfly-extjs 。

配置文件

  • 全文搜索 # CDN 快速定位。
  • CDN.third_party_provider = jsdelivr
1
2
3
4
5
6
7
8
9
10
11
12
13
# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
  # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主題只能設置為 local )
  internal_provider: local

  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # when set it to local, you need to install hexo-butterfly-extjs
  third_party_provider: jsdelivr                                        # 改为 local
1
npm install hexo-butterfly-extjs  # 安装 hexo-butterfly-extjs

新建页面

  • source 中的每一个目录就是一个页面，当然 _ports、_draft 除外。

  • 目录包括七个页面：

页面 目录 类型
首页 无 内建页面
归档 无 内建页面
标签 tags 关联页面
分类 categories 关联页面
ToDo todo 普通页面
留言板 contact 普通页面
关于 about 普通页面

  • 内建页面 不需要在本地创建任何目录，它由 Butterfly 自动生成。

  • 普通页面 直接使用 hexo new page 新建即可，普通页面的名称、内容不受约束。

  • 关联页面 首先使用 hexo new page 新建，必须是 Butterfly 支持的页面，需要添加头部 YAML，文章不可包含内容。

命令行：

1
2
3
4
5
hexo new page "tags"
hexo new page "categories"
hexo new page "todo"
hexo new page "contact"
hexo new page "about"

tags/index.md：

1
2
3
4
5
6
---
title: 标签
date: 2022-02-05 18:29:52
type: "tags"
layout: "tags"
---

categories/index.md：

1
2
3
4
5
6
---
title: 分类
date: 2022-02-05 18:30:37
type: "categories"
layout: "categories"
---
  • 关联页面必须包含 type 和 layout，普通页面建议修改 title。

配置文件

  • 全文搜索 # Menu 快速定位。
1
2
3
4
5
6
7
# Menu 目录 (格式)
menu:
  {标题}: {目录} || fas fa-{图标}
  {二级菜单} || fas fa-{图标}:
    {标题}: {目录} || fas fa-{图标}
    {三级菜单} || fas fa-{图标}:
        {标题}: {目录} || fas fa-{图标}
1
2
3
4
5
6
7
8
9
10
# Menu 目錄
menu:
  首页: / || fas fa-home
  文章||fas fa-book:
    归档: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open
    ToDo: /todo/ || fas fa-list-alt
  留言板: /contact/ || fas fa-comments
  关于: /about/ || fas fa-heart

Search 搜索

安装依赖

  • 安装 hexo-generator-search 用于本地搜索。
1
npm install hexo-generator-search --save
  • 安装 hexo-algoliasearch 用于其他搜索（可选）。
1
npm install hexo-algoliasearch --save

配置文件

  • 全文搜索 # search 快速定位。
  • local_search.enable = true，其余看个人喜好。
  • 该配置需要 hexo clean。
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
# search (搜索)
# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
# --------------------------------------

# Algolia search
algolia_search:
  enable: false
  hits:
    per_page: 6

# Local search
local_search:
  enable: false                                                            # 改为 true
  # Preload the search data when the page loads.
  preload: false
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  CDN:

# Docsearch
docsearch:
  enable: false
  appId:
  apiKey:
  indexName:
  option:

Image 图片

内容过多，请自行阅读官方文档。

Butterfly 安裝文檔(三) 主題配置-1 | Butterfly - 頭像

从这里开始你需要合理的管理站点资源，推荐将图片放在 source/img 目录下或云端稳定的图床上。如果在本地，后面预览网页可能会比较麻烦。

背景特效

这里选择一部分介绍。

  • 静止彩带背景
1
2
3
4
5
6
7
8
9
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: false
  • 默认暗黑主题
1
2
3
# Default display mode (網站默認的顯示模式)
# light (default) / dark
display_mode: dark
  • 首页循环打字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option: loop
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 找点好玩的去~
    - 搞点好吃的去~
    - 遇事不决，埋头就睡。
    - Hey! 你在看什么？

​Butterfly 主题还有很多功能等待你发现。