Hexo 博客搭建基础教程(III)

前言📝
若需要emoji，可以选这个emoji表情符号，然后去里面找选自己的喜欢，最后可以直接拷贝
注意：我的博客根目录路径为 【D:/Hexo-Blog/blog-demo】，下文所说的根目录都是此路径，将用[BlogRoot]代替。
修改站点配置文件_config.yml，路径为[BlogRoot]\_config.yml
修改主题配置文件_config.butterfly.yml，路径为[BlogRoot]\_config.butterfly.yml

语言 🍏

点击查看教程

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

  • default(en)
  • zh-CN (简体中文)
  • zh-TW (繁体中文)
    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: Hexo
    subtitle: ''
    description: ''
    keywords:
    author: John Doe
    language: zh-CN
    timezone: ''

网站资料 🥥

点击查看教程

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改站点配置文件_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
8
9
10
11
12
title: Sun`Blog	#网站标题
subtitle: '天生我材必有用' #网站副标题
# 网站描述
description: '大道至简，开发由我；个人兴趣爱好，总结分享经验。'
#网站的关键词。使用半角逗号“，”分隔多个关键词
keywords: [Sun`Blog,Python, Go, linux等等]
# 作者
author: Sun
# 网站使用的语言
language: zh-CN
# 网站时区。Hexo 默认使用电脑的时区。
timezone: 'Asia/Shanghai'

导航菜单 🥟

点击查看教程

修改主题配置文件_config.butterfly.yml
复制代码时，注意不要按tab，要按几个空格

1
2
3
4
5
6
7
8
9
10
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
  • 必须是 /xxx/，后面||分开，然后写图标名，如果不想显示图标，图标名可不写
  • 若主题版本大于 v4.0.0，可以直接在子目录里添加 hide 隐藏子目录，如下面的List
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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||hide:
       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
    menu:
      首页: / || fas fa-home
      时间轴: /archives/ || fas fa-archive
      标签: /tags/ || fas fa-tags
      分类: /categories/ || fas fa-folder-open
      清单||fa fa-heartbeat:
        音乐: /music/ || fas fa-music
        照片: /Gallery/ || fas fa-images
        电影: /movies/ || fas fa-video
      友链: /link/ || fas fa-link
      关于: /about/ || fas fa-heart
    效果如下图所示：

##代码 🥠
###代码高亮主题 🍰

点击查看教程

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

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light
    修改主题配置文件_config.butterfly.yml。中的highlight_theme属性。
1
highlight_theme: darker // 冒号后面要按一个空格然后写darker
1
highlight_theme: pale night
1
highlight_theme: light
1
highlight_theme: ocean
1
highlight_theme: mac

###代码复制 🎂

点击查看教程

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

1
highlight_copy: true

###代码框展开/关闭 🍪

点击查看教程

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

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

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击>可展开代码。

  • true 全部代码框不展开，需点击>打开
  • false 代码框展开，有>点击按钮
  • none 不显示>按钮

###代码换行 🍦

点击查看教程

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

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

1
code_word_wrap: true

###代码高度限制 🍮

点击查看教程

可配置代码高度限制，超出的部分会隐藏，并显示展开按钮。
修改主题配置文件_config.butterfly.yml。中的highlight_height_limit属性。

1
highlight_height_limit: false # unit: px
  1. 单位是px，直接添加数字，如 200
  2. 实际限制高度为highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代码高度只超出highlight_height_limit一点时，出现展开按钮，展开没内容。
  3. 不适用于隐藏后的代码块（ css 设置 display: none）。

##社交图标 🍺

点击查看教程

Butterfly支持font-awesome v6图标。
书写格式：图标名：url || 描述性文字。
修改主题配置文件_config.butterfly.yml
复制代码时，注意不要按tab，要按几个空格

1
2
3
social:
  fab fa-github: https://github.com/xxx || Github
  fas fa-envelope: https:xxx@mail.com || Email

##顶部图 🧃

点击查看教程

如果不要显示顶部图，可直接配置disable_top_img: true。

配置解释
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: xxx.png

其它页面 （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。
    复制代码时，注意不要按tab，要按几个空格
    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，此时写法应为：
    复制代码时，注意不要按tab，要按几个空格
    1
    2
    3
    4
    default_cover:
      - https://file.moyublog.com/d/file/2021-05-19/30855f1b0577e65e0a0f3bd6fb20f3d7.jpg
      - https://file.moyublog.com/d/file/2020-12-22/d12fa69277e7f86c531fb34bc35ddb3e.jpg
      - https://img1.tt98.com/bizhi/20191201/cbebd9423acee31b43ed01ecf1df5816.jpg

##文章页相关配置 🍫
###文章meta显示 🍬

点击查看教程

post_meta这个属性用于显示文章的相关信息的，修改主题配置文件_config.butterfly.yml。
复制代码时，注意不要按tab，要按几个空格

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 显示描述性文字

###文章版权和协议许可 🍣

点击查看教程

修改主题配置文件_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
2
3
4
5
---
title: 这是一个标题的文章
copyright: false  # 不需要显示版权
---
这是一个内容的文章
从`v3.0.0`开始，支持对单独文章设置版权信息，可以在文章`Front-matter`单独设置。
1
2
3
4
5
6
7
8
9
---
title: 这是一个标题的文章
post_copyright:
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请注明来自原作者
---
这是一个内容的文章

###文章打赏 🍛

点击查看教程

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

1
2
3
4
5
6
7
8
9
reward:
  enable: false
  QR_code:
    - img: /img/wechat.jpg    # 路径相当于[BlogRoot]/source/img/wechat.jpg
      link:
      text: wechat
    - img: /img/alipay.jpg    # 路径相当于[BlogRoot]/source/img/alipay.jpg
      link:
      text: alipay

###文章目录TOC 🥞

点击查看教程

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

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

###相关文章推荐 🍞

点击查看教程

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

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

###文章锚点 🧀

点击查看教程

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题ID进行替换。
注意: 每替换一次，会留下一个历史记录。所以如果一篇文章有很多锚点的话，网页的历史记录会很多。
修改主题配置文件_config.butterfly.yml。

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

###文章过期提醒 🧄

点击查看教程

可设置是否显示文章过期提醒，以更新时间为基准。
修改主题配置文件_config.butterfly.yml。

1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # 距离更新时间多少天才显示文章过期提醒
  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. # 天数之后的文字

###文章分页按钮 🥦

点击查看教程

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

###头像 🍊

点击查看教程

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

1
2
3
avatar:
  img: /head.jpg  # 路径相当于[BlogRoot]/source/head.jpg
  effect: false # true则会一直转圈

##文章内容复制相关配置 🍋

点击查看教程

修改主题配置文件_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: true	# 是否开启复制版权信息添加
    limit_count: 50	# 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息

##Footer 设置 🍇

点击查看教程

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

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

可以参考tzy大佬的的custom_text填写示例：

1
custom_text: I wish you to become your own sun, no need to rely on who's light.<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://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署，默认线路托管于Vercel"></a>&nbsp;<a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署，联通线路托管于Coding"></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>
对于部分人需要写`ICP` 的，也可以写在`custom_text`里。
1
custom_text: <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号：xxxxxx</span></a>

##右下角按钮 🌰
###简繁转换 🥩

点击查看教程

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

1
2
3
4
5
6
7
8
9
10
11
12
13
translate:
  enable: false
  # 默认按钮显示文字(网站是简体，应设置为'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: '簡'

###夜间模式 🥘

点击查看教程

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

1
2
3
4
5
6
7
8
9
10
# dark mode
darkmode:
  enable: false
  # 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: false

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

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

###阅读模式 🍟

点击查看教程

阅读模式下会去掉除文章外的内容，避免干扰阅读。只会出现在文章页面，右下角会有阅读模式按钮。
修改主题配置文件_config.butterfly.yml。

1
readmode: true

##侧边栏设置 🧆
###排版 🧈

点击查看教程

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。
修改主题配置文件_config.butterfly.yml。(下面是fomlt大佬的配置项可以参考)

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
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: 🛴前往小家...
      link: https://github.com/fomalhaut1998
  card_announcement:
    enable: true
    content: <center>主域名：<br><a href="https://www.fomal.cc"><b><font color="#5ea6e5">fomal.cc</font></b></a>&nbsp;|&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: false
    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: false
    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: false
    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: false
    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

###访问人数(UV 和 PV) 🍗

点击查看教程

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

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

###运行时间 🍞

点击查看教程

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

1
2
3
4
5
6
7
8
# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: false
  publish_date: 3/18/2023 00:00:00
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

###最新评论 🥣

点击查看教程

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 # 是否显示头像

###网站背景 🍙

点击查看教程

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

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

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

###打字效果 🍚

点击查看教程

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

##footer 背景 🍡

点击查看教程

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

##背景特效 🦐

点击查看教程

可设置每次刷新更换彩带，或者每次点击更换彩带。详细配置可查看canvas_ribbon
修改主题配置文件_config.butterfly.yml

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #設置是否每次點擊都更換彩带
  mobile: false # false 手機端不顯示 true 手機端顯示

好看的彩带背景，会飘动。

1
2
3
canvas_fluttering_ribbon:
  enable: true
  mobile: true # false 手机端不显示 true 手机端显示
1
2
3
4
5
6
7
canvas_nest:
  enable: true
  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 # false 手機端不顯示 true 手機端顯示

##鼠标点击效果 🍾

点击查看教程

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

zIndex建议只在-1和9999上选。
-1 代表烟火效果在底部。
9999 代表烟火效果在前面。

1
2
3
4
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false
1
2
3
4
# 点击出現爱心
click_heart:
  enable: true
  mobile: false
1
2
3
4
5
6
7
8
9
10
# 点击出现文字，文字可自行修改
ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px
  random: false # 文字随机显示
  mobile: false

##自定义字体和字体大小 🍹
###全局字体 🍼

点击查看教程

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

###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)

###网站副标题 🍷

点击查看教程

可设置主页中显示的网站副标题或者喜欢的座右铭。
修改主题配置文件_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!🍭🍭🍭"

###页面加载动画preloader 🍭

点击查看教程

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

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

###字数统计 🍦

点击查看教程

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

  1. 安装插件：在你的博客根目录，打开cmd命令窗口执行npm install hexo-wordcount --save。
    1
    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

##图片大图查看模式 🍧

点击查看教程

只能开启一个。
如果你并不想为某张图片添加大图查看模式，你可以使用 html 格式引用图片，并为图片添加 no-lightbox class 名，例如：<img src="xxxx.jpg" class="no-lightbox">。

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

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

##Pjax 🍰

点击查看教程

当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址。这样可以不用重复加载相同的资源（css/js）， 从而提升网页的加载速度。
修改主题配置文件_config.butterfly.yml

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/

注意：使用 pjax 后，一些自己DIY的js可能会无效，跳转页面时需要重新调用（例如朋友圈、说说等），具体请参考Pjax文档。

##Inject 🔓

点击查看教程

如想添加额外的js/css/meta等等东西，可以在Inject里添加，head(</body>标签之前)， bottom(</html>标签之前)。
修改主题配置文件_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
# 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"> 
	- <link rel="stylesheet" href="/css/12.css">   #相当于路径相当于[BlogRoot]/source/css/123.jpg 
  bottom:
    - <script src="xxxx"></script>
    - <script src="/js/12.js"></script>   #相当于路径相当于[BlogRoot]/source/js/123.js

##本地搜索系统 🍳

点击查看教程
  1. 安装依赖：前往博客根目录，打开cmd命令窗口执行npm install hexo-generator-search –save。
    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中修改以下内容：
    1
    2
    3
    local_search:
    -  enable: false    # - 表示 删除一行
    +  enable: true		# + 表示 添加一行
  4. 重新编译运行，即可看到效果：前往博客根目录，打开cmd命令窗口依次执行如下命令：
    1
    hexo cl && hexo g && hexo s -p 4001
    详情可参考 hexo-generator-search