Intro

本篇文章将作为 Hexo 博客搭建的第二部分。

主要内容是对 Butterfly 主题进行配置，并且修改一些主题源码来实现自定义的样式。

Butterfly 所提供的主题配置文件行数近千，想要介绍完每一项具体配置难度较大。

所以说本篇文章只会针对本博客所使用到的配置进行介绍，最终配置完成后基本达到与本博客样式一致。

如果想要对 Butterfly 主题进行其他配置，强烈推荐阅读官方文档，地址是：https://butterfly.js.org/

创建主题配置文件

1.打开[博客目录]\themes\butterfly文件夹，将其中的文件_config.yml进行复制。

2.回到[博客目录]下，将复制的_config.yml文件粘贴到根目录下，并且重命名为_config.butterfly.yml，注意不要覆盖原有的_config.yml文件。

最后，在[博客目录]下应该同时存在_config.yml和_config.butterfly.yml两个文件，分别为Hexo博客的配置文件与Butterfly主题的配置文件。

修改Hexo博客配置文件

修改Hexo博客配置文件即对_config.yml这个文件进行修改，所以说下边进行的修改都需要在_config.yml中完成。

使用[ ]框起来的字段为需要修改的字段，修改为自己的内容时不需要添加[ ]。

修改博客基本信息

1
2
3
4
5
6
7
8
# Site
title: [博客名称]
subtitle: [博客子标题] #可以为空
description: [博客名称]
keywords: [博客名称]
author: [博客名称]
language: zh-CN  #博客所使用的语言
timezone: 'Asia/Shanghai' #博客所使用的时区

修改博客地址

1
url: [这里填博客的url地址] #格式为：http://example.com

添加RSS链接

1.在博客目录下的CMD窗口中安装插件

1
npm install hexo-generator-feed --save

2.在_config.yml中添加以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# RSS
feed:
  enable: true
  type: atom
  path: atom.xml #RSS文件路径
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: /img/avatar.png
  autodiscovery: true
  template:

3.修改Actions文件，即.github\workflows目录下的deploy.yml文件。

1
2
3
4
5
6
- name: Install Dependencies
  run: |
    npm install
    npm install hexo-generator-feed --save #添加此内容
    npm install hexo-renderer-pug hexo-renderer-stylus --save
    npm install -g hexo-cli

4.在CMD窗口运行以下命令，运行博客进行测试。

1
hexo clean & hexo server

打开浏览器访问http://localhost:4000/atom.xml链接，显示以下相似内容即为成功。

测试没问题就可以回到CMD窗口，同时按下ctrl+c键结束运行，继续接下来的修改

主页设置

1
2
3
4
5
# Home page setting
index_generator:
  path: '' #博客根目录路径，默认即可
  per_page: 6 #主页分页文章数量，可以设置成自己觉得合适的数量
  order_by: -date #文章排序方式，默认即可

分页设置

1
2
3
# Pagination
per_page: 6 #这里设置其他页面的分页文章数量
pagination_dir: page

至此，关于Hexo博客的基本配置就完成了，其他需要修改的地方可以自行参考Hexo官网文档，地址是：https://hexo.io/zh-cn/docs/

修改Butterfly 主题配置文件

这部分修改的内容较多，可以按着自己喜欢的博客样式进行修改，这里给出本博客修改的相关配置。

导航栏

1
2
3
4
nav:
  logo: #Logo地址
  display_title: true #显示标题
  fixed: false #是否固定导航栏

导航目录

即设置顶部右上方区域的这块内容

这里给出本博客的配置

1
2
3
4
5
6
7
8
9
10
# Menu 目錄
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart
#格式如下：
# [标题]: [路径] || [图标]

这里的目录中，tags、categories、link、about目录默认不存在，需要在CMD窗口中使用命令生成对应页面

1
2
3
4
hexo new page tags
hexo new page categories
hexo new page link
hexo new page about

之后给创建的页面设置成对应的页面类型

标签页

打开[博客目录]\source\tags\index.md文件，进行编辑。

1
type: "tags" #页面类似设置为tags

分类页

打开[博客目录]\source\categories\index.md文件，进行编辑。

1
type: "categories" #页面类似设置为categories

友链页

打开[博客目录]\source\link\index.md文件，进行编辑。

1
type: "link" #页面类似设置为link

此外，还需要创建一个用于存放友情链接的页面。

创建文件夹，目录为[博客目录]source/_data，之后在这个文件夹创建一个名为link.yml的文件，打开并编辑。

1
2
3
4
5
6
7
8
9
10
11
12
#按着以下格式进行添加
- class_name: [分类名称]
  class_desc: [分类描述]
  link_list:
    - name: [网站名称 1]
      link: [网站地址 1]
      avatar: [网站头像 1]
      descr: [网站描述 1]
    - name: [网站名称 2]
      link: [网站地址 2]
      avatar: [网站头像 2]
      descr: [网站描述 2]

社交图标

1
2
3
4
5
social:
  fab fa-github: https://github.com/[usename]/ || Github || '#24292e'
  fas fa-envelope: mailto:[email] || Email || '#24292e'
#格式如下：
# [图标]：[url链接] || [描述] || [颜色]

默认图片

网站图标

1
2
# Favicon（網站圖標）
favicon: /img/favicon.ico #这里修改为自己的图标路径

这里修改的是此处的图标

设置头像

1
2
3
4
# Avatar (頭像)
avatar:
  img: /img/avatar.png #这里修改为自己的头像图片路径
  effect: false #这里的禁止旋转是禁止的头像自动旋转

这里修改的是此处的头像

页面头图设置

1
2
3
4
5
index_img: /img/background.jpg #主页的头图
default_top_img: /img/background.jpg #默认的头图
archive_img: /img/background.jpg #归档页面的头图
tag_img: /img/background.jpg #标签页面的头图
category_img: /img/background.jpg #分类页面的头图

文章封面

1
2
3
4
5
6
7
cover:
  index_enable: true #主页是否显示文章封面图
  aside_enable: false #侧栏是否显示文章封面图
  archives_enable: false #归档页面是否显示文章封面图
  position: left #主页卡片文章封面的显示位置
  default_cover: #默认封面
    - /img/background.jpg

404页面

1
2
3
4
error_404:
  enable: true #启用404页面
  subtitle: '页面没有找到' #显示的文章内容
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png #显示的图片链接

分别对应这两处位置

页脚设置

1
2
3
4
5
6
footer:
  owner:
    enable: true
    since: 2024 #设置站点起始时间
  custom_text:
  copyright: true #是否显示框架和主题信息

分别对应页面底部的这两处

搜索功能

这里使用本地搜索功能进行实现

1
2
3
4
5
6
7
# Local search
local_search:
  enable: true #启用本地搜索
  preload: true #启用数据预加载，true时访问页面就会加载，false时点开搜索才会加载
  top_n_per_article: 1
  unescape: false
  CDN:

需要在博客目录下的CMD窗口中安装插件

1
npm install hexo-generator-searchdb --save

修改.github\workflows目录下的deploy.yml文件

1
2
3
4
5
6
7
- name: Install Dependencies
  run: |
    npm install
    npm install hexo-generator-searchdb --save #添加这一行
    npm install hexo-generator-feed --save
    npm install hexo-renderer-pug hexo-renderer-stylus --save
    npm install -g hexo-cli

博客配色

此处包含了几乎博客所能见到的所有配色配置，自行修改成自己喜欢的颜色就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"
  meta_theme_color_light: "ffffff"
  meta_theme_color_dark: "#0d0d0d"

博客背景

修改文章部分的博客背景

1
2
background: "#fbfdff"
#可以是图片，色值之类的参数

博客字体

1
2
3
4
5
font:
  global-font-size: 15px #这里设置字体大小
  code-font-size: 
  font-family: 'Noto Sans SC' #这里设置字体
  code-font-family:

修改CDN

主题配置文件中默认使用的CDN为jsdelivr,但是我在搭建的时候发现使用jsdelivr有几率无法访问，影响博客加载速度，遂换将CDN换成unpkg

1
2
3
CDN:
  internal_provider: local
  third_party_provider: unpkg #在此处进行修改

自定义美化

还有一些美化没有办法在主题配置文件中进行配置，只能通过修改主题源码进行修改，这里举几个例子。

禁止头像旋转

主题配置文件中虽然给了禁止头像自动旋转的选项，但是鼠标移动到头像上面时，还是会旋转头像。针对这个问题，进行以下修改。

打开[博客目录]\themes\butterfly\source\css\_layout\aside.styl这个文件，将.avater-img中的以下内容进行删除

1
2
&:hover
  transform: rotate(360deg)

禁止社交图标旋转

还是上边这个文件，将.card-info-social-icons中的以下内容进行删除

1
2
&:hover
  transform: rotate(360deg)

修改页脚版权信息

打开文件[博客目录]\themes\butterfly\layout\includes\footer.pug，进行以下修改

1
2
3
4
5
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `©${theme.footer.owner.since} - ${nowYear} ${config.author}`
    else
      .copyright!= `© ${nowYear} ${config.author} All rights reserved.`
#可以自定义成自己需要的内容

如果想要对博客进行其他修改，可以使用百度或者ChatCPT等工具来获取方法，这里不再赘述

测试并发布

在CMD窗口中运行服务器

1
hexo server

在浏览器访问http://localhost:4000/,查看更改是否生效，没问题后便可向Github仓库提交更改，Actions将会自己发布修改后的博客到Cloudflare Pages。

1
2
3
git add .
git commit -m "配置主题"
git push

End

到这篇文章结尾，Hexo博客的基本配置已经结束了，下一篇文章将分享如何给Hexo博客配置Twikoo评论系统。

文章篇幅有限，还有许多配置没有介绍到，如果要对博客进行更加深入的配置，一定要仔细阅读官方文档，善用搜索引擎，才能使你的博客不断完善。

如果你在文章中发现有什么问题，或者有什么疑问，欢迎在评论当中指出。