搭建过很多的个人博客，从 WordPress, Typecho 到 Halo，甚至是 Nuxt 自建的博客，但最终感觉都不方便，还是 Hexo 博客写起来更方便，托管也无需服务器。一开始尝试了 Hexo-theme-volantis, 但是总感觉不够完美，配置起来也是相当的复杂和麻烦，于是切换到了Hexo-theme-Stellar, 今天总结一下在切换到主题后需要配置和修改的地方。需要注意的是，我不打算修改主题文件，一个原因是原主题足够优秀，还有就是怕麻烦。所以这里的修改其实只涉及配置文件的更改。

如何切换主题

首先安装主题：

1
npm i hexo-theme-stellar

然后在hexo的配置文件_config.yml文件中找到并修改：

1
theme: stellar

网站信息的修改

这个主要涉及头像，标题和副标题。副标题支持鼠标移动到上方切换文字，所以你可以使用竖线分割两份文字。在主题配置文件_config.stellar.yml添加以下内容：

1
2
3
4
logo:
  title: "[XiaoHanYS](/)"
  avatar: /images/avatar.jpg
  subtitle: "期待光明 | www.xiaohanys.top"

首页四个导航按钮

首先按钮的Icon来自于icons.yml, 因此你可以根据需要挑选合适的作为首页的按钮图标。我这里让AI帮我生成了两个新的，自定义的图标我们应该放在source/_data/icons.yml中。

剩下的就是为每个导航添加ID和导航到的url路径，因为我没有添加文档功能，所以导航到404页面.

在主题配置文件_config.stellar.yml添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
menubar:
  columns: 4 # 一行多少个
  items: # 可按照自己需求增加，符合以下格式即可
    - id: post # 页面中高亮的 menu_id
      theme: "#1BCDFC" # 高亮时的颜色，仅 svg 中 fill="currentColor" 时有效
      icon: solar:documents-bold-duotone # 支持 svg/img 标签，可以定义在 icons.yml 文件中，也支持外部图片的 URL
      title: 博客 # 标题
      url: / # 跳转链接，支持相对路径和绝对路径
    - id: wiki
      theme: "#3DC550"
      icon: solar:notebook-bookmark-bold-duotone
      title: 文档
      url: /404.html
    - id: gallery
      theme: "#FA6400"
      icon: solar:image_gallary_duotone
      title: 图库
      url: /gallery/
    - id: project
      theme: "#F44336"
      icon: solar:project_duotone
      title: 项目
      url: /projects/

添加自定义界面

从上面的导航按钮，你可能发现我添加了图库和项目进展两个独立页面。添加独立页面的方式是在source 目录内新建一个目录，目录的名称为新页面的url, 而后在目录内添加index.md文件即可，例如/gallery对应source/gallery/index.md.

图库的语法为, 你可以添加很多的图片，会自动排版！

1
2
3
4
{% gallery %}
![图片名称](图片链接)
...
{% endgallery %}

点我查看示例

项目目录使用了时间线功能，而Github仓库使用ghcard功能，语法分别为：

1
2
3
4
5
6
7
8
{% timeline %}
<!-- node 2025 年 10 月 1 日 -->
修改 libreTV 项目，添加支持弹幕的功能，可以搭配 fetch_danmu 使用，支持 EdgeOne 部署。
Github 仓库为：
{% ghcard SeqCrafter/LibreTV %}
<!-- node 2021 年 2 月 11 日 -->
吧啦吧啦吧啦
{% endtimeline %}

点我查看示例

ghcard的功能因为调用的人太多会无法正常显示，因此需要自行搭建，搭建的仓库在：anuraghazra/github-readme-stats

首页左侧边栏欢迎信息

效果
设置方法

在目录（如果没有就创建一下）source/_data/widgets.yml 中添加以下组件即可自动生效

1
2
3
4
5
6
7
8
9
10
11
12
welcome:
  layout: markdown
  title: 欢迎, 路行者
  linklist: # 与 linklist 组件写法相同
    columns: 1
    items:
      - icon: solar:information  # 记得去icons.yml中添加该图标，默认不存在！！
        title: 立即前往
        url: /projects/#comments
  content: |
    您已经到世界边缘，喜欢的话欢迎评论区讨论交流吧～
    > 如果想要添加友链，可以点击按钮去评论区留下你的链接，如果比较多的话，我开一个单独的页面.

首页右侧说说功能

效果
设置方法

该功能基于memos, 想要实现 memos 功能，首先需要注册一个账号。注册账号可以使用别人已经搭建好的 memos，也可以自行搭建 memos（需要有服务器，我就不折腾了）。这里直接采用的杜老师的 memos。

https://dusays.com/561/
使用 Memos 搭建时光机教程
  • 查看教程，注册一个自己的账号
  • 注册好后，在教程下面评论让杜老师帮忙查看自己的 ID
  • 首先在 source\_data\widgets.yml 中新增一条记录
1
2
3
4
5
6
7
# 哔哔
memos-du:
layout: timeline
title: 🥂哔哔广场
api: https://s.dusays.com/api/v1/memo?creatorId={你的ID}
type: memos
hide: user,footer
  • 然后在 _config.stellar.yml 设置让其生效
1
2
3
site_tree:
  home:
    rightbar: memos-du

页脚信息

按照个人需求取消掉注释，并在_config.stellar.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
######## Footer ########
footer:
  social:
    # github:
    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/[email protected]/social/08a41b181ce68.svg"/>'
    #   url: /
    # music:
    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/[email protected]/social/3845874.svg"/>'
    #   url: /
    # unsplash:
    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/[email protected]/social/3616429.svg"/>'
    #   url: /
    # comments:
    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/[email protected]/social/942ebbf1a4b91.svg"/>'
    #   url: /about/#comments
  sitemap:
    # - title: 博客
    #   items:
    #     - '[近期发布](/)'
    #     - '[分类](/blog/categories/)'
    #     - '[标签](/blog/tags/)'
    #     - '[归档](/blog/archives/)'
    # - title: 项目
    #   items:
    #     - '[xxx](/)'
    #     - '[xxx](/)'
    #     - '[xxx](/)'
    #     - '[xxx](/)'
    # - title: 社交
    #   items:
    #     - '[xxx](/)'
    #     - '[xxx](/)'
    #     - '[xxx](/)'
    #     - '[xxx](/)'
    # - title: 关于
    #   items:
    #     - '[xxx](/)'
    #     - '[xxx](/)'
    #     - '[xxx](/)'
    #     - '[xxx](/)'
  content: | # 支持 Markdown 格式
    本站由 [{author.name}](/) 使用 [{theme.name} {theme.version}]({theme.tree}) 主题创建。
    本博客所有文章除特别声明外，均采用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。
  # 主题用户越多，开发者维护和更新的积极性就越高，如果您喜欢本主题，请在适当的位置显示主题信息和仓库链接以表支持。

外观自定义

可以修改字体类型，大小等，但是要预先引入字体文件，在主题配置文件_config.stellar.yml中添加：

我这里分别添加了霞露文楷和Maple Mono字体，字体CDN来自

https://chinese-font.netlify.app/zh-cn/
中文网字计划
1
2
3
4
inject:
  head:
    - <link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/lywkpmydb/dist/LXGWWenKaiScreen/result.css' />
    - <link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css' />

然后继续在主题文件中修改样式设置：

1
2
3
4
5
6
7
8
9
10
11
style:
  prefers_theme: light
  font-size:
    root: 17px
    body: 0.99rem 
    code: 88% 
    codeblock: 0.82rem 
  font-family:
    body: "'LXGW WenKai Screen', system-ui, 'Microsoft Yahei', 'Segoe UI', Arial, sans-serif"
    code: "'Maple Mono CN', Menlo, Monaco, Consolas, system-ui, monospace, sans-serif"
    codeblock: "'Maple Mono CN', Menlo, Monaco, Consolas, system-ui, monospace, sans-serif"

让文章分类信息具有不同颜色并添加分享按钮

依旧是在主题设置_config.stellar.yml中写入以下内容即可

1
2
3
4
5
article:
  category_color:
    "生物信息": "#1BCDFC"
    ...
  share: [wechat, weibo, email, link]

添加评论系统

评论系统采用artalk才能具有原主题比较和谐的外观，因此最好是选择artalk。

首先在主题设置_config.stellar.yml中写入以下内容启用artalk. 

1
2
3
4
5
comments:
  service: artalk
  artalk:
    server:  # 后端服务地址
    site:  # 站点名称

artalk 需要自己搭建，从而获取服务端地址和站点名称，最简单的搭建方法是使用ClawCloud, 因为这个平台有每月免费5$的免费额度，用来搭建artalk足够了，另外其还提供了一键搭建的应用服务，在应用市场直接点击即可一键搭建。

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

快来参与讨论吧~