手把手教你搭建个人博客（第二期）

Butterfly 官网： https://butterfly.js.org/

hexo提供的静态页面已适用于个人博客的大多数使用场景，而自定义主题可以丰富个人博客的风格，butterfly就是其中之一，除此之外，GitHub上还有很多其他风格的主题可供使用，请小伙伴们自行查阅。

本博客使用的是butterfly的主题，下面将进行 hexo 框架配置butterfly主题的操作展示，当然，也可以通过 butterfly 官网 的官网操作文档进行操作，丰俭由人。

修改 _config.yml 文件

如果有需要，可自行参照Hexo的官方文档进行详细操作，本博客仅进行少量修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Site
title: 博客名字
subtitle: ''
description: 博客描述（副标题）
keywords:
author: 作者名字
language: zh-CN（中文）
timezone: Asia/Shanghai（时区）

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url:  换成你的 xxx.github.io 地址
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

修改后记得重新本地运行，查看博客是否能正确运行

安装butterfly

  1. 打开 webstrom 的 终端（explore）页面，输入命令下载butterfly
1
npm i hexo-theme-butterfly

  1. 安装完成后， 在 node_modules 文件夹中寻找 hexo-theme-butterfly 文件（会有很多文件，慢慢找），找到后将整个文件移动到和 node_modules 文件夹同级的 themes 文件夹中， 并更名为butterfly（你喜欢改啥都行，不改也行）。

  2. 打开这个 butterfly 文件夹，将这个文件夹的 _config.yml 文件复制一份，粘贴到Blog这一级目录下，并更名为 _config.butterfly.yml

  3. 打开 _config.yml 文件， 使用 ctrl + r 找到 theme， 将主题改为 butterfly

1
theme: butterfly

为避免误会，在此特别说明一下： 完成步骤3后，Blog目录下应该会出现三个 yml 文件 ：

  • _config.yml
  • _config.butterfly.yml
  • _config.landscape.yml

配置butterfly

打开 webstrom 的 终端（explore）页面，输入命令对butterfly进行一些属性配置，更多效果可访问 butterfly官网 进行配置

标签页

1
hexo new page tags

分类页

1
hexo new page categories

友情链接

第一步：运行命令

1
hexo new page link

命令运行后，会找到 source/link/index.md 这个文件，打开这个文件添加 type: "link" ， 便签页、分类页都可以加

第二步：在Hexo博客目录中的 source/_data (如果没有 _data 文件夹,请自行创建)，创建一个文件 link.yml ，在文件 link.yml 添加（可自定义）：

1
2
3
4
5
6
7
- class_name: 类别名
  class_desc: 类别描述
  link_list:
    - name: 名字
      link: 网站
      avatar: 网站logo（头像）
      descr: 描述

导航菜单

修改主题配置文件 _config.butterfly.yml， 文字可自行更改，详情可参考 官方文档 ，这里我定义的是：

1
2
3
4
5
6
7
8
9
10
11
12
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
#  清单||fa fa-heartbeat:
#    音乐: /music/ || fas fa-music
#    照片: /Gallery/ || fas fa-images
#    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart
  留言板: /comments/ || fas fa-envelope

本地搜索系统

  1. 安装依赖，打开 webstrom 的 终端（explore）页面，输入命令：
1
npm install hexo-generator-search --save
  1. 注入配置，修改站点配置文件 _config.yml ，添加如下代码：
1
2
3
4
search:
  path: search.xml
  field: post
  content: true
  1. 主题中开启搜索：在主题配置文件 _config.butterfly.yml 中修改以下内容：
1
2
3
4
5
# Local search
local_search:
  enable: true
  preload: false
  CDN:
  1. 重新编译运行，即可看到效果

代码

代码高亮主题

Butterfly 支持 6 种代码高亮样式，你可以理解为展示代码的风格主题（darker / pale night / light / ocean / mac / mac light）

修改主题配置文件 _config.butterfly.yml 中的 highlight_theme 属性，即可修改代码风格：

1
highlight_theme: darker #  darker / pale night / light / ocean / mac / mac light / false

代码复制

修改主题配置文件 _config.butterfly.yml 中的 highlight_copy 属性，true 表示可以复制

1
highlight_copy: true # copy button

代码框展开/收起

修改主题配置文件 _config.butterfly.yml中的 highlight_shrink 属性

1
highlight_shrink: true # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击 > 可展开代码。

  • true 全部代码框不展开，需点击 > 打开
  • false 代码框展开，有 > 点击按钮
  • none 不显示 > 按钮

代码换行

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

修改主题配置文件 _config.butterfly.yml 中的 code_word_wrap 属性

1
code_word_wrap: true

代码高度限制

配置代码高度限制，超出的部分会隐藏，并显示展开按钮

1
highlight_height_limit: false # unit: px
  1. 单位是 px，直接添加数字，如 200
  2. 实际限制高度为 highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代码高度只超出 highlight_height_limit 一点时，出现展开按钮，展开没内容。
  3. 不适用于隐藏后的代码块（ css 设置 display: none）

网站副标题

网站副标题就是打字效果的实现

修改主题配置文件 _config.butterfly.yml 中的 subtitle

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
  # Effect Speed Options (打字效果速度參數)
  startDelay: 300 # time before typing starts in milliseconds
  typeSpeed: 150 # type speed in milliseconds
  backSpeed: 50 # backspacing speed in milliseconds
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 一个不想写bug的乖小孩

页面加载动画

当进入网页时，因为加载速度的问题，可能会导致 top_img 图片出现断层显示，或者网页加载不全而出现等待时间，开启 preloader 后，会显示加载动画，等页面加载完，加载动画会消失

修改主题配置文件 _config.butterfly.yml 中的 preloader

1
2
3
# Loading Animation (加載動畫)
preloader:
  enable: true

字数统计

  1. 打开 webstrom 的 终端（explore）页面，输入命令下载字数统计依赖
1
npm install hexo-wordcount --save
  1. 开启配置：修改主题配置文件 _config.butterfly.yml 中的 wordcount
1
2
3
4
5
6
7
# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true