最近，我的观念发生了一些改变。回顾过去一两年，我在折腾各种环境上花费了太多时间和精力，这让我渐渐偏离了最初的技术研究方向，再者很多基础设施我并没有从一开始用心认证去做，一时兴起占据多数。现在我觉得应该收收心思，少些花里胡哨，多点脚踏实地，决定将个人基础设施踏踏实实的用心做好。我觉得重构博客是一个不错的开始。

环境准备

在搭建博客之前最好选择一个适合自己的搭载的博客环境，最开始我是准备在物理机上构建，但是考虑到后续可能会有很多文章内容包含会被杀软查杀的命令代码，所以我使用Hyper-V安装了一台搭载Debian 12操作系统的虚拟机用来搭载我的博客站点。VMware最近一两年在使用过程中总是出现一些莫名其妙的小问题，但是让我个人感觉非常不爽，我更喜欢Hyper-V，虽然两者对于个人用户来说没啥大区别。VMware与Hyper-V其实都不方便复制粘贴的，所以可以开启服务器的SSH服务，便于复制粘贴：

1
systemctl start sshd.service

image-20241014104940890

Windows 10以后的操作系统命令行已经自带ssh工具了，打开物理机终端输入：

1
2
ssh debian@172.28.99.81
su root

image-20241014105817712

因为没有桌面环境，后续与服务器上的文件进行交互会非常麻烦，Hyper-V构建linux虚拟机图形化桌面环境会很卡顿不丝滑，所以我很简单干脆的在Debian 12虚拟机中安装了宝塔,安装命令在以下地址，比较傻瓜式，请注意这是可选方案：

1
https://www.bt.cn/new/download.html

博客生成器我选择Hexo，需要Nodejs环境，我个人喜欢最新，而不是稳定，Debian 12安装最新版Nodejs环境：

1
2
sudo apt update
sudo apt install -y curl git software-properties-common

因为系统源里的nodejs不是最新的，而software-properties-common会帮助我添加第三方软件源，比如添加Nodejs源：

1
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -

image-20241014110854126

接下来运行安装命令会将最新的Nodejs部署到服务器中：

1
apt-get install nodejs -y

使用-v检查是否安装成功，是否有环境变量:

image-20241014111141572

通常来说这里比较傻瓜式不会报错，报错大概率是因为网络原因引起的，至此搭建博客的初始环境已经构建完成。

安装Hexo

Hexo官方站点：

1
https://hexo.io/zh-cn/

给自己的博客找一个位置，我选择了宝塔安装过程中选择的web目录，安装Hexo：

1
npm install hexo-cli -g

初始化Hexo博客站点：

1
2
3
mkdir Blog && cd Blog
hexo init 
npm install

image-20241014112546506

使用命令可以进行预览生成，导航到虚拟机ip地址端口：

1
hexo s -p 8001

image-20241014112824036

博客美化

接下来是为自己的博客挑选一个主题，我选择了butterfly:

1
https://github.com/jerryc127/hexo-theme-butterfly

在博客根目录运行以下命令：

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

对站点根目录下的**_config.yml**选项进行更改：

1
theme: butterfly

主题配置文件复制粘贴到根目录，并重命名：

1
cp themes/butterfly/_config.yml _config.butterfly.yml

安装官方插件，不装主题会报错：

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

新建导航栏页面：

1
2
hexo new page tags
hexo new page categories

编辑导航栏页面属性：

1
nano /www/wwwroot/Blog/source/categories/index.md
1
2
3
4
5
---
title: 'Worlds Collide'
date: 2024-10-14 11:54:08
type: 'categories'
---
1
nano /www/wwwroot/Blog/source/tags/index.md
1
2
3
4
5
---
title: 'Symbols Unite'
date: 2024-10-14 11:54:04
type: 'tags'
---

我个人觉得这俩标签基本就够，一个是文章归类，一个是标签页归类。

顶部导航栏：

1
2
3
4
5
6
menu:
   Home: / || fas fa-home
   Archives: /archives || fas fa-archives
   Categories: /categories || fas fa-categories
   Tags: /tags || fas fa-tags
  # List||fas fa-list:

代码主题

配置主题文件，就是博客根目录刚刚copy过来的**_config.butterfly.yml**，点开发现其中有各种各样的配置项，更改代码块显示样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
code_blocks:
  # 代码块主题选择: darker / pale night / light / ocean / false
  theme: darker
  # 我喜欢开启MAC样式
  macStyle: true 
  # 代码块限制高度，如果不设置的话有些代码太长会把这个页面铺满，个人建议500px,太长会自动折叠
  height_limit: 500
  # 自动换行，开了有些长命令会显示的很怪
  word_wrap: false

  # 是否显示复制按钮
  copy: true
  # 是否显示语言标签，类似于在Typora插入代码块给定的语言类型。
  language: true
  # true为收缩代码块，给阅读用户选择是否展开。false则相反。
  shrink: false
  # 全屏显示代码块按钮控制开关
  fullpage: false

对应的就是图片中的这些样式：

image-20241014140600024

网站图片

创建站点img目录：

1
mkdir Blog/source/img

推荐放在source目录下，如果放在theme/source下可能会由于主题的更新而被意外删除，然后可以向里边存放自己博客的logo，头像等等网站图片，然后接下来在主题配置文件中进行网站图片相关的设置：

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
# 社交链接
social:
  fab fa-github: https://github.com/Anneballa || Github || '#24292e'
  fas fa-envelope: mailto:worldisend.com@gmail.com || Email || '#4a7dbe'
# 网站图标
favicon: /img/user.jpg

avatar:
  # 头像，可以外链url地址
  img: /img/user.jpg
  # 是否头像旋转效果
  effect: false

# 禁用所有橫幅圖片
disable_top_img: false

# 默认的横幅图片,建议设置这个就够了，其他的即使不设置，默认会加载这个横幅
default_top_img: /img/default_MAC.jpg

# 主页的横幅图片
index_img:

# 归档页的橫幅圖片
archive_img:

tag_img:

tag_per_img:

category_img:

category_per_img:

# 页脚背景图片，不开我觉得页脚特别不搭
footer_img: true

# 網站背景
# 我已经设置了default_top_img，这个就不设置了
background:

image-20241014150241264

文章封面

在主题文件中找到以下配置项：

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
cover:
  # 是否开启文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 主页文章封面显示的位置
  # left/right/both left是全左，right是全右，both是一左一右
  position: both
  # 当未设置封面时，显示默认封面，可以填多个，便会随机
  default_cover:
     - /img/cover1.jpg
     - /img/wallpaperflare.com_wallpaper.jpg
     - /img/wallpaperflare.com_wallpaper2.jpg
     - /img/wallpaperflare.com_wallpaper3.jpg
     - /img/wallpaperflare.com_wallpaper4.jpg
     - /img/wallpaperflare.com_wallpaper6.jpg
     - /img/wallpaperflare.com_wallpaper7.jpg
     - /img/wallpaperflare.com_wallpaper8.jpg
     - /img/wallpaperflare.com_wallpaper9.jpg
     - /img/wallpaperflare.com_wallpaper10.jpg
     - /img/wallpaperflare.com_wallpaper11.jpg
     - /img/wallpaperflare.com_wallpaper12.jpg
     - /img/wallpaperflare.com_wallpaper13.jpg
     - /img/wallpaperflare.com_wallpaper14.jpg
     - /img/wallpaperflare-cropped.jpg

# 保持默认即可
# 替換损坏的圖片
error_img:
  # 友链頁面的錯誤圖片
  flink: /img/friend_404.gif
  # 文章頁面的錯誤圖片
  post_page: /img/404.jpg

# 如果要自定义404页面可以不开
# 簡單的 404 頁面
error_404:
  # 是否啟用 404 頁面
  enable: true
  # 404 頁面的副標題
  subtitle: 'Page Not Found'
  # 404 頁面的卡片背景圖片
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

文章设置

文章页面的排版

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
post_meta:
  # 首页文章显示设置
  page:
    # 日期类型： created / updated / both
    date_type: both
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: true
    # 是否显示文字标签
    label: true
  # 文章页面
  post:
    # 元數據位置: left / center
    position: left
    # 日期類型: created / updated / both
    date_type: both
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: true
    # 是否显示文字标签
    label: true

首页设置

这里更改首页的布局：

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
index_site_info_top:
# 顶部图大小
index_top_img_height: 400px


# 子标题
subtitle:
  enable: true
  # Typewriter Effect
  effect: true
  # Customize typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # Source - Call the third-party service API (Chinese only)
  # It will show the source first, then show the content of sub
  # Choose: false/1/2/3
  # false - disable the function
  # 1 - hitokoto.cn
  # 2 - yijuzhan.com
  # 3 - jinrishici.com
  source: false
  # If you close the typewriter effect, the subtitle will only show the first line of sub
  sub:
    - 今日事,今日畢
    - Never put off till tomorrow what you can do today
  
  # 页面布局
index_layout: 3

文章摘要，这里我选择设置个2，有些文章可能会加密，自动节选的摘要就是一堆加密字符，不符合审美，method 2就符合我的需求：

1
2
3
4
5
# false: do not show the article introduction
index_post_content:
  method: 2
  # If you set method to 2 or 3, the length need to config
  length: 500

摘要就是文章首页预览的那段：

image-20241014175825337

文章页面

这里是文章页面的样式设置：

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
# 文章右边的目录，没什么好更改的
toc:
  post: true
  page: false
  number: true
  expand: false
  # Only for post
  style_simple: false
  scroll_percent: true


# 是否启用版权说明
post_copyright:
  enable: true
  
#如果文章markdown是中文文件名，建议把decode开了
  decode: true
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# 文章打赏
reward:
  enable: true
  text:
  QR_code:
     - img: /img/wechat.jpg
    #   link:
       text: wechat
     - img: /img/alipay.jpg
    #   link:
       text: alipay

# 这是页面旁边多一个编辑按钮，我觉得不好看
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

# 文章推荐
related_post:
  enable: true
  # 推荐显示多少个文章，我选择3个
  limit: 3
  # Choose: created / updated
  date_type: created

# 文章分页，设置1的话下一篇就是旧文章，设置2下一篇就是新文章，也可以关闭 false
post_pagination: 2

文章过去提醒，这部分我个人没这个需求，所以没改:

1
2
3
4
5
6
7
8
9
10
11
# Displays outdated notice for a post
noticeOutdate:
  enable: false
  # Style: simple / flat
  style: flat
  # When will it be shown
  limit_day: 365
  # Position: top / bottom
  position: top
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

网页页脚，主要是custom_text，如果有备案号的可以写在后边，我是准备部署github的，不需要这个功能。

1
2
3
4
5
6
7
footer:
  owner:
    enable: true
    since: 2024
  custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!
  # Copyright of theme and framework
  copyright: true

image-20241014222129424

侧边栏

侧边栏是首页点开有个人头像的那一栏：

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
# 主要开关控制，是否开启，显示左边 or 右边
aside:
  enable: true
  hide: false
  # Show the button to hide the aside in bottom right button
  button: true
  mobile: true
  # Position: left / right
  position: right
  
  # 分页显示开关控制，是否在archive、tag、category页面显示个人侧边栏
  display:
    archive: true
    tag: true
    category: true
    
  # 这里是侧边栏上要显示什么
  # 这是作者头像那一块
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/Anneballa
  
  # 是否显示公告栏
  card_announcement:
    enable: true
    content: Welcome to my blog! Here, you'll find a collection of my experiences and insights in red team penetration testing, programming tips, and tech tinkering. I hope you discover content that's both intriguing and practical, and that you enjoy your time here.
  
  # 是否显示最新文章 
  card_recent_post:
    enable: true
    # 显示的数量
    limit: 3
    # 排序方式 date / updated
    sort: date
    sort_order:
  # 是否显示评论
  card_newest_comments:
    enable: true
    sort_order:
    limit: 6
    # Unit: mins, save data to localStorage
    storage: 10
    avatar: true
  # 是否显示分类卡片
  card_categories:
    enable: true
    # If set 0 will show all
    limit: 8
    # Choose: none / true / false
    expand: none
    sort_order:
  # 是否显示标签页面
  card_tags:
    enable: true
    # If set 0 will show all
    limit: 40
    color: false
    # Order of tags, random/name/length
    orderby: random
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: 1
    sort_order:
  # 是否显示归档页面
  card_archives:
    enable: true
    # Type: monthly / yearly
    type: monthly
    # Eg: YYYY年MM月
    format: MMMM YYYY
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: -1
    # If set 0 will show all
    limit: 8
    sort_order:
  # 是否显示文章系列
  card_post_series:
    enable: true
    # The title shows the series name
    series_title: false
    # Order by title or date
    orderBy: 'date'
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: -1
  #是否显示网站信息 
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order:
    # Time difference between publish date and now
    # Formal: Month/Day/Year Time or Year/Month/Day Time
    # Leave it empty if you don't enable this feature
    runtime_date:

image-20241014223813533

站点功能

简体繁体转换

1
2
3
4
5
6
7
8
9
10
11
12
translate:
  enable: true
  # 默認按鈕顯示文字(網站是簡體，應設置為'default: 繁')
  default: 簡
  #網站默認語言，1: 繁體中文, 2: 簡體中文
  defaultEncoding: 2
  #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
  translateDelay: 0
  #當文字是簡體時，按鈕顯示的文字
  msgToTraditionalChinese: '繁'
  #當文字是繁體時，按鈕顯示的文字
  msgToSimplifiedChinese: '簡'

阅读模式

1
readmode: true

夜间模式

1
2
3
4
5
6
7
8
9
# dark mode
darkmode:
  enable: true
  # dark mode和 light mode切換按鈕
  button: true
  autoChangeMode: true
  # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
  start: # 8
  end: # 22

滚动条百分比

1
rightside_scroll_percent: true

复制功能，维护自己的版权嘛：

1
2
3
4
5
6
copy:
  enable: true

  copyright:
    enable: true
    limit_count: 150

字数统计

统计博客文章字数，需要安装插件：

1
npm install hexo-wordcount --save

然后在主题配置文件中开启，分别为文章页面显示字数、阅读时间，在侧边栏提示网站总字数：

1
2
3
4
5
6
# Need to install the hexo-wordcount plugin
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

访问人数

都开了吧，关注一下自己博客站点动态：

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

本地搜索

需要安装插件，其实有两款插件可以选，hexo-generator-searchdb与hexo-generator-search，我选择了相对来说新一点的：

1
npm install hexo-generator-searchdb

根据github文档提示，在博客根目录的**_config.yml**里添加如下信息：

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

然后在主题配置文件**_config.butterfly.yml**进行更改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
search:
  # Choose: algolia_search / local_search / docsearch
  # leave it empty if you don't need search
  use: local_search
  placeholder:

  # Local Search
  local_search:
    # Preload the search data when the page loads.
    preload: true
    # 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: true
    CDN:

image-20241014230628817

评论

评论功能选择Valine，选择国际版，国内版需要备案，先注册一个账户，点击创建应用：

image-20241014232007228

选择免费限量的开发版：

image-20241014232105826

获取自己的key：

image-20241014232207924

随后在主题配置文件中填写自己的APIkey：

1
2
3
4
5
6
7
8
9
10
valine:
  appId:
  appKey:
  avatar: monsterid
  # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  serverURLs:
  bg:
  # Use Valine visitor count as the page view count
  visitor: false
  option:

分析统计

可以观察自己博客站点的流量都是从哪里来的,到以下地址创建项目点击开始无脑下一步创建完成即可拿到ID：

1
https://analytics.google.com/

image-20241014235443306

百度登录后在使用设置里找到网站列表，添加自己的博客地址即可获取到自己的ID：

1
https://tongji.baidu.com/web/welcome/login

image-20241015000247428

image-20241015000309932

Cloundflare：

1
https://www.cloudflare.com/zh-tw/web-analytics/

image-20241015000717453

创建完成后点击管理站点：

image-20241015000849072

image-20241015000913891

微软的：

1
https://clarity.microsoft.com/

image-20241015001102472

随后点击获取跟踪代码即可看到：

image-20241015001218458

在主题配置文件中分别加上即可：

1
2
3
4
5
6
7
8
9
10
baidu_analytics: 

# https://analytics.google.com/analytics/web/
google_analytics: 

# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics: 

# https://clarity.microsoft.com/
microsoft_clarity:

Pjax

用户可以不用重复加载相同资源：

1
2
3
4
5
6
pjax:
  enable: true
  # Exclude the specified pages from pjax, such as '/music/'
  exclude:
    # - /xxxxxx/

Snackbar弹窗

1
2
3
4
5
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#1A1A1A' #light mode時彈窗背景
  bg_dark: '#1A1A1A' #dark mode時彈窗背景

预加载

当用户鼠标悬停链接一小会儿，可以预先加载页面提升打开速度：

1
2
3
# https://instant.page/
# prefetch (預加載)
instantpage: true

Pangu

优化页面布局，中文、数字、英文直接自动加空格分开：

1
2
3
4
5
# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:
  enable: true
  field: post # site/post

背景音乐

添加插件：

1
npm install --save hexo-tag-aplayer

在hexo的配置文件中:

1
2
3
aplayer:
  meting: true
  asset_inject: false

在主题配置文件中，enable设为true和per_page设为true:

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

将代码插入到网页中：

1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="7274845708" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-lrctype="0" data-autoplay="true" data-theme="#1A1A1A" muted></div>

参数解释：

选项 默认值 描述
data-id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
data-server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
data-type 必须值 song, playlist, album, search, artist
data-fixed false 开启固定模式
data-mini false 开启迷你模式
data-loop all 列表循环模式：all, one,none
data-order list 列表播放模式： list, random
data-volume 0.7 播放器音量
data-lrctype 0 歌词格式类型
data-listfolded false 指定音乐播放列表是否折叠
data-storagename metingjs LocalStorage 中存储播放器设定的键名
data-autoplay true 自动播放，移动端浏览器暂时不支持此功能
data-mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
data-listmaxheight 340px 播放列表的最大长度
data-preload auto 音乐文件预载入模式，可选项： none, metadata, auto
data-theme #ad7a86 播放器风格色彩设置

为了美观让他自动隐藏，复制粘贴的这里的代码，

1
https://blog.meta-code.top/2021/11/28/2021-43/

在head中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
inject:
  head:    
    # Aplayer 的全局吸底音乐标签收起隐藏
    - '<style type="text/css">
        .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
          left: -66px !important;
          /* 默认情况下缩进左侧66px，只留一点箭头部分 */
        }

        .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
          left: 0 !important;
          /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
        }
      </style>'

主题颜色配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
theme_color:  
   enable: true  
   main: "#1A1A1A"  # 主色调设为黑色偏灰  
   paginator: "#2E2E2E"  # 分页器的颜色用深灰色  
   button_hover: "#3A3A3A"  # 按钮悬停颜色用较深的灰色  
   text_selection: "#4D4D4D"  # 文本选择时的颜色用灰色  
   link_color: "#1A1A1A"  # 链接颜色设为黑色偏灰  
   meta_color: "#666666"  # 元数据颜色用中灰色  
   hr_color: "#D0D0D0"  # 水平线颜色用浅灰色  
   code_foreground: "#F0F0F0"  # 代码前景色设为接近白色  
   code_background: "#2B2B2B"  # 代码背景色用深灰  
   toc_color: "#2E2E2E"  # 目录颜色用深灰色  
   blockquote_padding_color: "#3A3A3A"  # 引用的内边距颜色用灰色  
   blockquote_background_color: "#2A2A2A"  # 引用的背景色用深灰  
   scrollbar_color: "#1A1A1A"  # 滚动条颜色用灰色  
   meta_theme_color_light: "#F5F5F5"  # 亮色模式的主题颜色用浅灰  
   meta_theme_color_dark: "#1A1A1A"   # 深色模式的主题颜色用黑色偏灰

image-20241015002214025

打字特效

需要安装插件：

1
npm install activate-power-mode

更改主题配置文件：

1
2
3
4
5
6
7
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

大图查看模式

1
lightbox: medium-zoom

博客站点文件

主要是permalink，官方默认的是以文件名的生成网页链接的，即使是中文，中文分享出去会是一堆编码，为了优雅一点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
title: Quirky Quips & Whimsical Whirls
subtitle: ''
description: ''
keywords:
author: Annabelle
language: en
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://anneballa.github.io/
permalink: posts/:hash/	 #改成posts/:hash
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

站点地图

安装插件：

1
npm install hexo-generator-seo-friendly-sitemap --save

自动推送，解放双手：

1
npm install --save hexo-submit-urls-to-search-engine

到各引擎站长中心获取自己的API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo_submit_urls_to_search_engine:
  submit_condition: count #链接被提交的条件，可选值：count | period 现仅支持count
  count: 10 # 提交最新的10个链接
  period: 900 # 提交修改时间在 900 秒内的链接
  google: 0 # 是否向Google提交，可选值：1 | 0（0：否；1：是）
  bing: 1 # 是否向bing提交，可选值：1 | 0（0：否；1：是）
  baidu: 0 # 是否向baidu提交，可选值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt ## 文本文档名， 需要推送的链接会保存在此文本文档里
  baidu_host: https://anneballa.github.io ## 在百度站长平台中注册的域名
  baidu_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  bing_host: https://anneballa.github.io ## 在bing站长平台中注册的域名
  bing_token:  ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  google_host: https://anneballa.github.io ## 在google站长平台中注册的域名
  google_key_file: Project.json #存放google key的json文件，放于网站根目录（与hexo _config.yml文件位置相同），请不要把json文件内容直接发布在公众仓库里!
  google_proxy: http://127.0.0.1:8080 # 向谷歌提交网址所使用的系统 http 代理，填 0 不使用
  replace: 0  # 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）
  find_what: 
  replace_with:

添加rel

安装插件：

1
npm i hexo-filter-nofollow --save

随后在博客文件中添加：

1
2
3
nofollow:
  enable: true
  field: site

自动推送到Github

安装插件：

1
npm install hexo-deployer-git --save

在博客配置文件添加：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/Anneballa/Anneballa.github.io.git
  branch: main

随后到Github个人设置页面:

image-20241015142808331

创建一个新的令牌：

image-20241015142841135

令牌权限只用开放内容管理就行：

image-20241015143402516

然后每次更新博客推送：

1
hexo g -d

会要求输入用户名，和密码，密码需要输入刚创建的Token.

文章加密

需要安装插件：

1
npm install --save hexo-blog-encrypt

后续需要在文章头部单独配置，比如：

1
2
3
4
5
6
7
8
9
10
---
title: Hello World
...
password: passwordstrings
abstract: Here's something encrypted, password is required to continue reading.
message: Hey, password is required here.
wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.
---