Use Hexo + Github Build Your Blog 教程(三)客制化butterfly主题

参考官方的配置教程

每个主题都有自己的配置方法，官方都有详细的说明，可以参考官方的说明文档。这里以博主使用的butterfly主题为例。butterfly的官方配置教程在这里https://butterfly.js.org/

我们的大部分修改要在主题文件的_config.yml和hexo目录中的_config.yml文件中进行。

修改Hexo配置文件

在_config.yml中找到字段Site，修改基本信息

1
2
3
4
5
6
7
8
# Site
title: 网站的标题
subtitle: ''
description: ''
keywords:
author: 网站作者名
language: zh-CN # en # zh-TW
timezone: ''

修改主题配置文件

在themes/butterfly/_config.yml进行修改，具体的修改方式可以参考官方的说明文档https://butterfly.js.org/。这里不再赘述了。

为butterfly主题添加Gitalk评论功能

使用gitalk评论系统，原因是因为它可以直接在github上管理评论，不需要在别的平台注册，并且有github的背书，所以安全性更高。

注册OAuth Application

点开Github头像，点击Settings，然后点击Developer settings，再点OAuth Apps，然后点击New OAuth App。

填写相关信息，注意Homepage URL和Authorization callback URL要填写博客的地址。

配置Gitalk

在themes/butterfly/_config.yml中找到字段comments，修改为如下内容

1
2
3
4
5
6
7
8
9
10
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use:  Gitalk
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

然后找到gitalk字段，修改如下

1
2
3
4
5
6
7
8
9
# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: xxxxxxxxxxxx your client id
  client_secret: xxxxxxxxxxxxxxxxxxx your client secret
  repo: shenmuxin.github.io # 博客的仓库名称(注意不是地址)
  owner: shenmuxin # github用户名
  admin: shenmuxin # github用户名
  option:

这样就成功配置了Gitalk，效果如下

为butterfly配置加载动画preloader

在themes/butterfly/_config.yml中找到字段preloader，修改为如下内容

1
2
3
4
5
6
7
8
9
# Loading Animation (加載動畫)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 2
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

为butterfly配置打字副标题

在themes/butterfly/_config.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
  # 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:
    - Your slogan.

在themes/butterfly/_config.yml中找到字段local_search，修改为如下内容

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:

然后前往博客的根目录，安装依赖

1
npm install hexo-generator-search --save

使用更好的渲染器

首先安装Mathjax插件

1
npm install hexo-math --save

然后更改Hexo的Markdown渲染器

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

修改转义配置进入node_modules\kramed\lig\rules\inline.js
找到escape字段，修改如下

1
escape: /^\\([`*\[\]()#$+\-.!_>])/,

找到em字段，修改如下

1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

Reference

https://www.cnblogs.com/qisi007/p/13731562.html
https://blog.misaka.rest/2023/02/01/hexo-gitalk/
https://butterfly.js.org/
https://shanhainanhua.github.io/2019/09/18/hexo-next%E4%B8%BB%E9%A2%98-markdown%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F%E4%B8%8D%E6%AD%A3%E5%B8%B8%E6%98%BE%E7%A4%BA%E9%97%AE%E9%A2%98/