前言

手把手搭建个人博客系列教程-五: 本节设置文章相关,侧边栏,footer,右下角按钮,404页面,特效,字体,本地搜索,显示模式,预加载动画,标签外挂等

参考文档:

环境与工具

  • 操作系统：Windows 10
  • VSCode编辑器

文章相关配置

文章meta显示

文章页针对每篇文章会记录其基本信息meta，包括创建日期、更新日期、分类信息、标签信息等，这些信息会在主页的文章卡片部分和文章页的顶部、底部显示，下面是关于文章meta信息的配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page: # 主页
    date_type: created # created/updated/both 主页文章日期是创建日或者更新日或都显示
    date_format: date # date/relative 显示日期还是相对日期
    categories: true # true/false 主页是否显示分类
    tags: true # true/false 主页是否显示标签
    label: true # true/false 显示描述性文字
  post:
    date_type: updated # created/updated/both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是是相对日期
    categories: true # true/false 文章页是否显示分类
    tags: true # true/false 文章页是否显示标签
    label: true # true/false 显示描述性文字
  • 相对日期指的距今的时间，例如：一个月前
  • 绝对日期指的是日期格式的时间，例如：2024-05-19

主页文章描述设置

主页文章描述使用index_post_content项来配置，包含method和length两个配置项， method项可选值：

可选值 描述
1 文章中front-matter中配置的description
2 both(用description如有，否则从文章自动节选)
3 从文章自动节选

method选2或3时需要设置length来决定自动节选的长度

复制相关配置

参数解释：

参数 描述 可选值
enable 是否启用 true
limit_count 复制字数超过设定值时，将自动在复制内容后面加上版权信息 数字，如:100

文章版权

post_copyright配置文章版权信息，decode配置项启用后会对版权信息中的中文信息解码，如果你的文章标题或者文章链接中包含中文就启用此项
如果有文章(如：转载文章)不需要显示版权，可以在文章的front-matter部分配置copyright项为false

文章打赏

在每篇文章的结尾添加打赏功能，格式：

1
2
3
4
5
6
7
8
9
10
reward:
  enable: true  # 是否启用
  text: 打赏按钮显示的文字
  QR_code:
    - img: /img/wechatpay.jpg   # 可为本地图片或者外链图片
      link: # 点击跳转的链接
      text: wechatpay    # 图片下方的介绍信息
    - img: /img/alipay.jpg
      link:
      text: alipay

文章页侧边目录

文章页侧边栏目录展示toc，配置项：

配置项 描述
post 是否在文章页启用
page 是否在其他页面页启用
number 目录前的顺序数字是否启用
expand 多级目录是否展开
style_simple 是否在文章页只展示目录，隐藏社交卡片等侧边栏，此项只对文章页有效
scroll_percent 阅读进度展示是否启用

文章推荐

related_post文章推荐配置，根据文章的tags比重推荐

  • limit 项设置推荐的文章数量
  • data_type 项配置推荐文章日期显示为 created 还是 updated

文章分页

post_pagination文章分页是文章底部下一篇上一篇的部分，post_pagination配置项解释：

值 描述
1 下一篇指向更早的文章
2 下一篇指向更新的文章
false 不启用分页功能

文章过期提醒

noticeOutdate文章过期提醒配置项：

配置项 描述 可选值
style 过期提醒消息的风格 simple/flat
limit_day 文章更新距今超过此参数会进行过期提醒 数字，如500表示500天
position 提醒消息的位置 top/bottom
message_prev 天数之前的消息 例:It has been
message_next 天数之后的消息 例如:days since the last update, the content may be outdated.

分享文章

在博客文章页末尾添加分享按钮

1
2
3
sharejs:
  enable: true
  sites: wechat,weibo,qq

字数统计

wordcount: 文章的字数统计，会显示在文章页的最上方统计栏，包含字数统计，阅读需要的时间，总字数统计信息，更多介绍见官网

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

文章页的标题图标

beautify: 给文章的每个标题前添加一个图标

1
2
3
4
5
beautify:
  enable: true
  field: post # site/post   # site:整个网站应用还是只在文章页面
  title-prefix-icon: '\f0c1'    # 图标
  title-prefix-icon-color: '#F47466'    # 图标颜色

水平分割线图标设置

hr_icon: 定制分割线样式，使用Font Awesome icon，在fontawesome官网找到图标，复制unicode，格式'\unicode'，例如'\3423'

1
2
3
4
hr_icon:
  enable: true
  icon: '\3423'
  icon-top:

footer设置

footer部分的配置，用于显示在所有页面的footer部分，配置项：

配置项 描述
since 网站建立年份，会自动补充为建立年份-现在年份的形式
custom_text 可自定义显示的内容
copyright 是否附上版权声明

对于部分人需要写 ICP 的，也可以写在 custom_text里
custom_text部分可自定义内容和样式，可以使用标签包裹的链接和图标，例：

1
Welcome to <a href="https://PeakofMountains.github.io/">PeakofMountains Blog</a>! Have a nice day! <p><a target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客以Hexo为框架"></a>&nbsp;<a target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="采用butterfly主题"></a>&nbsp;  <a target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="使用JsDelivr为静态资源进行CDN加速"></a> &nbsp;<a target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管"></a>&nbsp;<a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p>

参考Fomalhaut大佬博客的custom_text设置

侧边栏设置

aside侧边栏设置

侧边排版和默认部件

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 # 手机端启用侧边栏
  position: right # left/right 侧边栏的位置
  display:  # 文章标签等的基本信息的显示
    archive: false  # 展示archive
    tag: false  # 展示tag
    category: false # 展示category
  card_author:  # 作者卡片部分
    enable: true
    description: 一个热爱计算机技术的小菜鸟
    button:
      enable: true
      icon: fab fa-github
      text: 去作者Github主页看看
      link: https://github.com/PeakofMountains/
  card_announcement: # 公告
    enable: true
    content: 喝杯水,看看窗外放松放松吧！
  card_recent_post: # 最近文章模块
    enable: true
    limit: 3 # 如果设置为0则展示所有最近文章
    sort: updated # date/updated 最近文章的排序方式
    sort_order: # 不建议修改
  card_categories:  # 显示总计的categories
    enable: false
    limit: 8 # 如果设置为0则展示所有最近文章
    expand: none # none/true/false
    sort_order: # 不建议修改
  card_tags:    # 显示总计的tags
    enable: false
    limit: 12 # 如果设置为0则展示所有最近文章
    color: true
    orderby: random # 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: false
    type: monthly # yearly or monthly
    format: MMMM YYYY # 例子: 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_post_series: # 系列文章卡片
    enable: true
    series_title: false # 展示系列标题
    orderBy: 'date' # Order by title/date
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending

网站访问人数

busuanzi访问量、总访问量、阅读量的配置，更多介绍见官方网站

1
2
3
4
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

网站运行时间

runtimeshow网站运行时间，配置项 publish_date的格式：
Month/Day/Year Time 或者 Year/Month/Day Time，使用例子：

1
publish_date: 2024/5/15 00:00:00

最新评论

newest_comments侧边栏最新评论板块

1
2
3
4
5
6
newest_comments:
  enable: false
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6 # 在侧边栏显示的评论数量
  storage: 30 # unit: mins, save data to localStorage 评论缓存时间，每隔 x min才将评论内容更新
  avatar: true # 是否显示评论人的头像

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

自定义添加侧边板块

参考官方教程

页面右下角按钮

繁简转换

translate繁简转换按钮

1
2
3
4
5
6
7
8
9
10
11
12
translate:
  enable: true
  # The text of a button
  default: 繁
  # 网站语言,1:繁体;2:简体
  defaultEncoding: 2
  # Time delay
  translateDelay: 0
  # 简体中文时按钮显示的文字
  msgToTraditionalChinese: '繁'
  # 繁体中文时按钮显示的文字
  msgToSimplifiedChinese: '简'

阅读模式

readmode阅读模式

1
readmode: true

readmode只在文章页起作用

夜间模式

夜间模式darkmode

1
2
3
4
5
6
7
8
9
10
11
12
darkmode:
  enable: false
  # 夜间白天模式切换按钮
  button: true
  # 自动切换 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
  # 设置白天时间，可选值 0~24. 默认start: 6, end: 20
  start: # 8
  end: # 22

autoChangeMode项设置夜间白天自动切换的方式，参数值含义：

参数值 描述
1 跟随系统，系统不支持黑夜模式则在6 pm-6 am自动切换为黑夜模式
2 在6 pm-6 am自动切换为黑夜模式
false 不启用自动切换

滚动条百分比

rightside_scroll_percent右侧滚动条百分比

配置404页面

butterfly主题内置了一个简单的404页面，在_config.butterfly.yml中启用，将enable项配置为true即可

本地预览访问出错网站是不会跳转到404页面的，如果需要本地预览，通过http://localhost:4000/404.html来访问

本地搜索系统

  1. local_search本地搜索系统需要先安装依赖，在博客根目录打开终端:
    1
    npm install hexo-generator-search --save
  2. 在全局配置文件 _config.yml 中添加配置：
    1
    2
    3
    4
    search:
      path: search.xml
      field: post
      content: true
  3. 在主题配置文件 _config.butterfly.yml中启动local_search，local_search: true

主题颜色配置

主题颜色配置theme_color

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
3
4
5
6
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # 冒光特效
  shake: true #  抖动特效
  mobile: false

静止彩带背景特效

网页背景为静止彩带，点击后彩带切换

1
2
3
4
5
6
7
8
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: false

动态彩带特效

canvas_fluttering_ribbon:动态彩带背景，彩带会自动运动和变色

1
2
3
4
# See: https://github.com/hustcc/ribbon.js
canvas_fluttering_ribbon:
  enable: true
  mobile: false

线条集束特效

canvas_nest: 线条集束特效

1
2
3
4
5
6
7
8
9
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,0,255' # 线条颜色
  opacity: 0.9 # the opacity of line (0~1), default: 0.5. 透明度
  zIndex: -1 # z-index property of the background, default: -1.
  count: 40 # the number of lines, default: 99. 线条数
  mobile: false

参数介绍：

参数 描述 可选值
color 线条颜色 RGB values:(R,G,B)，例：'0,0,255'，默认 '0,0,0'
opacity 线条透明度 0~9，默认0.5，例：0.9，数值0代表完全透明
zIndex 在背景上的层级 默认-1
count 特效线条的数量 默认99

鼠标点击特效

烟花特效

fireworks: 鼠标点击后在点击处出现烟花特效

1
2
3
4
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999，设置9999是为了将特效显示在最高层，如此点击画面中任何部位都会展示特效
  mobile: false # 移动端是否启用

心形特效

click_heart: 鼠标点击后在点击处出现心形图案特效

1
2
3
click_heart:
  enable: true
  mobile: false

文字特效

鼠标点击后在点击处出现预设的文字特效

1
2
3
4
5
6
7
8
clickShowText:
  enable: true
  text:
    - hello
    - 对的
  fontSize: 16px    # 字体大小
  random: false # 是否随机设定的文本
  mobile: false

网站默认显示模式

Default display mode网站默认的主题显示模式，light或者dark，包括文章的背景色，主页的文章卡片背景色、侧边栏背景色等

1
display_mode: dark  # light/dark,默认为light

主页打字特效

subtitle主页打字特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 主页subtitle副标题
subtitle:
  enable: true
  # 打字特效
  effect: true
  # loop 循环打字 true/false
  loop: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/customization
  typed_option:
  # source 调用第三方服务
  source: false
  sub:
   - "Have a good day!"
   - "Stay hungry, stay foolish."

source配置项的参数介绍：

值 描述
false 关闭调用
1 调用一言网的一句话
2 调用一句网的一句话
3 调用今日诗词的一句话

subtitle 会先显示 source , 再显示 sub 的內容
如果关闭打字特效，subtitle 只会显示 sub 的第一行文字

字体设置

全局字体设置

font: 全局字体设置，可配置全局字体的大小、字体样式、代码字体大小、代码字体样式

1
2
3
4
5
6
7
8
9
font:
  global-font-size: '16px'
  code-font-size: '15px'
  # -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', 'Microsoft Yahei'
  # 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"

网站名字字体

1
2
3
4
# 左上角网站名字 主页居中网站名字
blog_title_font:
  font_link:
  font-family: -apple-system

预加载动画

preloader: 预加载动画设置，进入网页有些图片类资源还没加载好，此项开启后会在此时播放预加载动画，知道资源全部加载完成

1
2
3
4
5
6
7
8
preloader:
  enable: false
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

标签外挂

标签外挂是Hexo独有的功能，并不是标准的Markdown格式。
以下的写法，只适用于Butterfly主题，用在其它主题上不会有效果，甚至可能会报错。使用前请留意

标签外挂虽然能为主题带来一些额外的功能和UI方面的强化，但是，标签外挂也有明显的限制，使用时请留意

标签外挂可用的地方很多，这里只介绍最常用的Note外挂标签的一种用法，更多详细内容请参考官网介绍

Note

Note外挂标签的使用格式：

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

class,no-icon,style均是可选参数，可以忽略不填，参数介绍:

参数 描述 可选值
class 标识,不同标识配色不同 default/primary/success/info/warning/danger
no-icon 不显示icon no-icon
style 风格,可覆盖note配置的style值 simple/modern/flat/disabled