在 博客搭建过程(一) 中简单说明了hexo博客框架所需要的环境和基本命令

这里更加详细地解释一下如何具体配置(主要是怕自己忘了)。由于hexo和butterfly主题都有_config.yml配置文件，
这里将hexo的配置文件称为站点_config文件，butterfly主题的配置文件即为主题_config文件。

附上找到的一个在线代码对比工具网址：https://tool.oschina.net/diff

站点配置文件

在站点配置文件中，第5行开始描述了站点的基本信息，改成自己的即可。

基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Site
title: Xiaoma's blog
subtitle: ''
description: ''
keywords:
author: Nocturne
language: ZN-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://nocturne228.github.io/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

主题和部署仓库

第100行的theme属性改为自己所用的主题(在每个主题的主页都会有提醒)；填上要部署博客的仓库地址，我用的是git，部署在github上

1
2
3
4
5
6
7
8
9
10
11
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:Nocturne228/Nocturne228.github.io.git
  branch: main

以上是站点配置文件的修改，下面是主题配置文件：

主题配置文件

目录

修改目录(页面左上角的导航栏的内容)

1
2
3
4
5
6
7
8
9
10
11
12
13
# Menu 目錄
menu:
  Articles||fas fa-pen-nib:
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Categories: /categories/ || fas fa-folder-open

  Feelings||fas fa-tablets:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video

  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

代码块风格

代码块设置为mac风格(纯粹因为好看)，其他属性随意

1
2
3
4
# Code Blocks (代碼相關)
# --------------------------------------

highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false

社交网站

社交网站设置为自己的账号

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

下面是一些图标和图像的装饰，文件都在themes/butterfly/source/下的img和my_image文件夹中

  • favicon：网站图标
  • avatar：头像
  • banner image：顶部横幅图像
  • index_img：主页图像
  • default_top_img：默认顶部图像

网站图标图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Favicon（網站圖標）
favicon: /img/terminal-solid.svg

# Avatar (頭像)
avatar:
  img: /my_image/avatar.jpg
  effect: false

# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img: /my_image/girl.jpg

# If the banner of page not setting, it will show the top_img
default_top_img: /my_image/girl.jpg

文章封面

cover描述了文章(post)的封面图像，在主题_config文件中可以指定一组图像随机设置，我全部设为了我哀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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:
    - /my_image/haibara1.png
    - /my_image/haibara2.jpg
    - /my_image/haibara3.jpg
    - /my_image/haibara4.jpg
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

分页设置

pagination：分页设置，选择2即下一篇指向新发表的文章

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: 2

主题颜色自定义

主题颜色自定义：这位更是重量级，咱也不懂配色，大概设置成协调的(？)算了(这么敷衍的配色也是花了好久配好的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Theme color for customize
# Notice: color value must in double quotes like "#000" or may cause error!

theme_color:
  enable: true
  main: "#f3b184"
  paginator: "#fdb0a1"
  button_hover: "#ed9e67"
  text_selection: "#bc5b4b"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#b3effb"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#fded8b"
  meta_theme_color_light: "ffffff"
  meta_theme_color_dark: "#0d0d0d"

网站背景图

网站背景图像(要用url包裹起来，参数可以填网址也可以填文件路径)

1
2
3
4
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(/my_image/girl.jpg)

副标题

进入博客时显示的副标题：

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:
    - 出发啦不要问那路在哪

字数统计功能

字数统计功能，这里注意要安装插件

1
npm install hexo-wordcount --save
1
2
3
4
5
6
7
# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

系列文章

这个我还不会用

1
2
3
4
5
6
# series (系列文章)
series:
  enable: true
  orderBy: 'title' # Order by title or date
  order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
  number: true

加密

2024/1/29

添加加密访问功能：安装hexo加密插件：(官方文档 https://github.com/D0n9X1n/hexo-blog-encrypt)

1
npm install hexo-blog-encrypt

在文章的frontmatters中设置password参数即可，这篇博客也有更具体的介绍：https://www.itfanr.cc/2021/04/16/hexo-blog-article-encryption/

完善数学公式

2024/2/4

这里重新安装了博客系统，使用mathjax渲染数学公式。根据butterfly官方文档，由于hexo自带渲染器marked，先执行

1
npm uninstall hexo-renderer-marked --save

卸载marked渲染器，然后安装kramed渲染器：
1
npm install hexo-renderer-kramed --save

在主题配置文件中修改

1
2
3
4
5
mathjax:
  enable: true
  # true 表示每一頁都加載mathjax.js
  # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true
  per_page: false

在hexo根目录配置文件中修改

1
2
3
4
5
6
7
8
kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

由于latex的渲染会与markdown的部分语法混淆，这里参考 https://i-m.dev/posts/20190304-210101.html 找到node_modules/kramed/lib/rules/inline.js文件，将其中的

1
2
3
4
5
6
var inline = {
  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  // ...
  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  // ...
};

改为

1
2
3
4
5
6
var inline = {
  escape: /^\\([`*\[\]()#$+\-.!_>])/,
  // ...
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  // ...
};

其他功能待开发……

前往博客搭建过程(一)