前言

开往等博友圈子时，很多博客Butterfly主题都逐渐向张洪Heo博客风格转变，这周抽时间也进行一次转型，本篇文章主要记录修改过程，供以后参考

历史回顾

截一张之前的博客截图留作纪念，后续拥抱新的主题

Snipaste_2025-07-14_22-45-16

参考文档

本次博客向solitude主题美化，以下为参考文档 文档写的很详细，主要记录一些重点的配置修改

首页 - solitude docs | solitude-docs（文档）

Solitude（演示站点）

本地创建HEXO环境

  1. 搭建好node环境，目前我使用的是20.10.0
  2. 执行安装依赖 npm install
  3. 再执行npm install -g hexo-cli
  4. 安装完成之后就可以使用hexo自带的命令，例如清理hexo cl 生成 hexo g 本地运行 hexo s推送 hexo d

站点配置

1
2
3
4
5
6
# 网站信息
site:
  name:
    class: img # text / i_class / img
    custom: https://cdn.aiheadn.cn/aiheadn/logo.png # Solitude / fas fa-ghost / /img/pwa/favicon.ico
  icon: https://cdn.aiheadn.cn/aiheadn/favicon.ico # Site icon / 网站图标

对应页面位置

image-20250714230152579

导航与首页推荐

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
99
100
101
102
# 导航栏
nav:
  # Left Box
  # 左侧盒子
  group:
    生态: 
      主页: https://www.aiheadn.cn/ || https://cdn.aiheadn.cn/aiheadn/logo.png # name: url || icon
      博客: https://blog.aiheadn.cn/ || https://cdn.aiheadn.cn/aiheadn/logo.png # name: url || icon  
      摄影: https://album.aiheadn.cn/ || https://cdn.aiheadn.cn/aiheadn/logo.png
      源码网: https://www.adymw.cn/ || https://cdn.aiheadn.cn/aiheadn/logo.png
      云盘: https://cloud.aiheadn.cn/ || https://alistgo.com/logo.svg
      监测: https://monitor.aiheadn.cn/ || https://monitor.aiheadn.cn/icon.svg
      Certimate: https://ssl.aiheadn.cn/ || https://ssl.aiheadn.cn/logo.svg
      aultwarden: https://password.aiheadn.cn/ || https://password.aiheadn.cn/images/safari-pinned-tab.svg
      Doc: https://doc.aiheadn.cn/ || https://doc.aiheadn.cn/static/img/Logo.29f9ff6.svg
      MAXKB: https://chat.aiheadn.cn/ || https://chat.aiheadn.cn/ui/assets/MaxKB-logo-3d0615e0.svg
  # Menu
  # 菜单
  menu:
    首页: / # name: link
    文库: # name
      全部文章: /archives/ || fas fa-folder-closed # item name: link || icon
      全部分类: /categories/ || fas fa-clone
      全部标签: /tags/ || fas fa-tags
    友链:
      朋友圈: /moments/ || fas fa-wifi
      友情链接: /links/ || fas fa-user-group
    关于:
      我的装备: /equipment/ || fas fa-laptop
      在线工具: /tlink/ || fas fa-toolbox
      追读小说: /music/ || fas fa-music

  # Right button
  # 右侧按钮
  right:
    random: true # Random article / 随机文章按钮
    custom:
     - name: 开往 # 名字
       url: https://www.travellings.cn/go.html # 跳转链接
       icon: fas fa-train # 图标
       onclick: # 点击事件
       id: 1149 # id 
# --------------------------- end ---------------------------
# --------------------------- start ---------------------------
# Home Top Banner
# 首页顶部
hometop:
  enable: true
  banner:
    title: 永远年轻，不断挑战 # 大字
    desc:
      - ⌨️ 努力的程序员
      - 📷业余的摄影师
      - 📖未来的小说家
    icon:
      HTML: # name
        img: https://cdn.aiheadn.cn/icon/html.png # url
        color: "#ffffff" # color
      CSS:
        img: https://cdn.aiheadn.cn/icon/css.png
        color: "#ffffff"
      JavaScript:
        img: https://cdn.aiheadn.cn/icon/javascript.png
        color: "#ffffff"
      Python:
        img: https://cdn.aiheadn.cn/icon/python.png
        color: "#ffffff"
      Java:
        img: https://cdn.aiheadn.cn/icon/java.png
        color: "#ffffff"
      Docker:
        img: https://cdn.aiheadn.cn/icon/docker.png
        color: "#ffffff"
      Git:
        img: https://cdn.aiheadn.cn/icon/git.png
        color: "#ffffff"
      Linux:
        img: https://cdn.aiheadn.cn/icon/linux.png
        color: "#ffffff"
      MySQL:
        img: https://cdn.aiheadn.cn/icon/mysql.png
        color: "#ffffff"
      Redis:
        img: https://cdn.aiheadn.cn/icon/redis.png
        color: "#ffffff"
      DeepSeek:
        img: https://cdn.aiheadn.cn/icon/deepseek.png
        color: "#ffffff"

  group:
    热门: /tags/Fire/ || fas fa-fire || linear-gradient(to right,#f65,#ffbf37)
  recommendList:
    enable: true
    sup: 置顶
    title: 爱喝ad奶的主页
    url: https://www.aiheadn.cn/
    img: /img/default.avif
    color: "none"

# Article Top Banner
# 文章推荐轮播图
carousel: true

大概影响范围如下图所示

image-20250716011208979

评论配置

1
2
3
4
5
# 评论
comment:
  # Which commenting system to use(e.g. waline or waline,twikoo)
  # 使用哪个评论系统（例如： waline or waline,twikoo）
  use: twikoo 
1
2
3
4
5
6
twikoo: # https://twikoo.js.org/
  envId: https://twikoo.aiheadn.cn/
  region: # Environment locale, default is ap-shanghai, Tencent cloud environment fill ap-shanghai or ap-guangzhou; Vercel environment do not fill the.
  style: true # Use custom styles when turned on
  accessToken: # AccessToken
  option: # twikoo option

image-20250717003010843

搜索

1
2
3
4
5
6
7
8
9
10
11
# Search
search:
  enable: true
  type: algolia  # local / algolia / docsearch
  tags:
    # - Solitude
    # - Hexo
  # Algolia
  algolia:
    hits:
      per_page: 6

image-20250717003640514

左侧栏日历

在_config.solitude.yml增加扩展需要的js和css文件，我这里是将文件全部放到了自己的cdn节点上，其实也可以放置到本地的

1
2
3
4
5
6
7
# 扩展
extends:
  head:
    - <link rel="stylesheet" href="https://cdn.aiheadn.cn/blog-schedule/schedule.css">
  body:
    - <script src="https://cdn.aiheadn.cn/blog-schedule/schedule.js"></script>
    - <script src="https://cdn.aiheadn.cn/chinese-lunar/0.1.4/chinese-lunar.js"></script>

增加好拓展之后，去_data文件新增对应数据aside.yml

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
- name: schedule
  id: card-widget-schedule
  content_html: |
    <div id="schedule-area-left">
      <div id="schedule-title">距离除夕</div>
      <div id="schedule-days"></div>
      <div id="schedule-date">2025-01-28</div>
    </div>
    <div id="schedule-area-right">
      <div class="schedule-r0">
        <div class="schedule-d0">本年</div>
        <div class="schedule-d1">
          <span id="p_span_year" class="aside-span1"></span>
          <span class="aside-span2">还剩<a></a>天</span>
          <progress max="365" id="pBar_year"></progress>
        </div>
      </div>
      <div class="schedule-r1">
        <div class="schedule-d0">本月</div>
        <div class="schedule-d1">
          <span id="p_span_month" class="aside-span1"></span>
          <span class="aside-span2">还剩<a></a>天</span>
          <progress max="30" id="pBar_month"></progress>
        </div>
      </div>
      <div class="schedule-r2">
        <div class="schedule-d0">本周</div>
        <div class="schedule-d1">
          <span id="p_span_week" class="aside-span1"></span>
          <span class="aside-span2">还剩<a></a>天</span>
          <progress max="7" id="pBar_week"></progress>
        </div>
      </div>
    </div>

- name: calendar
  id: card-widget-calendar
  content_html: |
    <div id="calendar-area-left">
      <div id="calendar-week"></div>
      <div id="calendar-date" style="font-size: 48px;"></div>
      <div id="calendar-solar"></div>
      <div id="calendar-lunar"></div>
    </div>
    <div id="calendar-area-right">
      <div id="calendar-main">
      </div>
    </div>

添加好之后再配置侧边栏 calendar,schedule是核心，对应的日历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Aside
# 侧边栏
aside:
  # Values: about (info card), newestPost (latest article), allInfo (website information), newest_comment (latest comment)
  # 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), newest_comment(最新评论)

  # Sticky: Fixed position / noSticky: Not fixed position
  # Sticky: 固定位置 / noSticky: 不固定位置
  home: # on the homepage
    noSticky: "about,calendar,schedule"
    Sticky: "allInfo,newestPost,allInfo,newest_comment"
  post: # on the article page
    noSticky: "about"
    Sticky: "newestPost,allInfo,newest_comment"
  page: # on the page
    noSticky: "about"
    Sticky: "newestPost,allInfo,newest_comment"
  # 菜单栏位置(0: 左 1: 右)
  position: 0 # Sidebar positioning(0: left 1: right)

豆瓣采集页面

页面的我的追剧和我的追书是来自豆瓣的采集数据。

第一步先安装豆瓣的npm依赖

1
npm install hexo-douban --save

hexo博客根目录的配置文件_config.yml
hexo-douban 是默认抓取豆瓣读书、豆瓣电影以及豆瓣游戏的，你需要这配置相应部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 豆瓣采集
douban:
  id: 290056501
  builtin: true # 选择是否有主题渲染
  book:
    title: '书山有路'
    quote: '腹有诗书气自华'
    actions:
    - collect
    - wish
    - do
  movie:
    title: '光影流年'
    quote: '人生如戏，戏如人生'
    actions:
    - collect
    - wish
    - do
  # game:
  #   title: '第九艺术'
  #   quote: '沉浸于虚拟，感受别样真实'
  timeout: 10000
  • actions: 一个字符串列表，表示生成的页面中的”已 X”，”想 X”,”X 过”的标签配置，默认会自动聚焦在第一个标签。可选项为: ‘do’,’wish’,’collect’。

启用生成
-bgm代表的是book、game、movie三个参数，选择你需要生成的页面

1
hexo clean && hexo douban -bgm && hexo g && hexo s

强调：由于hexo douban的简写也是hexo d，与hexo deploy的简写指令hexo d冲突，因此在进行二者部署的时候，只能都打全名而不能打简写形式。

生成的页面地址为

1
2
3
/books/index.html
/movies/index.html
游戏被我注释掉了，无生成