Hexo (一)

本文相关链接:

1
2
3
4
5
6
7
8
(1) https://www.fomal.cc/posts/e593433d.html 
(2) https://www.fomal.cc/posts/4aa2d85f.html
(3) https://www.fomal.cc/posts/3451f874.html
(4) https://www.fomal.cc/posts/eec9786.html
(5) https://www.fomal.cc/posts/5389e93f.html

(1) https://tzy1997.com/articles/hexo1606/
怎么才能变得好看=我懒

安装 Hexo

在 Git BASH 输入如下命令安装

1
npm install -g hexo-cli

##初始化 Hexo项目

###在目标路径（我这里选的路径为【D:/hexo-blog】）打开 cmd 命令窗口，执行 hexo init 初始化项目。

1
hexo init blog(项目名)

进入 blog ，输入 npm i 安装相关依赖。

1
2
cd blog  //进入blog文件夹
npm i

初始化项目后，blog-demo 有如下结构：

【node_modules】：依赖包
【scaffolds】：生成文章的一些模板
【source】：用来存放你的文章
【themes】：主题
【.npmignore】：发布时忽略的文件（可忽略）
【_config.landscape.yml】：主题的配置文件
【config.yml】：博客的配置文件
【package.json】：项目名称、描述、版本、运行和开发等信息

输入 hexo server 或者 hexo s 启动项目

打开浏览器，输入地址：http://localhost:4000/ ，看到下面的效果，说明你的博客已经构建成功了。

#hexo (二)

安装主题

注意：此方法只支持 Hexo 5.0.0 以上版本！

在你的博客根目录（我这里路径为【D:/hexo-blog/blog】）打开 Git BASH 命令窗口执行 npm i hexo-theme-butterfly

安装成功后可在【D:/hexo-blog/blog/node_modules】文件夹下找到 hexo-theme-butterfly 文件夹

升级方法：在博客根目录下，运行 npm update hexo-theme-butterfly。
升级前请将 hexo-theme-butterfly 文件夹备份，npm 更新会直接覆盖成新的包。

1
2
npm i hexo-theme-butterfly
npm update hexo-theme-butterfly

应用主题

##修改站点配置文件_config.yml，把主题改为 butterfly

1
theme: butterfly

###如果你没有 pug 以及 stylus 的渲染器，请下载安装，这两个渲染器是 Butterfly 生成基础页面所需的依赖包：

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

为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做，高度魔改的一般都不会升级主题了，不然魔改的会被覆盖掉）把主题文件夹中的 _config.yml 复制到 Hexo 根目录里（我这里路径为【C:/Hexo-Blog/blog-demo】），同时重新命名为 _config.butterfly.yml。以后只需要在 _config.butterfly.yml 进行配置即可生效。Hexo 会自动合併主题中的_config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用_config.butterfly.yml 的配置，其优先度较高。

基础用法说明

Front-matter

Front-matter 是 markdown 文件最上方以 --- 分隔的区域，用于指定个别档案的变数。

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置

Page Front-matter：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
写法解释
title【必需】页面标题
date【必需】页面创建日期
type【必需】标籤、分类和友情链接三个页面需要配置
updated【可选】页面更新日期
description【可选】页面描述
keywords【可选】页面关键字
comments【可选】显示页面评论模块 (默认 true)
top_img【可选】页面顶部图片
mathjax【可选】显示 mathjax (当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
kates【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside【可选】显示侧边栏 (默认 true)
aplayer【可选】在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开 (true/false)(默认为设置中 highlight_shrink 的配置)

Post Front-matter：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
写法解释
title【必需】文章标题
date【必需】文章创建日期
updated【可选】文章更新日期
tags【可选】文章标籤
categories【可选】文章分类
keywords【可选】文章关键字
description【可选】文章描述
top_img【可选】文章顶部图片
cover【可选】文章缩略图 (如果没有设置 top_img, 文章页顶部将显示缩略图，可设为 false / 图片地址 / 留空)
comments【可选】显示文章评论模块 (默认 true)
toc【可选】显示文章 TOC (默认为设置中 toc 的 enable 配置)
toc_number【可选】显示 toc_number (默认为设置中 toc 的 number 配置)
toc_style_simple【可选】显示 toc 简洁模式
copyright【可选】显示文章版权模块 (默认为设置中 post_copyright 的 enable 配置)
copyright_author【可选】文章版权模块的文章作者
copyright_author_href【可选】文章版权模块的文章作者链接
copyright_url【可选】文章版权模块的文章连结链接
copyright_info【可选】文章版权模块的版权声明文字
mathjax【可选】显示 mathjax (当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aplayer【可选】在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开 (true/false)(默认为设置中 highlight_shrink 的配置)
aside【可选】显示侧边栏 (默认 true)

注意：我的博客根目录路径为 【D:/hexo-blog/blog】，下文所说的根目录都是此路径，将用 [BlogRoot] 代替。

标签页

前往你的 Hexo 博客根目录，打开 Git Bash 执行如下命令：

1
hexo new page tags

在 [BlogRoot]\source\ 会生成一个含有 index.md 文件的 tags 文件夹。

修改 [BlogRoot]\source\tags\index.md，添加 type: "tags"。

1
2
3
4
5
---
title: tags
date: 2022-10-28 12:00:00
type: "tags"
---

友情链接

前往你的 Hexo 博客根目录，打开 cmd 命令窗口执行如下命令：

1
hexo new page link

在 [BlogRoot]\source\ 会生成一个含有 index.md 文件的 link 文件夹

修改 [BlogRoot]\source\link\index.md，添加 type: "link"

1
2
3
4
5
---
title: link
date: 2022-10-28 12:00:00
type: "link"
---

前往 [BlogRoot]\source\_data 创建一个 link.yml 文件（如果沒有 _data 文件夹，请自行创建），并写入如下信息（根据你的需要写）：

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: 1.技术支持
  class_desc: 本网站的搭建由以下开源作者提供技术支持
  link_list: 
    - name: Hexo 
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
      siteshot: https://source.fomal.cc/siteshot/hexo.io.jpg
      
- class_name: 2.友情链接
  class_desc: 一些好朋友~~
  link_list:
    - name: Fomalhaut🥝
      link: https://fomal.cc/
      avatar: /assets/head.jpg
      descr: Future is now 🍭🍭🍭
      siteshot: https://source.fomal.cc/siteshot/www.fomal.cn.jpg
    - name: 唐志远の博客
      link: https://tzy1997.com/
      avatar: https://bu.dusays.com/2022/05/02/626f92e193879.jpg
      descr: 古今之成大事者，不惟有超世之才，亦必有坚忍不拔之志。
      
- class_name: 3.网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台
    - 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: 中国最大社交分享平台

404 页面

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: "页面沒有找到"
  background:

Hexo (三)

语言

修改站点配置文件_config.yml，默认语言是 en 。
主题支持三种语言：

  • default(en)
  • zh-CN (简体中文)
  • zh-TW (繁体中文)

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改站点配置文件_config.yml。部分参数如下，详细参数可参考官方的配置描述。

参数描述
title网站标题
subtitle描述
description网站描述
keywords网站的关键词。支持多个关键词
author您的名字
language网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans 和 zh-CN。
timezone网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai
1
2
3
4
5
6
7
title: MghyのBlog
subtitle: '个人学习记录站'
description: '个人搭建的学习记录站-基于Hexo'
keywords:
author: MGHY
language: zh-CN
timezone: 'Asia/Shanghai'

导航菜单

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

  • 必须是 /xxx/，后面 || 分开，然后写图标名，如果不想显示图标，图标名可不写
  • 若主题版本大于 v4.0.0，可以直接在子目录里添加 hide 隐藏子目录，如下面的 List
  • 文字可自行更改，中英文都可以
1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat || hide:
    番剧: /bangumis/ || fas fa-film
    留言板: /comments/ || fas fa-commenting
    #音乐: /music/ || fas fa-music
    #照片: /Gallery/ || fas fa-images
    #电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码

5.1 代码高亮主题

Butterfly 支持 6 种代码高亮样式：

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

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

1
highlight_theme: mac

5.2 代码复制

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

1
highlight_copy: true

5.3 代码框展开 / 关闭

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

1
highlight_shrink: true #代码框不展开，需点击 '>' 打开

5.4 代码换行

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

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

1
code_word_wrap: true

5.5 代码高度限制

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

1
highlight_height_limit: true # unit: px

社交图标

Butterfly 支持 font-awesome v6 图标。

书写格式：图标名：url || 描述性文字。

1
2
3
social:
  fab fa-github: https://github.com/MGHYGitHub || Github
  fas fa-envelope: mailto:2970659912@qq.com || Email

顶部图

配置解释
index_img主页的 top_img
default_top_img默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img归档页面的 top_img
tag_imgtag 子页面 的 默认 top_img
tag_per_imgtag 子页面的 top_img，可配置每个 tag 的 top_img
category_imgcategory 子页面 的 默认 top_img
category_per_imgcategory 子页面的 top_img，可配置每个 category 的 top_img

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

1
index_img: https://iw233.cn/api.php?sort=pc (MirlKoiAPI)

其它页面 （tags/categories/ 自建页面）和文章页的 top_img，请到对应的 md 页面设置 front-matter 中的 top_img。

文章置顶与封面

  1. 你可以直接在文章的 front-matter 区域里添加 sticky: 1 属性来把这篇文章置顶。数值越大，置顶的优先级越大。
  2. 文章的 markdown 文档上，在 Front-matter 添加 cover，并填上要显示的图片地址。如果不配置 cover，可以设置显示默认的 cover；如果不想在首页显示 cover，可以设置为 false。
    修改主题配置文件_config.butterfly.yml。
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
5
6
7
8
default_cover:
- https://source.fomal.cc/img/default_cover_120.webp
- https://source.fomal.cc/img/default_cover_170.webp
- https://source.fomal.cc/img/default_cover_115.webp
- https://source.fomal.cc/img/default_cover_102.webp
- https://source.fomal.cc/img/default_cover_42.webp
- https://source.fomal.cc/img/default_cover_190.webp
- https://source.fomal.cc/img/default_cover_83.webp

文章页相关配置

9.1 文章 meta 显示

post_meta 这个属性用于显示文章的相关信息的，修改主题配置文件_config.butterfly.yml。

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

9.2 文章版权和协议许可

修改主题配置文件_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/

由于 Hexo 4.1 开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置 decode: true 来显示中文网址。如果有文章（例如：转载文章）不需要显示版权，可以在文章页 Front-matter 中单独设置。

1
copyright: true

从 v3.0.0 开始，支持对单独文章设置版权信息，可以在文章 Front-matter 单独设置。

1
2
3
4
5
post_copyright:
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者

9.4 文章目录 TOC

修改主题配置文件_config.butterfly.yml。

1
2
3
4
5
6
toc:
  post: true # 文章页是否显示 TOC
  page: false # 普通页面是否显示 TOC
  number: true	 # 是否显示章节数
  expand: false	# 是否展开 TOC
  style_simple: true # for post 简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）

9.5 相关文章推荐

相关文章推荐的原理是根据文章 tags 的比重来推荐，修改主题配置文件_config.butterfly.yml。

1
2
3
4
related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

9.6 文章锚点

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题 ID 进行替换。

注意：每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。

修改主题配置文件_config.butterfly.yml。

1
2
3
# anchor
# when you scroll in post , the url will update according to header id.
anchor: true

9.7 文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基准。

1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 30 # When will it be shown
  position: top # position: top/bottom
  message_prev: 距离上次更新已经过去
  message_next: 天了，文章的内容可能已经过时了。

9.8 文章分页按钮

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

1
2
3
4
5
6
# post_pagination (分页)
# value: 1 || 2 || false	# false:为关闭分页按钮；1:下一篇显示的是旧文章；2:下一篇显示的是新文章
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 2

10. 头像

1
2
3
avatar:
  img: https://cdn.staticaly.com/gh/MGHYGitHub/image-hosting@master/image-hosting/36d6c6eb3a95cbd0bdc4a70b221c5a6.7l7dzzhg0k00.webp
  effect: false # true则会一直转圈

11. 文章内容复制相关配置

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
copy:
  enable: true	# 是否开启网站复制权限
  copyright:	# 复制的内容后面加上版权信息
    enable: true	# 是否开启复制版权信息添加
    limit_count: 30	# 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息

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

1
2
3
4
5
6
footer:
  owner:
    enable: true
    since: 2022	# 站点起始时间
  custom_text:	# 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等,支持 HTML。
  copyright: false # Copyright of theme and framework

13. 右下角按钮

13.1 简繁转换

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

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

13.2 夜间模式

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

1
2
3
4
5
6
7
8
9
10
# dark mode
darkmode:
  enable: true
  # dark 和 light 两种模式切换按钮
  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: 2

v2.0.0 开始增加一个选项，可开启自动切换 light mode 和 dark mode。

  • autoChangeMode: 1 跟随系统而变化，不支持的浏览器 / 系统将按照时间晚上 6 点到早上 6 点之间切换为 dark mode。
  • autoChangeMode: 2 只按照时间 晚上 6 点到早上 6 点之间切换为 dark mode, 其余时间为 light mode。
  • autoChangeMode: false 取消自动切换。

13.3 阅读模式

阅读模式下会去掉除文章外的内容，避免干扰阅读。只会出现在文章页面，右下角会有阅读模式按钮。

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

1
readmode: true

14. 侧边栏设置

14.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
54
55
aside:
  enable: true
  hide: false
  button: true
  mobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容
  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: 🛴前往小家...
      link: https://github.com/MGHYGitHub
  card_announcement: # 公告信息
    enable: true
    content: <center>主域名：<br><a href="https://lmghy.top"><b><font color="#5ea6e5">lmghy.top</font></b></a>&nbsp;</font></b></a><br>备用域名：<br><a href="https://MGHYGitHub.github.io"><b><font color="#5ea6e5">MGHYGitHub.github.io</font></b></a><br><center>我的个人博客：<br><a href="https://lmghy.top"><b><font color="#5ea6e5">lmghy.top</font></b></a>&nbsp;|&nbsp;<a href="https://mghy.top"><b><font color="#5ea6e5">mghy.top</font></b></a><br>
    #|&nbsp;<a href="https://www.fomal.cn"><b><font color="#5ea6e5">fomal.cn</font></b></a><br>
    #备用域名：<br><a href="https://blog.fomal.cc"><b><font color="#5ea6e5">blog.fomal.cc</font></b></a><br>
    #<a href="https://aa.fomal.cc"><b><font color="#5ea6e5">aa.fomal.cc</font></b></a><br><a href="https://bb.fomal.cc"><b><font color="#5ea6e5">bb.fomal.cc</font></b></a><br>
    #<a href="mailto:admin@fomal.cn">
    #📬：<b><font color="#a591e0">admin@fomal.cn</font></b></a></center>
  card_recent_post: # 最新文章
    enable: true
    limit: 3 # 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: 20 # if set 0 will show all
    color: true
    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
  card_weibo:
    enable: true

14.2 访问人数 (UV 和 PV)

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

1
2
3
4
busuanzi:
  site_uv: true  # 本站总访客数
  site_pv: true  # 本站总访问量 
  page_pv: true  # 本文总阅读量

14.3 运行时间

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

1
2
3
4
5
6
runtimeshow:
  enable: true
  publish_date: 11/11/2022 00:00:00
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

14.4 最新评论

v3.1.0 以上支持。如果未配置任何评论，前先不要开启该功能。

最新评论只会在刷新时才会去读取，并不会实时变化。
由于 API 有 访问次数限制，为了避免调用太多，主题默认存取期限为 10 分鐘。也就是説，调用后资料会存在 localStorage 里，10 分鐘内刷新网站只会去 localStorage 读取资料。 10 分鐘期限一过，刷新页面时才会去调取 API 读取新的数据。（3.6.0 新增了 storage 配置，可自行配置缓存时间）。

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

1
2
3
4
5
6
7
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6  # 显示的数量
  storage: 10 # 设置缓存时间，单位 分钟 
  avatar: true # 是否显示头像

15. 网站背景

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

1
2
3
4
# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/颜色单词/渐变色)
# 留空 不显示背景
background: url(https://source.fomal.cc/img/dm1.webp)

如果你的网站根目录不是'/'，使用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog，引用一张 img/xx.png 图片，则设置 background 为 url(/blog/img/xx.png)

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

1
2
# footer是否显示图片背景(与top_img一致)
footer_bg: true
  • 留空/false：显示默认的颜色
  • 图片链接：显示所配置的图片
  • 颜色包括HEX值 - #0000FF | RGB值 - rgb(0,0,255) | 颜色单词 - orange | 渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)：对应的颜色
  • true：显示跟 top_img 一样

19. 鼠标点击效果

1
2
3
4
# 点击出現爱心
click_heart:
  enable: true
  mobile: false

20. 自定义字体和字体大小

20.1 全局字体

修改主题配置文件_config.butterfly.yml 中的 font-family 属性即可，如不需要配置，请留空。

1
2
3
4
5
6
7
8
9
10
11
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: '15px'
  code-font-size: '14px'
  # -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif
  # Wenkai, consolas, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
  font-family: var(--global-font), Consolas_1, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
  # consolas, ZhuZiAWan_light, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif
  # Consolas_1, ZhuZiAWan_light, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif
  code-font-family: Consolas_1, var(--global-font), "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

20.2 Blog 标题字体

修改主题配置文件_config.butterfly.yml 中的 blog_title_font 属性即可，如不需要配置，请留空。
如不需要使用网络字体，只需要把 font_link 留空就行。

1
2
3
4
5
6
7
# Font settings for the site title and site subtitle
# https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
# Titillium Web, 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft JhengHei' , 'Microsoft YaHei' , sans-serif
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link: 
  font-family: var(--global-font)

21. 网站副标题

可设置主页中显示的网站副标题或者喜欢的座右铭。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # 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:
    - "Welcome to Fomalhaut🥝のTiny Home!🤣🤣🤣"
    - "Hope you have a nice day!🍭🍭🍭"

22. 页面加载动画 preloader

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

1
2
# 加载动画 Loading Animation
preloader: true

23. 字数统计

注意必须要安装依赖才能设置为 true，否则会报错！

  1. 安装插件：在你的博客根目录，打开 cmd 命令窗口执行 npm install hexo-wordcount --save。
  2. 开启配置：修改主题配置文件_config.butterfly.yml 中的 wordcount。
1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

24. 图片大图查看模式

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

1
2
# fancybox http://fancyapps.com/fancybox/3/
fancybox: true

25.Pjax

1
2
3
4
5
6
7
8
9
10
11
# Pjax [Beta]
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax: 
  enable: true
  # 对于一些第三方插件，有些并不支持 pjax 。
  # 你可以把网页加入到 exclude 里，这个网页会被 pjax 排除在外。
  # 点击该网页会重新加载网站。
  exclude: 
    - /music/
    - /no-pjax/

26.Inject

如想添加额外的 js/css/meta 等等东西，可以在 Inject 里添加，head (</body> 标签之前)， bottom (</html> 标签之前)。

1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script src="xxxx"></script>

27. 本地搜索系统

安装依赖：前往博客根目录，打开 cmd 命令窗口执行 npm install hexo-generator-search --save。

1
npm install hexo-generator-search --save

注入配置：修改站点配置文件_config.yml，添加如下代码：

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

主题中开启搜索：在主题配置文件_config.butterfly.yml 中修改以下内容：

1
2
3
local_search:
-  enable: false
+  enable: true

重新编译运行，即可看到效果：前往博客根目录，打开 cmd 命令窗口依次执行如下命令：

1
2
hexo cl && hexo generate
hexo s -p 8000