[TOC]

Hexo博客搭建以及深入学习

一、前置环境搭建

  1. git（版本控制工具）
  2. Node（JavaScript运行环境）
  3. npm（包管理工具）

二、Hexo安装

使用npm安装Hexo

1
npm install hexo -g

初始化博客

1
hexo init hexo_github_blog

在文件夹中安装依赖

1
2
cd hexp_github_blog
npm install

对博客进行预览
hexo g:生成静态网页，g是generate的缩写
hexo s:打开本地服务器，s是start的缩写

1
2
hexo g
hexo s

show_link

​ 通过复制得到的本地端口http://localhost:4000/进行访问本地博客。一般是用来查看自己的博客写完后是否可以正常显示。
​ 通过control + 'C'退出，退出之后就无法访问http://localhost:4000/了

三、Hexo连接到github

注意：事先需要注册到一个github的账号。

1、创建一个新仓库

在创建仓库时，仓库的名字一定是[你的用户名]+.github.io
如上图，我的名字是momingxiaoyang，那么我创建的时候就需要设置Repository name 为momingxiaoyang.github.io
其他选项不要修改，描述可填可不填

2、配置github信息

注意：由于github在2021年更新后，无法使用https进行信息配置，只能使用SSH的方式。所以，你需要生成SSH密钥，这里建议去csdn上面去寻找，因为有些老方法是不可用的。

确保目前环境是在你的博客文件夹的位置，可以使用pwd命令进行查看。

首先，需要安装插件，来连接github和你的hexo博客

1
npm install hexo-deployer-git --save

其次，打开hexo的配置文件_config.yml。你可以使用vim直接在终端打开，也可以使用其他代码编辑器打开。

1
vim _config.yml

找到该文件的尾处，将内容修改为

1
2
3
type: 'git'
repo: '你的ssh密钥'
branch: main

注意：如果你的默认分支是master，最好是将上面的main改成master

然后使用hexo组合拳上传github

  • hexo clean：清理hexo的缓存
  • hexo g：生成静态hexo文档
  • hexo r：将文档上传到github中
1
2
3
hexo clean
hexo g
hexo r

注意：首次使用hexo r可能需要输入你的github.com的账号和密码，具体看终端的提示。

3、首次打开hexo配合github搭建的线上博客

  • type设置为git
  • 新增repo，按照模版https://yourname.github.io/的格式填写网址，其中yourname填写你在github上面的用户名，例如我的就是：https://momingxiaoyang.github.io/
  • 新增branch，设置为main，原因是branch需要设置为主分支，如果你的主分支为master就设置为master。

示例代码：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: 'git@github.com:momingxiaoyang/momingxiaoyang.github.io.git'
  branch: main

四、配置文件的说明和修改

主要需要了解的文件：

  • source：源文件，里面的_post文件夹里面存放着博客文章
  • themes：主题文件，里面存放着hexo的一些主题
  • _config.landscape.yml：主题的配置文件
  • _config.yml：博客框架的配置文件

所说的配置文件,就是指_config.yml。

文件_config.yml注意事项：

  • 缩进十分严格， 只有两个空格。如果缩进有问题，那么博客就不能正常运行。所以这里不推荐使用记事本或者简单的文本编辑器进行对文件_config.yml的编写，这里建议使用IDE进行编写，如vscode、webstorm等。

1、Site部分

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
  • title：博客的主标题
  • subtitle：博客的副标题
  • description：博客的描述
  • keywords：关键字，通常情况作为搜索引擎的搜索指标之一。可写可不写
  • author：作者信息
  • language：默认为英文（en），中文的为（zh-CN）
  • timezone：
  • 注意：如果需要填写中文时，最好添加单引号

2、URL部分

1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true 
  trailing_html: true
  • url：填写你的github地址的url，格式为https://username.github.io。例如，我需要填写的url就是https://momingxiaoyang.github.io。
  • 其他的就不用管，直接使用默认的就行。

3、Directory部分

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
  • 该部分是对文件夹的配置。
  • 该部分不需要进行修改，只需要使用默认就行。

4、Writing部分

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
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''
  • 编写博客内容的部分。
  • 该部分不需要进行修改，只需要使用默认就行。

5、Home page setting部分

1
2
3
4
5
# Home page setting
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  • 博客的页面设置部分
  • path：根目录，直接使用默认即可。
  • per_page：每页显示文章的数量，一般参数设置都是10，直接使用默认即可。
  • order_by：文章排序，一般使用降序，直接使用默认即可。

6、Category & Tag

1
2
3
4
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
  • 预设分类的部分
  • default_category：默认的分类预设，初始设置为未分类状态。
  • category_map:分类的别名。
  • tag_map：标签的别名。
  • 以上都可以使用默认配置。

7、Date / Time format部分

1
2
3
4
5
6
7
8
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'
  • date_format：日期的格式设置。
  • time_format：时间的格式设置。
  • updated_option：更新的信息，通过通过修改其来实现更新的时间信息显示。

8、Pagination部分

1
2
3
4
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
  • 分页信息的部分
  • per_page：设置分页的信息，如果设置为0就表示禁用
  • pagination_dir：分页的目录

9、Include / Exclude file(s)部分

1
2
3
4
5
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
  • 包含的文件的部分，可以不用管理

10、Extensions部分

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
  • 拓展的主题设置部分
  • theme：

11、Deployment部分

  • 该部分在前面就已经修改过了，无需再进行修改。

12、总结：

需要修改信息的部分有：

五、Hexo常用命令

  • hexo init：初始化博客，创建博客文件夹。
  • hexo new / hexo n：新建一篇博客文章，后面需要输入文章的名字。
  • hexo g：生成博客，每次新建文章都要生成一次本地的静态博客。
  • hexo s：生成本地博客，一般用来对博客的预览。
  • hexo d：将博客文件上传到github仓库，上传之后就可以使用github的pages来观看博客了。
  • hexo clean：清理博客的缓存，最好是在hero g使用之前使用。
  • 一般使用顺序是，先使用hexo clean来清理缓存，再使用hexo g来生成博客，然后再用hexo s来观察写出的博客是否有问题，如果没有问题的话就可以直接使用hexo d来上传到仓库，就可以远程浏览了。

六、主题的安装和使用（以主题butterfly为例）

1、下载主题

butterfly主题仓库

可以无脑按照下面的三条命令的任意一条，在你的博客根目录中执行下面三条命令中的任何一条来安装主题。这里推荐使用npm的方法，后面进行自动部署需要类似方法辅助。

通过Github安装:

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

通过Gitee安装:

1
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

通过npm安装：

1
npm install hexo-theme-butterfly

2、修改主题

  • 打开配置文件中的Extensions部分。
  • 将里面的theme后面的landscape改为butterfly。

3、安装一些插件供主题运行

注意：不同的主题需要的插件不一样，如果你安装的主题不是bufferfly，你需要去查看你安装的主题的使用文档来独立进行插件的安装。

如果你安装的是bufferfly主题，无论使用git还是npm安装，你只需要在博客文件夹的根目录执行下面一行命令即可：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

七、主题信息的配置一

以下所有的操作都是参考bufferfly官方文档。

1、创建标签页

  • 在博客文件夹的根目录下使用下面命令来创建标签页文档。
1
hexo new page tags
  • 在博客文件夹的根目录下面按照顺序找到source/tags/index.md这个文件。
  • 修改这个文件，添加type: "tags"。例如：
1
2
3
4
5
---
title: tags
date: 2023-07-14 00:33:44
type: "tags"
---
  • 其中上面的title和data是可以修改的。
  • title：代表标签页的名字。
  • data：代表标签页的创建日期。
  • 注意：修改完该文件后，使用组合拳hexo clean、hexo g、hexo s并不能直接打开标签页，具体需要在使用组合拳之后得到的4000端口地址之后加上tags/，即http://localhost:4000/tags/。

2、创建分类页

  • 在博客文件夹的根目录下使用下面命令来创建标签页文档。
1
hexo new page categories
  • 在博客文件夹的根目录下面按照顺序找到source/categories/index.md这个文件。
  • 修改这个文件，添加type: "categories"。例如：
1
2
3
4
5
---
title: categories
date: 2023-07-14 00:49:41
type: "categories"
---
  • 其中上面的title和data是可以修改的。
  • title：代表分类页的名字。
  • data：代表分类页的创建日期。
  • 注意：修改完该文件后，使用组合拳hexo clean、hexo g、hexo s并不能直接打开分类页，具体需要在使用组合拳之后得到的4000端口地址之后加上tags/，即http://localhost:4000/categories/。

3、链接页的设定

  • 在博客文件夹的根目录下使用下面命令来创建标签页文档。
1
hexo new page link
  • 在博客文件夹的根目录下面按照顺序找到source/link/index.md这个文件。
  • 修改这个文件，添加type: "link"。例如：
1
2
3
4
5
---
title: 友情链接
date: 2023-07-14 00:53:52
type: "link"
---

  • 其中上面的title和data是可以修改的。

  • link：代表链接页面的名字。

  • data：代表链接页面的创建日期。

  • 注意：修改完该文件后，使用组合拳hexo clean、hexo g、hexo s并不能直接打开链接页，具体需要在使用组合拳之后得到的4000端口地址之后加上tags/，即http://localhost:4000/link/。

  • 友情链接的添加：

    • 在Hexo博客的根目录中的source中新建一个文件夹_data（如果已经创建可以跳过此步），然后创建一个文件夹link.yml。

    • 以下面的格式进行添加链接：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      - class_name: 该链接类别的名字
        class_desc: 该链接类别的描述
        link_list:
          - name: 该列表中的第一个链接
            link: 第一个链接的url链接 
            descr: 第一个链接的描述
          - name: 该列表中的第二个链接
            link: 第二个链接的url
            descr: 第二个链接的描述

    • 代码示例：

      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
      33
      34
      35
      36
      37
      - class_name: 个人作品
        class_desc: 有点捞的
        link_list:
          - name: 莫名小痒的博客
            link: https://momingxiaoyang.github.io
            avatar: https://s2.loli.net/2023/07/14/DwPaOBch6G8Ij1W.jpg
            descr: 就只是一个博客，别看啦


      - class_name: 关于我现在使用的博客
        class_desc: 使用hexo的原因是我没有能力自己写博客
        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: Twitter
            link: https://twitter.com/
            avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
            descr: 全球性的社交分享平台
          - name: 抖音
            link: https://www.douyin.com/
            avatar: https://s2.loli.net/2023/07/14/7ma4zfUIREVBwng.jpg
            descr: 中国短视频平台
          - name: bilibili
            link: https://www.bilibili.com/
            avatar: https://s2.loli.net/2023/07/14/qsAbU2oHLFhRG6j.jpg
            descr: 中国小黑子的发源地

    • 示例代码的显示效果：

      链接页的设定

八、主题信息的配置二

  • 下面需要在你使用主题为butterfly的情况下适用。
  • 在博客文件夹的根目录下面按照路径/node_modules/hexo-theme-butterfly/_config.yml，将文件_config.yml里面的内容全部复制。
  • 返回到博客文件夹的根目录，新建一个文件，名为_config.butterfly.yml（与_config.yml同级）。
  • 将刚才复制的内容粘贴到_config.butterfly.yml中，这个文件就是主题信息的配置文件。

1、404页面的配置

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
# A simple 404 page
error_404:
  enable: false
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
  • 将上面的false修改成true就可以了。

2、菜单部分的配置：

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
10
11
# Menu 目錄
menu:
# Home: / || fas fa-home
# Archives: /archives/ || fas fa-archive
# Tags: /tags/ || fas fa-tags
# Categories: /categories/ || fas fa-folder-open
# List||fas fa-list:
#   Music: /music/ || fas fa-music
#   Movie: /movies/ || fas fa-video
# Link: /link/ || fas fa-link
# About: /about/ || fas fa-heart

将其修改为：

1
2
3
4
5
6
7
8
9
10
11
12
# Menu 目錄
menu:
  主页: / || fas fa-home
  历史: /archives/ || fas fa-archive
  标签页: /tags/ || fas fa-tags
  分类页: /categories/ || fas fa-folder-open
  拓展||fas fa-list:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  链接: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

3、代码的设置

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
# Code Blocks (代碼相關)
# --------------------------------------

highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false

3.1、代码显示风格设置

  • highlight_theme：代码主题，可以修改为darker / pale night / light / ocean / mac / mac light / false。
  • 本人比较喜欢暗黑（的风格，这里就修改为mac。
1
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false

3.2、代码复制的设置

  • highlight_copy：代码是否可以复制，如果里面是true，则博客中的代码可以复制，如果为false，则博客中的代码不可复制。
  • 此处可以不用修改。
1
highlight_copy: true # copy button

3.3 代码框的展开设置

  • highlight_shrink:代码是否折叠，如果为true，则代码块就会折叠，需要点击交互按钮才能展开代码；如果为false，则代码块不回折叠，完整显示；如果为none，那么代码快的折叠按钮将会锁定并且隐藏。
  • 此处修改为none。
1
highlight_shrink: none # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
  • 当主题配置文件_config.butterfly.yml中的highlight_shrink设置为true时，可以在front-matter中添加highlight_shrink: false来单独配置文章展开代码框。
  • 当主题配置文件_config.butterfly.yml中的highlight_shrink设置为false时，可以在front-matter中添加highlight_shrink: true来单独配置文章收缩代码框。

3.4 代码自动换行设置

  • code_word_wrap：代码是否可以复制，如果里面是true，则博客中的代码在一行的代码长度过长时会进行换行；如果为false，则博客中的代码在一行中代码过长时不会换行，但是会出现一个左右方向的滚轮。

  • 注意：如果你将code_word_wrap设置为true，那么如果你的渲染方式为highlight，那么你需要将_config_yml中highlight中的line_number改为false；如果你的渲染方式为prismjs，那么你需要将那么你需要将_config_yml中prismjs中的line_number改为false。

  • 此处可以不用修改。

1
code_word_wrap: false

3.5、代码的行高的设置

  • highlight_height_limit：代码的行高，如果为false时，将不会有行高限制；如果为数字时，那么代码将会按照设定的数字来显示代码的行数，超过设定行数的代码将会收缩起来，会有交互按钮可以展开。

  • 此处可以不用修改

1
highlight_height_limit: false # unit: px

4、社交图标的设置

4.1 设置社交交互图标

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
# Social Settings (社交圖標設置)
# formal:
#   icon: link || the description || color
social:
# fab fa-github: https://github.com/xxxxx || Github || '#24292e'
# fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'

将social里面的注释信息反注释，然后填上信息

1
2
3
social:
  fab fa-github: https://github.com/momingxiaoyang || Github || '#24292e'
  fas fa-envelope: mailto:momingxiaoyang@qq.com || Email || '#4a7dbe'

如果想要添加其他图标，你需要访问一下图标库。

演示：

  • 点开上面链接，进入图标库，选择一个想要的图标，并且复制其HTML链接。

  • 假如某个复制的HTML链接为

1
<i class="fa-solid fa-magnifying-glass"></i>
  • 将上面双引号里面的内容复制下来，增加到social里面。
1
2
3
4
social:
  fab fa-github: https://github.com/momingxiaoyang || Github || '#24292e'
  fas fa-envelope: mailto:momingxiaoyang@qq.com || Email || '#4a7dbe'
  fa-solid fa-magnifying-glass: https://baidu.com/ || 百度
  • 保存之后，使用hexo组合拳即可完成操作。

4.2 个人头像

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
# Avatar (頭像)
avatar:
  img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
  effect: false
  • img：将你想要设置头像url复制到里面，即可显示图像。
  • effect：图像效果，如果为false时没有任何头像的显示效果，如果为true时头像将会自动旋转。

5、顶部图片的设置

在文件_config.butterfly.yml找到下面的代码串：

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
# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img:

# If the banner of page not setting, it will show the top_img
default_top_img:

# The banner image of archive page
archive_img:

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img:

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:

如果不需要显示顶部图片，可以直接将disable_top_img设置为true。

  • 页面顶部图片的获取顺序：

    各自配置的top_img > 配置文件的default_top_img

  • 文章顶部图片的获取顺序：

    各自配置的top_img > cover > 配置文件的default_top_img

上面代码中各信息配置的值的含义：

  • index_img：主页面的图片显示
  • default_top_img：默认的页面图片显示，如果某个页面没有配置top_img时，就会显示该图片
  • archive_img：历史页面的图片显示
  • tag_img：tag子页面的默认图片显示
  • tag_per_img：tag子页面的图片显示，可以为每个tag进行图片设置
  • category_img：category子页面的默认图片显示
  • categoty_per_img：category子页面的图片显示，可以为每个category进行图片设置
  • 注意：其他页面(tags/categories/自建页面)和文章页的top_ing，需要到对应的md页面设置front_matter中的top_img

6、文章的封面图片显示

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
10
11
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover: 
  # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

上面代码中各信息配置的值的含义：

  • index_enable：主页是否显示文章封面图。当值为true时，在主页可以看到文章将会显示文章的封面图。

  • aside_enable：侧栏是否显示文章封面图。当值为true时，在侧栏可以看到文章将会显示文章的封面图。

  • archives_enable：归档页是否显示文章封面图。当值为true时，在归档页可以看到文章将会显示文章的封面图。

  • position：主页卡片文章封面的展示位置。如果值为left则会在主页卡片文章封面的展示位置会放到左边；如果值为right则会在主页卡片文章封面的展示位置会放到右边；如果值为both，那么将左右轮流展示封面图片。这里建议为both

  • default_cover：默认的cover图，如果文章没有设置图片，将会使用这张图进行展示。

  • 注意：如果在default_cover里面配置多张图片时，将会从里面的url里面随机选择一张作为文章的展示。示例如下：

    1
    2
    3
    4
    5
    default_cover:
      - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg.png
      - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg2.png
      - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg3.png

7、文章页面元素的设置

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  • 对于前面的page，它是修饰在主页中文章元素的；对于前面的`post，它是修饰点开文章后文章页面的元素显示。
  • data_type：日期显示格式，如果值为created则显示创建日期；如果值为updated则显示更新日期；如果值为both则创建日期和显示日期都会显示。
  • date_format：展示日期的格式，如果为data则会展示日期；如果为relative则会展示相对时间。
  • categories：是否显示文章的分类，如果值为true则会显示，反之则不显示。
  • tags：是否显示文章的标签，如果值为true则会显示，反之则不显示。
  • label：是否显示文章的描述性文章，如果值为true则会显示，反之则不显示。

8、主页文章内容节选的设置

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

  • method：文章内容设置的方式。一共有四种方式。如果值为1，则显示文章在顶部设置的描述；如果值为2，则会优先显示文章顶部描述，如果文该文章没有设置描述，则会显示文章里面的随机内容；如果值为3，则会显示文章里面的随机内容；如果值为false，则会不显示文章内容节选部分。建议定义值为2。

  • length：随机节选的长度，建议使用默认的500。

  • 注意：文章的描述设置是在Markdown文章编写时，在顶部进行的front-matter里面对description的设定，例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: markedown在typora上的使用
    date: 2023-07-12 22:20:42
    tags:
      - Markdown
      - Typora
    categories: Markdown
    keywords: 'Markdown, Typora'
    description: 通过使用软件Typora，以Markdown语法编写的软件使用和文章编写的方法
    cover: https://pic60.mac89.com/mac69/ico/202206/22084158_5279e2c198.png
    top_img: https://s2.loli.net/2023/07/16/uMytZvg8JFo1Ybj.png
    ---

9、页面锚点和图片描述

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
10
# anchor
anchor:
  button:
    enable: false
    always_show: false
    icon: # the unicode value of Font Awesome icon, such as '\3423'
  auto_update: false # when you scroll in post, the URL will update according to header id.

# figcaption (圖片描述文字)
photofigcaption: false
  • anchor：页面锚点的设置。如果使用了之后，会在你的各个标题旁边新增锚点键，点击锚点键则会来到这条标题置于文章显示范围的最顶部，对于标题下面的内容读者会得到更好的观感体验。如果想要使用，只需要将所有false的值改为true就行。而icon是选择你要显示的锚点图标。需要输入锚点图标的unicode、
  • photofigcaption：图片描述文字的设置，如果设定为true，那么将会在博客文章的图片下面直接显示出你的图片的描述文字，这里建议不用修改，直接使用false。

10、复制相关的配置

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true
  copyright:
    enable: false
    limit_count: 50
  • enable：第一个enable是选择是否开启网站的复制权限，第二个enable是选择是否开启版权信息的添加。
  • copyright：复制的内容后面加上版权信息。
  • limit_count：选择字数限制，在第二个enable的值为true时,如果超过设定的字数，将会在复制的文章后面加上版权信息。

11、文章页相关配置

11.1 文章版权

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

  • enable：默认开启，如果值为true则意思为开启文章的版权显示。

  • decode：默认关闭，是进行转码的设置，当网址里面有中文时需要进行转码，但是一般网址中都不会出现中文，所以不需要修改。

  • 注意：如果你转载别人的文章，是不能填写你的版权信息的，你需要在复制的文章上面的front-matter里面对copyright设定值为false即可。或者用下面方式在front-matter里面写原作者的信息：

    1
    2
    3
    4
    copyright_author: xxxx
    copyright_author_href: https://xxxxxx.com
    copyright_url: https://xxxxxx.com
    copyright_info: 此文章版權歸xxxxx所有，如有轉載，請註明來自原作者

11.2 打赏功能

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
10
# Sponsor/reward
reward:
  enable: false
  QR_code:
  # - img: /img/wechat.jpg
  #   link:
  #   text: wechat
  # - img: /img/alipay.jpg
  #   link:
  #   text: alipay
  • 在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。对于没有提供二维码的，可配置一张软件的icon图片，然后在link上添加相应的打赏链接。用户点击图片就会跳转到链接去。link可以不写，会默认为图片的链接。

11.3 TOC

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
# toc (目錄)
toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false # for post
  scroll_percent: true
  • post：文章页是否显示TOC
  • page：普通页面是否显示TOC
  • number：是否显示章节数
  • expand：是否展开TOC
  • style_simple：简介模式（侧边栏只显示TOC，只对文章页有效）
  • scroll_percent：是否显示滚动百分比
  • 如果你想要在特定文章里面配置TOC内容，你可以在你的文章md文件头部加入toc_number和toc，并且为其配置true或者false即可。

11.3 相关文章

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
# Related Articles
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日
  • enable：默认开启，如果值为true则意思为在文章结尾会显示相关文章文章。
  • limit：设置相关文章的显示数量。
  • 上面的值使用默认即可，无需修改。
  • 相关文章推荐的原理是根据文章tags的比重来推荐的。
  • 注意：当文章封面设置为false时，或者没有获取到封面设置，相关文章背景会显示主题色。

11.4 文章过期提醒

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
  enable: false
  style: flat # style: simple/flat
  limit_day: 500 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.
  • enable：是否开启文章过期提醒，默认为false，关闭状态。
  • style：显示的形式，如果值为falt，则会显示得好看一点；如果值为simple，则会显示得简单一点。
  • limit_day：时间限制，设定经过多少时间才会过期，单位为天。
  • position：文章过期提醒的位置，如果为top则会在文章的顶部出现；如果为bottom则会在文章的底部出现。
  • message_prev：文章过期之前显示的文字。
  • message_next：文章过期之后显示的文字。

11.5 文章编辑按钮

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:
  • 该功能会在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去。
  • 由于编写的博客是自己使用静态博客，所以该功能可以不使用，可以忽略。

11.6 文章分页按钮

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1
  • 该功能是在文章结束后，会出现上一篇以及下一篇的其他文章显示。
  • post_pagination：分页的显示模式，如果值为1，则下一篇文章就会是更旧的文章；如果值为2，则下一篇文章的更新的文章；如果值为false，则不会显示分页。
  • 这里推荐可以使用false，只使用相关文章推荐。

12、页脚信息的设置

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2020
  custom_text:
  copyright: true # Copyright of theme and framework
  • owner：编写者的信息，里面的enable是选择是否显示要打开，里面的since是时间的开始日期，是可以设定的。
  • custom_text：里面的内容是自定义的页脚文本。可以在这里写声明文本等，支持HTML。如果需要写ICP链接，也可以写在里面
  • copyright：里面的值如果为true，则会在页脚显示所使用的主题和框架，这里就会显示hexo和butterfly；里面的值如果为false，则会隐藏这些信息。

13、侧边栏设置

13.1 侧边排版

在文件_config.butterfly.yml找到下面的代码串：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# aside (側邊欄)
# --------------------------------------

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    orderby: random # Order of tags, random/name/length
    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works
  • enable：是否启用侧边栏。
  • hide：是否隐藏侧边栏。
  • button：是否出现侧边栏的收缩交互按钮
  • mobile：移动端是否显示侧边栏
  • position：侧边栏出现的位置
  • display：侧边栏头像下面是否显示archive、tag、category三部分内容
  • card_author：作者信息的显示，可以填写文字描述，以及定义下面的交互按钮
  • card_announcement：侧边额度通知部分的显示，可以选择是否显示以及显示内容。
  • card_recent_post：侧边中的近期提交文章部分，可以选择展示的文章数量（如果设置为0则会全部展示）以及分类的依据（发布时间或更新时间）、分类的顺序（尽量不要设置）。
  • card_categories：侧边栏中分类内容，可以选择类别的显示数量以及是否扩展。
  • card_tags：侧边栏中的标签部分，可以选择标签的显示数量、标签多色系显示、排序方式。
  • card_archives：侧边栏中的历史部分，可以选择显示形式、显示格式、排序、显示数量等。
  • card_webinfo：侧边栏中的网页更新信息，可以选择是否启用、是否开启发布文章的计数、是否开始跟距离上次更新的时间。
  • 这里建议可以按照情况修改一下card_author部分以及将card_tags里面的color改为ture，其他不需要改变。

13.2 访问人数

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true
  • site_uv
  • site_pv
  • page_pv

13.3 运行时间

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: false
  publish_date:
  • enable：是否开启运行时间的显示
  • publish_date：运行开始的时间，格式：月/日/年 时间，也可以写成：年/月/日 时间

13.4 最新评论

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
# Aside widget - Newest Comments
newest_comments:
  enable: false
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  • 最新评论只会在刷新时才会去读取，并不会实时变化。
  • 由于 API 有 访问次数限制，为了避免调用太多，主题默认存取期限为 10 分钟。也就是説，调用后资料会存在 localStorage 里，10分钟内刷新网站只会去 localStorage 读取资料。 10 分钟期限一过，刷新页面时才会去调取 API 读取新的数据。
  • limit：显示的数量
  • storage：设置数据缓存的时间，单位为分钟
  • avatar：是否显示头像
  • 这里建议不用修改，使用默认即可。

13.5 自定义添加栏目

14、右下角按钮设置

14.1 繁简转换

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
10
11
12
13
translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 简
  #网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"

  • 按照上面代码中的注释去配置即可。

14.2 阅读模式

在文件_config.butterfly.yml找到下面的代码串：

1
2
# Read Mode (閲讀模式)
readmode: true
  • 阅读模式下会去除掉文章外的内容，避免干扰阅读。
  • 只会出现在文章页面，右下角会有阅读模式的按钮。

14.3 夜间模式

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
10
11
12
13
# dark mode
darkmode:
  enable: true
  # Toggle Button to switch dark/light mode
  button: true
  # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
  # autoChangeMode: false
  autoChangeMode: false
  # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
  start: # 8
  end: # 22
  • button：是否在右下角显示日夜模式切换按钮
  • autoChangeMode：自动切换的模式。如果值为1，则为跟随系统而变化，如果浏览器不支持则会按照设定的时间之间切换到日间模式；如果值为2，则指按照设定的时间切换到日间模式，其余时间为夜间模式；如果值为false，则取消自动切换。
  • start：日间模式的开始时间，例如：8。
  • end：日间模式的结束时间，例如：22。

14.4 滚动状态百分比

在文件_config.butterfly.yml找到下面的代码串：

1
2
# show scroll percent in scroll-to-top button
rightside_scroll_percent: false
  • 如果想要出现滚动条，直接改为true即可。

14.5 按钮顺序

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
# Don't modify the following settings unless you know how they work (非必要請不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重複
rightside_item_order:
  enable: false
  hide: # readmode,translate,darkmode,hideAside
  show: # toc,chat,comment
  • 这里如果非必要的话就不需要更改了，直接使用默认的即可。

九、主题信息的配置三

1、标签外挂（Tag plugins）

  • 主要是使用在md文章里面，实现一些markdown以外的功能。
  • 但是注意，以下内容只适合在Butterfly主题下面使用，如果在其他主题使用会不出效果，甚至报错。

1.1 Note的设置

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Note (Bootstrap Callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
  • style：默认的样式，如果在使用note时没有设定样式，则会使用默认样式。可以根据喜好设定。
  • icons：是否启用图标，默认开启。
  • border_radius：设定边框的弧度，如果其值过大，note的弧度将会从方形编程弧形。
  • light_bg_offset：背景的深浅程度。
  • 以上建议除了style以外都不用修改，直接使用默认即可。
1.1.1 note使用方法一：

在markdown文档里面使用使用下面的语法即可：

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
  • class：可选。表示同意作用，不同的标识有不同的配色以及图标，可以显示的标识有default / primary / success / info / warning / danger 。
  • no-icon：可选。如果不想要显示icon，可以直接在class后面加上no-icon。
  • style：可选。如果没有填写style时将会使用默认配置里面的样式，如果填写值则会根据填写的值来显示样式，可以选择的样式有 simple / modern / flat / disabled 。
  • 标签代码示例：
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
{% note simple %}
默认 simple 提示块标签
{% endnote %}

{% note modern %}
默认 modern 提示块标签
{% endnote %}

{% note flat %}
默认 flat 提示块标签
{% endnote %}

{% note disable %}
默认 disable 提示块标签
{% endnote %}

{% note no-icon %}
默认 no-icon 提示快标签，这里使用的是主题配置文件中定义的默认style
{% endnote %}




{% note default simple %}
default simple 提示块标签
{% endnote %}

{% note default modern %}
default modern 提示块标签
{% endnote %}

{% note default flat %}
default flat 提示块标签
{% endnote %}

{% note default disable %}
default disable 提示块标签
{% endnote %}

{% note default no-icon %}
default no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style
{% endnote %}




{% note primary simple %}
primary simple 提示块标签
{% endnote %}

{% note primary modern %}
primary modern 提示块标签
{% endnote %}

{% note primary flat %}
primary flat 提示块标签
{% endnote %}

{% note primary disable %}
primary disable 提示块标签
{% endnote %}

{% note primary no-icon %}
primary no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style
{% endnote %}



{% note success simple %}
success simple 提示块标签
{% endnote %}

{% note success modern %}
success modern 提示块标签
{% endnote %}

{% note success flat %}
success flat 提示块标签
{% endnote %}

{% note success disable %}
success disable 提示块标签
{% endnote %}

{% note success no-icon %}
success no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style
{% endnote %}



{% note info simple %}
info simple 提示块标签
{% endnote %}

{% note info modern %}
info modern提示块标签
{% endnote %}

{% note info flat %}
info flat 提示块标签
{% endnote %}

{% note info disable %}
info disable 提示块标签
{% endnote %}

{% note info no-icon %}
info no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style
{% endnote %}



{% note warning simple %}
warning simple 提示块标签
{% endnote %}

{% note warning modern %}
warning modern 提示块标签
{% endnote %}

{% note warning flat %}
warning flat 提示块标签
{% endnote %}

{% note warning disable %}
warning disable 提示块标签
{% endnote %}

{% note warning no-icon %}
warning no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style
{% endnote %}

{% note danger simple %}
danger 提示块标签
{% endnote %}

{% note danger modern %}
danger modern 提示块标签
{% endnote %}

{% note danger flat %}
danger flat提示块标签
{% endnote %}

{% note danger disable %}
danger disable 提示块标签
{% endnote %}

{% note danger np-icon %}
danger no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style
{% endnote %}

  • 代码显示效果：

    默认 simple 提示块标签

    默认 modern 提示块标签

    默认 flat 提示块标签

    默认 disable 提示块标签

    默认 no-icon 提示快标签，这里使用的是主题配置文件中定义的默认style

    default simple 提示块标签

    default modern 提示块标签

    default flat 提示块标签

    default disable 提示块标签

    default no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style

    primary simple 提示块标签

    primary modern 提示块标签

    primary flat 提示块标签

    primary disable 提示块标签

    primary no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style

    success simple 提示块标签

    success modern 提示块标签

    success flat 提示块标签

    success disable 提示块标签

    success no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style

    info simple 提示块标签

    info modern提示块标签

    info flat 提示块标签

    info disable 提示块标签

    info no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style

    warning simple 提示块标签

    warning modern 提示块标签

    warning flat 提示块标签

    warning disable 提示块标签

    warning no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style

    danger 提示块标签

    danger modern 提示块标签

    danger flat提示块标签

    danger disable 提示块标签

    danger no-icon 提示块标签，这里使用的是主题配置文件中定义的默认style

1.1.2 note使用方法二（自定义icon）：

在markdown文档里面使用使用下面的语法即可：

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

  • color：可选。填写自己想要设置的颜色。可以选择的颜色有 default / blue / pink / red / purple / orange / green。

  • icon：可选。可配置自定义的icon（只支持fontawesome图标，也可以配置no-icon）

  • style：可选。如果没有填写style时将会使用默认配置里面的样式，如果填写值则会根据填写的值来显示样式，可以选择的样式有 simple / modern / flat / disabled 。

  • 代码示例：

    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
    {% note blue 'fa-brands fa-qq' simple %}
    你冲qb吗 blue simple
    {% endnote %}

    {% note 'fa-solid fa-poo' simple %}
    不充我请你吃冰淇凌 default simple
    {% endnote %}

    {% note blue 'fa-brands fa-qq' modern %}
    你冲qb吗 blue modern
    {% endnote %}

    {% note pink 'fa-solid fa-poo' modern %}
    不充我请你吃冰淇凌 pink modern
    {% endnote %}

    {% note red 'fa-brands fa-qq' flat %}
    你冲qb吗 red flat
    {% endnote %}

    {% note purple 'fa-solid fa-poo' flat %}
    不充我请你吃冰淇凌 purple flat
    {% endnote %}

    {% note orange 'fa-brands fa-qq' disabled %}
    你冲qb吗 orange disable
    {% endnote %}

    {% note green 'fa-solid fa-poo' disabled %}
    不充我请你吃冰淇凌 green disable
    {% endnote %}

  • 代码实际效果：

    你冲qb吗 blue simple

    不充我请你吃冰淇凌 default simple

    你冲qb吗 blue modern

    不充我请你吃冰淇凌 pink modern

    你冲qb吗 red flat

    不充我请你吃冰淇凌 purple flat

    你冲qb吗 orange disable

    不充我请你吃冰淇凌 green disable

1.2.1 图库

在markdown文档里面使用使用下面的语法即可：

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：连接到对应相册的地址。这里需要在source文件里面建立文件或者md文档来予以访问。
  • img-url：图库封面的地址。

示例代码：

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
</div>

示例代码分析：

  • 就拿上面的示例代码为例子，你可以将这段代码直接复制到你的md文件里面使用。
  • “壁纸”和“漫威”是图库的名字；
  • “收藏的一些壁纸”和“关于漫威的图片”是你鼠标在图库的封面图片上时才会显示的图库描述；
  • 紧跟其后的是图库的路径，如果你复制上面代码到你的md文档后，能够实现点击图库能够进去页面，你需要在博客根目录/source/里面建立一个文件Gallery，然后再建立wallpaper.md和marvel.md，最后再编写这两个新建的md文件就可以实现点击访问了。
  • 最后一个url是封面图片的url，你可以拿远程的，也可以使用仓库里面的。
1.2.2 相册

在markdown文档里面使用使用下面的语法即可：

1
2
3
{% gallery [lazyload],[rowHeight],[limit] %}
markdown 图片格式
{% endgallery %}
  • lazyload：可选。会出现可点击按钮（加载更多图片），可以填写 true / false 。默认为false。
  • rowHeight：可选。图片显示的高度，如果需要一行显示更多图片，可以设置为更小的数字。默认为220.
  • limit：可选。每次加载的图片数量。默认为10。
  • 注意：新版相册会自动根据图片长度进行排版，书写也更更加方便，与markdown格式一样。可以根据需要插入相应的md。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% gallery %}
markdown 图片格式
{% endgallery %}

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

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


{% gallery %}
![](img_url)
![](img_url)
![](img_url)
![](img_url)
![](img_url)
![](img_url)
![](img_url)
![](img_url)
{% endgallery %}

1.3 标签隐藏（tag-hide）

  • 如果想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。
  • 注意：tag-hide内的标签外挂content内都不建议有h1~h6等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。
1.3.1 内联隐藏（inline）

在markdown文档里面使用使用下面的语法即可：

1
{% hideInline content,display,bg,color %}
  • content：隐藏的文本内容。
  • display：可选。按钮上面显示的文字。
  • bg：可选。按钮的背景颜色。
  • color：可选。按钮文字的颜色。
  • inline再文本里面添加按键隐藏内容只限文字，且content不能包含因为英文都好，可以用&sbquo来 实现。

示例代码：

1
2
3
巅峰产生虚伪的拥护 {% hideInline 黄昏见证虔诚的信徒,查看下一句,#FF7242,#fff %}

猜一个持续很久，现在还有存在的一种疫病 {% hideInline 电子鸡瘟 %}

代码显示效果：
巅峰产生虚伪的拥护 黄昏见证虔诚的信徒

猜一个持续很久，现在还有存在的一种疫病 电子鸡瘟

1.3.2 区块隐藏(Block)

在markdown文档里面使用使用下面的语法即可：

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content：隐藏的文本内容。
  • display：可选。按钮上面显示的文字。
  • bg：可选。按钮的背景颜色。
  • color：可选。按钮文字的颜色。
  • 注意：block独立的block隐藏内容，比inline能隐藏的内容更多，包括图片，代码块等等。但是display不能包含因为英文都好，可以用&sbquo来 实现。

示例代码：

1
2
3
4
请试试点开下面的按钮
{% hideBlock 我没骗你，里面有美女 %}
![美女.jpg](https://s2.loli.net/2023/07/18/yDbv39sBgrfGoVu.jpg)
{% endhideBlock %}

代码显示效果：
请试试点开下面的按钮

美女.jpg

1.3.3 收缩隐藏（Toggle）

在markdown文档里面使用使用下面的语法即可：

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
  • 如果你需要展示的内容太多，可以将其隐藏在搜索框里面，需要时再把它展开。但是display不能包含因为英文都好，可以用&sbquo来 实现。

示例代码：

1
2
3
4
5
6
7
8
9
{% hideToggle 猜猜里面有什么 %}
快点进去看一下吧！
{% hideToggle 猜猜里面有什么 %}
快点进去看一下吧！
{% hideToggle 猜猜里面有什么 %}
其实什么也没有哟～
{% endhideToggle %}
{% endhideToggle %}
{% endhideToggle %}

代码显示效果：

猜猜里面有什么

快点进去看一下吧！

猜猜里面有什么

快点进去看一下吧！

猜猜里面有什么

其实什么也没有哟～

1.4 图片绘制（mermaid）

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: false
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

如果需要使用，则将enable的值改为true。

在markdown文档里面使用使用下面的语法即可：

1
2
3
{% mermaid %}
内容
{% endmermaid %}

示例代码：

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

显示效果：

1.5 标签（Tabs）

在markdown文档里面使用使用下面的语法即可：

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  • Unique name：tabs部分的唯一名称，并且里面不能带英文逗号。在每个tab中都会使用其充当前缀，并且在后面添加上序号。如果在Unique name里面出现空格，在生成渲染时会用破折号代替空格。上述情况只适用于文章路径和名字唯一的情况。
  • [index]：可选。可以填写数字，填写数字后会将对应的tab在整个tabs中默认显示出来。
  • [Tab caption]：可选。tab的指定标题。如果值为空，则会显示为Unique name+ index的样式；如果填写了相应的字符串，将会将该字符串作为该tab的名称；如果没有填写相应字符串而是只填写了指定图标，那么该tab只会显示该图标。
  • [@icon]：可选。标题显示的指定图标。
1.5.1 Tabs代码示例一：预设使用默认显示tab

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

显示效果：

This is Tab 1.

This is Tab 2.

This is Tab 3.

1.5.2 Tabs代码示例二：预设选择特定的tab显示

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

显示效果：

This is Tab 1.

This is Tab 2.

This is Tab 3.

1.5.3 Tabs代码示例三：没有使用预设值指定显示

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

显示效果：

This is Tab 1.

This is Tab 2.

This is Tab 3.

1.5.4 Tabs代码示例四：自定义tab名称、只有icon、icon加tab名

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

显示效果：

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

1.6 按钮（Button）

在markdown文档里面使用使用下面的语法即可：

1
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
  • [url]：url链接，按键点下去就会前往url。
  • [text]：按键显示的文字。
  • [icon]：可选。按键图标。
  • [color]：可选。按键背景颜色（默认style时）按钮字体和边框颜色（outline时）。可以为 default / blue / pink / red / purple / orange / green 。
  • [style]：可选。按钮样式。默认为实心。可以选择不填写内容或者填写outline。
  • [layout]：可选。按钮布局。默认为line，即内联。可以选择不填写内容或者填写block，block则为块状，非内联。
  • [postion]：可选。按钮位置。前提是设置了layout为block。默认为左边，可以不填写内容或者填写center或者right。
  • [size]：可选。按钮大小。可以不填写内容或者填写large。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
This is my github, button show in default{% btn 'https://github.com/momingxiaoyang/',github %}

This is my github, button show with icon in default{% btn 'https://github.com/momingxiaoyang/',github, fa-brands fa-github %}

This is my github, button show in outline{% btn 'https://github.com/momingxiaoyang/',github,,outline %}

This is my github, button show with icon in outline{% btn 'https://github.com/momingxiaoyang/',github, fa-brands fa-github,outline %}

This is my github, button show with icon more larger{% btn 'https://github.com/momingxiaoyang/',github, fa-brands fa-github,larger %}

This is my github, button show with icon in outline more larger{% btn 'https://github.com/momingxiaoyang/',github, fa-brands fa-github,outline larger %}

This is my github, button show with icon by block in center outline more larger{% btn 'https://github.com/momingxiaoyang/',github, fa-brands fa-github,block center outline larger %}

This is my github, button show with icon by in blue more larger{% btn 'https://github.com/momingxiaoyang/',github, fa-brands fa-github,blue larger %}

This is my github, button show with icon by in outline pink more larger{% btn 'https://github.com/momingxiaoyang/',github, fa-brands fa-github,outline pink larger %}

显示效果：
This is my github, button show in defaultgithub

This is my github, button show with icon in defaultgithub

This is my github, button show in outlinegithub

This is my github, button show with icon in outlinegithub

This is my github, button show with icon more largergithub

This is my github, button show with icon in outline more largergithub

This is my github, button show with icon by block in center outline more largergithub

This is my github, button show with icon by in blue more largergithub

This is my github, button show with icon by in outline pink more largergithub

1.7 内联使用图片（inlineImg）

在markdown文档里面使用使用下面的语法即可：

1
{% inlineImg [src] [height] %}
  • [src]：图片的链接地址。
  • [height]：可选。图片高度限制。

示例代码：

1
2
3
我的头像：
![normal_head_sculpture_show](../img/head_sculpture.jpg)
我的小头像 {% inlineImg /img/head_sculpture.jpg 150px %}

显示效果：
我的头像：
normal_head_sculpture_show
我的小头像

1.8 标签（lable）

在markdown文档里面使用使用下面的语法即可：

1
{% label text color %}
  • text：标签文字内容。
  • color：可选。标签的背景颜色，默认为default。可选的值有 default / blue / pink / red / purple / orange / green 。

示例代码：

1
2
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

显示效果：
臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

1.9 时间线（timeline）

在markdown文档里面使用使用下面的语法即可：

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
  • title：标题/时间线。
  • color：时间线的颜色。默认为default，可选的值有 default / blue / pink / red / purple / orange / green 。

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% timeline 2023,blue %}
<!-- timeline 01-02 -->
blue show
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022 %}
<!-- timeline 01-02 -->
default color
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2021年哈,pink %}
<!-- timeline 01-02 -->
pink show
<!-- endtimeline -->
{% endtimeline %}

显示效果：

2023

01-02

blue show

2022

01-02

default color

2021年哈

01-02

pink show

在markdown文档里面使用使用下面的语法即可：

1
2
3
{% flink %}
xxxxxx
{% endflink %}

示例代码：

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
33
34
35
36
37
38
{% flink %}
- class_name: 个人作品
  class_desc: 有点捞的
  link_list:
    - name: 莫名小痒的博客
      link: https://momingxiaoyang.github.io
      avatar: https://s2.loli.net/2023/07/14/DwPaOBch6G8Ij1W.jpg
      descr: 就只是一个博客，别看啦


- class_name: 关于我现在使用的博客
  class_desc: 使用hexo的原因是我没有能力自己写博客
  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: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 全球性的社交分享平台
    - name: 抖音
      link: https://www.douyin.com/
      avatar: https://s2.loli.net/2023/07/14/7ma4zfUIREVBwng.jpg
      descr: 中国短视频平台
    - name: bilibili
      link: https://www.bilibili.com/
      avatar: https://s2.loli.net/2023/07/14/qsAbU2oHLFhRG6j.jpg
      descr: 中国小黑子的发源地
{% endflink %}

显示效果：

个人作品
有点捞的
莫名小痒的博客
莫名小痒的博客
就只是一个博客，别看啦
关于我现在使用的博客
使用hexo的原因是我没有能力自己写博客
Hexo
Hexo
快速、简单且强大的框架
网站
值得推荐的网站
Youtube
Youtube
全球规模最大的视频网站
Twitter
Twitter
全球性的社交分享平台
抖音
抖音
中国短视频平台
bilibili
bilibili
中国小黑子的发源地

2、Math 数学公式的设置

2.1 MathJax插件

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
# MathJax
mathjax:
  enable: true
  per_page: false
  • enable：是否使用MathJax插件进行渲染。
  • per_page：如果设置为true，则每一页都会加载MathJax服务；如果设为false。则需要在文章Front-matter添加mathjax: true，对应的文章才会加载Mathjax服务。

具体配置需要进行下面的步骤：

  • 卸载以前的渲染插件
1
npm uninstall hexo-renderer-marked --save
  • 安装新的插件
1
npm install hexo-renderer-kramed --save
  • 配置hexo根目录的配置文件_config.yml，在文件后面添加这部分代码
1
2
3
4
5
6
7
8
kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true
2.2 KaTex插件

在文件_config.butterfly.yml找到下面的代码串：

1
2
3
4
5
6
katex:
  enable: true
  # true 表示每一页都加载katex.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true
  • enable：是否使用KaTex插件进行渲染。
  • per_page：如果设置为true，则每一页都会加载KaTex服务；如果设为false。则需要在文章Front-matter添加katex: true，对应的文章才会加载KaTex服务。
  • hide_scrollbar：是否隐藏滚动条。

具体配置需要进行下面步骤：

  • 如果安装了hexo-renderer-marked，则需要进行这一步
1
npm un hexo-renderer-marked --save
  • 如果安装了hexo-renderer-karmed，则需要进行这一步
1
npm un hexo-renderer-kramed --save
  • 安装渲染插件hexo-renderer-markdown-it
1
npm i hexo-renderer-markdown-it --save
  • 安装Katex插件
1
npm install katex @renbaoshuo/markdown-it-katex

2.3 渲染插件使用注意事项

  • 不要在标题里面使用mathjax、KaTex语法，toc目录不一定能正确显示。
  • 由于使用上面两款插件会删除掉原先使用的渲染插件hexo-renderer-marked，所以可能会发生未知错误，所以请谨慎使用。

3、搜索

3.1 Algolia

注意：如果使用hexo-algoliasearch，请记得配置fields参数的title，permalink和content。使用前记得运行hexo clean。此处没有演示本方法，建议去看[本地搜索](####3.2 本地搜索)的方法。

  • 安装hexo-algolia或hexo-algoliasearch，根据它们的说明文档去做相应的配置。
  • 修改主题配置文件。在文件_config.butterfly.yml找到下面的代码串，将false修改成true：
1
2
3
4
5
# Algolia search
algolia_search:
  enable: false
  hits:
    per_page: 6

3.2 本地搜索

  • 需要安装hexo-generator-searchdb或hexo-generator-search，根据它们的说明文档去做相应的配置。
  • 修改主题配置文件。在文件_config.butterfly.yml找到下面的代码串，将false修改成true：
1
2
3
4
5
6
7
8
9
10
# Local search
local_search:
  enable: 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:
  • enable：是否开启本地搜索。
  • preload：预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件。
  • top_n_per_article：匹配文章结果，默认显示最开始的一段结果。
  • unescape：将html字符串解码为可读字符串。
  • CDN：搜索文件的CDN地址（默认使用的本地连接）

下面即是使用本地搜索的操作步骤：

  1. 在根目录下面下载插件，复制下面代码并在根目录下面运行：
1
npm install hexo-generator-search --save
  1. 在文件_config.yml中添加下面内容，注意格式（limit代表着一次搜索文档的上限）：
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  1. 重新运行，即可成功。

4、主页美化与特效

4.1 自定义主题颜色

可以通过修改主题配置文件_config.butterfly.yml里面的内容，从而实现大部分UI颜色的修改。（颜色值必须被双引号包裹，例如"#000"而不是#000，否则将会在构建的时候报错）

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"

具体元素分析：

  • main：主体部分。主要是体现在侧边栏中作者卡片处的按钮颜色以及右下角按钮颜色。
  • paginator：页面数部分。代表了页脚部分的颜色。
  • button_hover：按钮鼠标滞留部分。鼠标停留在交互按钮上时，就会展示所设置的颜色。
  • text_selection：
  • link_color：
  • meta_color：
  • hr_color：
  • code_foreground：
  • code_background：
  • toc_color：文章标题部分。当阅读文章时，右边侧边栏会显示并高亮当前阅读部分所在的标题，高亮的颜色即定义的颜色。
  • blockquote_padding_color：
  • blockquote_background_color：
  • scrollbar_color：
  • meta_theme_color_light：
  • mata_theme_color_dark：

4.2 自定义top_img显示大小

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
# The top_img settings of home page
# default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間)
# The position of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離)
index_site_info_top:
# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)
index_top_img_height:
  • index_site_info_top：主页标题距离顶部距离，例如 300px/300em/300rem/10%。建议为40%～60%。
  • index_top_img_height：主页top_img高度，例如300px/300em/300rem，注意，不能在此处填写百分比数值。建议为800px~1000px。
  • 当两个都不填写参数时，将会使用默认值。

4.3 网站背景

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: "#888"
  • 默认会显示白色，可设置图片或者颜色。
  • 可以通过填写rgb或者url来修改网站背景。
  • 如果需要填写rgb，则以"#888"为示例格式来写。
  • 如果要填写网页url，则需要以url(http://xxxxxx.com/xxx.jpg)为示例格式来写。
  • 如果要填写本地url，假如本地的source文件下面有一个文件夹img，img文件夹里面放的是本地图片，那么需要以url(/img/xxx.jpg)为示例格式来写。

4.4 footer背景

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
# Footer Background
footer_bg: true
  • 如果填写false或者留空，会显示默认的颜色。
  • 如果img的url链接，会显示所配置的图片。
  • 如果填写rgb的值，将会显示对应的rgb。
  • 如果填写true，将会显示top_img下面未显示的部分。

4.5 打字效果

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false
  • enable：是否启用打字效果，如果值为true，则为启用打字效果。
  • colorful：是否启用冒光特效。
  • shake：是否启用抖动特效。
  • mobile：是否在移动端（手机、ipad等）启用该效果。

4.6 背景特效

4.6.1 静止彩带

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
9
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false
  • click_to_change：是否每次点击都更换彩带。
  • moblie：移动端是否显示该效果。
4.6.2 动态彩带

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: false
  mobile: false
  • moblie：移动端是否显示该效果。
4.6.3 动态聚集彩带

这种彩带会动态显示，当鼠标停留在背景时，彩带会像蚂蚁回巢一样聚集在鼠标中间。

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
9
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false
  • color：彩带的颜色。
  • opacity：彩带线的不透明度。
  • zIndex：背景的z-index属性，即彩带显示效果的视角距离，越小彩带显示在越底部。
  • count：彩带线的数量。
  • moblie：移动端是否显示该效果。

4.7 鼠标点击效果

4.7.1 烟花特效

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false
  • enable：是否启用该特效。
  • zIndex：烟火特效的视觉前后效果的设定。建议只在-1和9999上选，-1代表烟火效果在底部，9999代表烟火效果在前面。
  • moblie：移动端是否显示该效果。
4.7.2 爱心特效

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
  enable: false
  mobile: false
  • enable：是否启用该特效。
  • moblie：移动端是否显示该效果。
4.7.3 文字特效

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
9
10
# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
  enable: false
  text:
  # - I
  # - LOVE
  # - YOU
  fontSize: 15px
  random: false
  mobile: false
  • enable：是否启用该特效。
  • text：文字特效需要显示的文字。
  • fontSize：字体特效显示的大小。
  • random：是否启动随机显示所设置的文字。
  • moblie：移动端是否显示该效果。

4.8 页面美化

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
# Beautify (美化頁面顯示)
beautify:
  enable: false
  field: post # site/post
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'
  • 页面美化会改变ol、ul、h1~h5的样式，使其更加美观。
  • enable：是否启用该特效。
  • field：配置生效的区域。如果值为post，则只在文章页生效；如果值为site，则会在全站生效。
  • title-prefix-icon：fontawesome的icon的Unicode数

4.9 自定义字体和字体大小

4.9.1 全局字体

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family:
  code-font-family:
  • 可以自行设置字体的font-family。
  • 如果不需要配置，可以留空。

4.9.2 Blog标题字体

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link:
  font-family:
  • 可以自行设置字体的font-family。
  • 如果不需要配置，可以留空。
  • 如果不需要使用网络字体，自需要把front_link留空就行。

4.10 网站副标题

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 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:
  # 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:
  • 可以设置主页中显示的网站副标题或者喜欢的座右铭。
  • 需要将enable与effect的参数都调整为true，如果需要添加其他来源，需要修改source里面对应的参数，如果想要一些自定义的副标题，需要再sub里面填写参数，可以像下面一样：
1
2
3
4
sub:
  - 若再许我少年时，一两黄金一两风。
  - 生如芥子，心藏须弥。
  - 巅峰产生虚伪的拥护，黄昏见证虔诚的信徒。
18.11 页面加载动画

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
9
# Loading Animation (加載動畫)
preloader:
  enable: false
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:
  • 当进入网页时，因为加载速度的问题，可能会导致top_img图片出现断层显示。或者网页加载不全而出现等待时间。开启网页加载动画后，会显示加载动画，等页面加载完，加载动画才会消失。
  • 支持使用pace.js的加载动画，可以通过在网站pace.js里面下载css，放入本地source里面，使用本地的url来启动。

5、字数统计

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
  enable: false
  post_wordcount: true
  min2read: true
  total_wordcount: true
  • 如果需要使用，则将enable的参数设置为true。
  • 除此之外，还需要在终端里面打开hexo的目录，输入npm install hexo-wordcount --saveoryarn add hexo-wordcount。

6、图片大图查看模式

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
9
10
11
# Lightbox (圖片大圖查看模式)
# --------------------------------------
# You can only choose one, or neither (只能選擇一個 或者 兩個都不選)

# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false

# fancybox
# https://fancyapps.com/fancybox/
fancybox: true
  • 两个模式只能开启一个。
  • 如果你并不想为某张图片添加大图查看模式，你可以使用html格式引用图片，并为图片添加no-lightbox这个class名。
  • 需要使用哪一个，只需要将其参数改为true就可，记得要将另外一个的参数改为false。

7、Snackbar弹窗

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
9
# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#1f1f1f' # The background color of Toast Notification in dark mode
  • Snackbar弹窗是一种提示性弹窗，当在网页点击某UI进行操作时就会出现弹窗提示。
  • postion：提示弹窗的位置，可选top-left / top-center / top-right / bottom-left / bottom-center / bottom-right。
  • bg_light：日间模式的提示背景颜色。
  • bg_dark：夜间模式的提示背景颜色。

8、Instantpage网页预加载

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
# https://instant.page/
# prefetch (預加載)
instantpage: false
  • 当鼠标悬停到链接上超过65毫秒时，Instantpage会对该链接进行预加载，可以提升访问速度。
  • 如果需要打开，只需要将instantpage的参数修改为true就可以了。

9、Pangu自动添加空格

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:
  enable: false
  field: site # site/post
  • 本外挂会自动将网页中所有的中文字和英文、数字、符号之间插入空白。
  • field：只支持两个参数，如果参数为post，则该功能只在发布的文章页生效，如果参数为site，则该功能会在全站生效。

10、Open Graph打开网页搜索

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
9
10
11
12
# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta:
  enable: true
  option:
  # twitter_card:
  # twitter_image:
  # twitter_id:
  # twitter_site:
  # google_plus:
  # fb_admins:
  # fb_app_id:
  • 在head里添加一些meta资料，例如略缩图、标题、时间等。当分享网页到一些平台时，平台会读取Open Graph的内容，展示略缩图、标题等等信息。

11、CSS前缀

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
# Add the vendor prefixes to ensure compatibility
css_prefix: true
  • 有些CSS并不是所有浏览器都支持，需要增加对应的前缀才会生效。
  • 开启 css_prefix后，会自动为一些CSS增加前缀。（会增加20%的体积）

12、Pjax网页加速

在主题配置文件_config.butterfly.yml里面找到下面内容并加以自定义修改：

1
2
3
4
5
6
7
8
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
  enable: false
  exclude:
  # - xxxx
  # - xxxx
  • 当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址。这样可以不用重复加载相同的资源（css/js），从而提升网页的加载速度。
  • 对于一些第三方插件，有些并不支持pjax。可以将网页的url放到exclude中，这个网页就会被pjax排除在外，点击该网页会重新加载网站。
  • 使用pjax后，一些自己DIY的js可能会无效，跳转页面时需要重新使用，可以参考Pjax文档。
  • 使用pjax后，一些个别页面加载的js/css，将会改为所有页面都加载。
  • 目前Butterfly的Pjax仍有一些问题。

十、主题信息的配置四