参考

可以参考官方的文档 https://butterfly.js.org/posts/dc584b87/

在之前的博客里已经介绍过如何对一些基本的，如网站名称以及作者名称等的配置，这里就不赘述了。 https://www.housnk.cn/2022/08/23/关于Hexo中的_config配置文件/

标签页

标签与分类的概念很容易混淆。

在博客的根目录下，使用终端输入：

1
hexo new page tags

这样就能在以下路径创建标签页的配置文件:
source/tags/index.md

紧接着我们修改该 tags/index.md ,为其添加类型声明 type: “tags” ,如下所示：

1
2
3
4
5
---
title: 此处的标题可以任意更改
date: 2022-08-26 13:47:42
type: "tags"
---

分类页

在博客的根目录下，使用终端输入：

1
hexo new page categories

这样就能在以下路径创建分类页的配置文件:
source/categories/index.md
打开并修改其中的配置：

1
2
3
4
5
---
title: 分类页
date: 2022-08-26 14:22:48
type: "categories"
---

友情链接

在博客的根目录下，使用终端输入：

1
hexo new page link

这样就能在以下路径创建分类页的配置文件:
source/link/index.md
打开并修改其中的配置：

1
2
3
4
5
---
title: 友情链接页
date: 2022-08-26 15:34:23
type: "link"
---

接着在source/路径下新增文件夹_data。紧接着在source/_data/路径下新增link.yml文件。
配置友情链接的内容，link.yml文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- class_name: 友情鏈接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、簡單且強大的網誌框架

- class_name: 網站
  class_desc: 值得推薦的網站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 視頻網站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中國最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

其中，值得留意的是，class_name 和 class_desc 支持 html 格式编辑，如不需要，也可以留空。

404配置

将/themes/butterfly/_config.yml该路径下的配置文件复制到博客的根目录下，并重命名为_config.butterfly.yml(因为使用的是butterfly主题，所以这样命名)

打开修改其中关于 error_404:的配置为如下：

1
2
3
4
5
6
7
8
9
10
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

# A simple 404 page
error_404:
  enable: true
  subtitle: '当前页面没有找到'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

后续

接下来的文章配置可以参考
(https://butterfly.js.org/posts/4aa8abbe/)

首页菜单的配置

修改上个小单元中根目录下的_config.butterfly.yml文件，找到 menu: 项目。
要严格遵守其中的缩进规则，不然会解析错误。

1
2
menu:
  主页: / || fas fa-home

格式说明:
主页:首页菜单上显示的标题
/:表示的是路径
||: 路径与图标之间的分隔符
fas fa-home: 图标样式

二级菜单目录的写法

1
2
3
推荐||fas fa-list:
  学习: /music/ || fas fa-music
  娱乐: /movies/ || fas fa-video

代码块的书写配置

代码相关的配置在_config.butterfly.yml中的Code Blocks (代碼相關)中。
在这个文件中配置是针对全站生效的。

1
2
3
4
5
6
highlight_theme: 代码块外观的样式
highlight_copy: 是否显示代码一键复制按钮
highlight_lang: 是否显示代码使用的编程语言
highlight_shrink: 是否展开代码块，false的样式是自动打开状态的，如果是true，样式则是代码被收起，需要用户手动点击代码块才会展开。
highlight_height_limit: 代码块太长的时候启用限制的最大高度
code_word_wrap: 代码横向太长的时候的滑动条，false的时候是有滑动条的，true的时候，则滑动条隐藏。此时需要修改配置文件中"line number ：false",这样，横向太长的代码会自动换行，

其中，如果想要针对highlight_shrink属性在某个别页面进行配置的话，就在Markdown文件的front-matter中配置。
所谓的front-matter，就是指被以下格式包裹起来的键值对:

1
2
3
4
5
---
title: 'xxx'
date: '2000-01-01'
highlight_shrink: true
---

社交平台展示配置

在我们首页中的关于作者卡片中的下部分，会有一排小图标是展示社交平台的信息的，方便粉丝或者客户进行关注。
比如展示手机联系方式、邮箱、微博、微信、豆瓣等等。
代码相关的配置在_config.butterfly.yml中的social settings (社交圖標設置)中。
格式:

1
icon: link || the description

Butterfly支持 font-awesome v6圖標.
所以不需要只需要在link的位置填入图标的名称，就能直接在打开网页的时候加载。
如以下配置:

1
2
3
social:
  fab fa-github: https://github.com/xxxxxx || Github
  fas fa-envelope: mailto:somebody@163.com || 163邮箱

主页文章节选

因為主題UI的關係，主頁文章節選只支持自動節選和文章頁description。

在butterfly裏，有四種可供選擇

description： 只顯示description
both： 優先選擇description，如果沒有配置description，則顯示自動節選的內容
auto_excerpt： 只顯示自動節選
false： 不顯示文章內容

1
2
3
index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

description在front-matter裏添加

1
2
3
4
5
---
title: 'xxx'
date: '2000-01-01'
description: "讲述了xxxx"
---

文章顶部图

图片配置相关说明

其它頁面 （tags/categories/自建頁面）和 文章頁 的 top_img ，請到對應的 md 頁面設置front-matter中的top_img

並不推薦為每個 tag 和每個 category 都配置不同的頂部圖，因為配置太多會拖慢生成速度

文章置顶

直接在文章的front-matter區域裏添加sticky: 1屬性來把這篇文章置頂。數值越大，置頂的優先級越大。

文章封面

文章的markdown文檔上,在Front-matter添加cover,並填上要顯示的圖片地址。
如果不配置cover,可以設置顯示默認的cover.

如果不想在首頁顯示cover,可以設置為false

1
2
3
4
5
6
7
8
9
10
cover:
  # 是否顯示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面顯示的位置
  # 三個值可配置 left , right , both
  position: both
  # 當沒有設置cover時，默認的封面顯示
  default_cover:

當配置多張圖片時,會隨機選擇一張作為cover.此時寫法應為:

1
2
3
4
default_cover:
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章打賞

在你每篇文章的結尾，可以添加打賞按鈕。相關二維碼可以自行配置。

對於沒有提供二維碼的，可配置一張軟件的icon圖片，然後在link上添加相應的打賞鏈接。用户點擊圖片就會跳轉到鏈接去。

link可以不寫，會默認為圖片的鏈接。

修改 主題配置文件_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
default_cover:
reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付寶

开启分享

修改 主題配置文件_config.butterfly.yml即可

1
2
3
4
5
# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true
  sites: wechat,weibo,qq,facebook,twitter

开启搜索引擎

具体的可以butterfly主题的官方参考文章(https://butterfly.js.org/posts/ceeb73f)
这里的案例选择本地搜索，点击进入github的指导页面(https://github.com/wzpan/hexo-generator-search)

在项目根目录下安装一个插件。

1
2
hexo clean
npm install hexo-generator-search --save

安装完成后，再为根目录下的_config.yml配置文件添加以下的代码:

1
2
3
4
5
6
#本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 1000

紧接着再去配置主题配置文件_config.butterfly.yml:

1
2
3
4
5
# Local search
local_search:
  enable: true
  preload: false
  CDN:

修改主题色

在主题配置文件_config.butterfly.yml中找到配置项并打开theme_color。
所谓的“打开”指的是删掉“#”，因为在YML中，#是注释的语法，其后的内容都不会被解析。
提醒:要注意缩进

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
theme_color:
  enable: true
  main: "#f7d29f"
#   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: "#f7d29f"
  blockquote_background_color: "#f7d29f"
  scrollbar_color: "#f7d29f"
#   meta_theme_color_light: "ffffff"
#   meta_theme_color_dark: "#0d0d0d"

修改头部or底部的样式

在主题配置文件_config.butterfly.yml中找到配置项inject。如下所示:

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

一般来说，头部放置的是样式文件，底部放置的是JS文件。

在source文件夹下新建一个样式文件夹，可以取名“css”，然后在其路径下新建样式文件style.css。

接着在_config.butterfly.yml文件中inject配置项下做如下配置:

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/style.css">
  bottom:
    # - <script src="xxxx"></script>

接着我们试着去本地部署一下，看下能否运行，正常的情况下是没有任何变化的，因为我们style.css文件里面什么都没有写。

在浏览器中打开我们本地部署的网站，滑到底部位置，右击鼠标”检查”能够查看网页源代码，就能找到底部元素块的一个id，我们可以通过这个id在css文件中定位到这个元素块，以便我们在css文件中对其进行颜色、高度等的样式编辑.

网页底部footer元素

css样式表的语法很简单，只要看下文档半个小时就能大概摸清。只不过要熟悉起来还需要几天的时间。

打开刚创建的样式表文件style.css进行编辑:

1
2
3
#footer {
    background: rebeccapurple;
}

添加底部的备案信息

在主题配置文件_config.butterfly.yml中找到footer:配置项。

其中 custom_text: 配置项里，不仅可以输入文本，也可以输入代码。如下：

1
2
3
custom_text: 阿布思克
或者
custom_text: <div><a class="footer-a">粤ICP备00000000号</a></div>

其中 class=”footer-a” 是为了方便到css样式文件中配置其字体颜色。

接着需要点击其备案号之后，实现新打开窗口跳转。只需要添加代码:

1
custom_text: <div><a onclick="window.open('https://beian.miit.gov.cn')" class="footer-a">粤ICP备00000000号</a></div>