在上一篇教程中，我们已经成功将博客部署到了 GitHub Pages。但此时的博客还处于初始状态，缺乏个性化和功能定制。本篇教程将带你一步步配置 Stellar 主题，让你的博客焕然一新。

主题配置基础

配置文件优先级

Stellar 主题支持多级配置。为了便于维护和升级，强烈建议在博客根目录下创建独立的主题配置文件：_config.stellar.yml。此文件的优先级高于主题自带的配置文件。

官方配置文档：Stellar 主题设置指南

博客基本信息

打开博客根目录下的 _config.yml 文件，修改以下站点信息：

1
2
3
4
5
6
7
8
9
10
11
# Site
title: HuanYueSpace                # 博客标题
avatar: /assets/avatar.jpg         # 头像路径 (存放在 /source/assets/)
subtitle: '精诚所至，金石为开'       # 副标题
description: '立志越高，所需要的能力越强，相应的，逼迫自己所学的，也就越多。'  # 站点描述
keywords: 'Python,Cpp,算法,编程技术' # 关键词
author: Jianjun Huang              # 作者名
language:
  - zh-CN
  - en
timezone: ''                       # 时区

为了让头像在导航栏正确显示，需在 _config.stellar.yml 中添加：

1
2
3
logo:
  avatar: '[{config.avatar}](/about/)'  # 点击头像跳转至「关于」页面
  title: '[{config.title}](/)'          # 点击标题返回首页

导航菜单配置

效果预览：

在 _config.stellar.yml 中添加 menubar 配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menubar:
  columns: 4                     # 每行显示菜单项数量
  items:                         # 菜单项列表
    - id: post                   # 菜单唯一标识 (用于高亮)
      theme: '#1BCDFC'           # 高亮颜色 (仅对 fill="currentColor" 的 SVG 生效)
      icon: solar:documents-bold-duotone  # 图标 (支持内置图标或图片 URL)
      title: 博客                 # 菜单名称
      url: /                     # 跳转链接
    - id: wiki
      theme: '#3DC550'
      icon: solar:notebook-bookmark-bold-duotone
      title: 文档
      url: /wiki/
    # 可继续添加其他菜单项...

文章相关配置

文章类型

Stellar 提供两种文章布局风格：

  • tech：默认技术类文章 (紧凑布局)
  • story：图文类文章 (宽松段落间距)
1
2
article:
  type: tech  # 全局默认类型 (可在每篇文章的 Front Matter 中覆盖)

文章封面

自动生成封面 (按标签匹配)

1
2
article:
  auto_cover: true  # 根据文章标签自动搜索匹配的封面图

手动指定封面

在文章的 Front Matter 中添加 cover 属性：

1
2
3
4
5
6
7
8
9
10
11
12
---
cover: /assets/covers/2024-hexo-guide.jpg  # 本地图片路径
# 或使用在线图片
# cover: https://example.com/cover.jpg

# 全图封面卡片配置 (可选)
poster:
  topic: 技术教程    # 封面小标题
  headline: Hexo 终极配置指南  # 主标题
  caption: 一步步打造个性化博客  # 副标题
  color: blue        # 标题颜色 (white, red, blue...)
---

内容摘要

摘要用于在文章列表中显示预览。在正文中使用 <!-- more --> 分隔摘要和完整内容：

1
2
3
4
5
6
7
8
9
---
title: 我的第一篇博客
---

这里是摘要部分，会显示在首页的文章卡片中。

<!-- more -->

这里是正文部分，仅在文章详情页显示。

注意：分隔符前后需保留空行。

文章模板

定制新建文章时的默认 Front Matter。编辑 /scaffolds/post.md：

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
---
title: {{ title }}
date: {{ date }}
tags: []
categories: []
description:  # 文章摘要

# 封面设置
cover: 
poster:
  topic: 
  headline: 
  caption: 
  color: 

# 功能开关
sticky:       # 置顶优先级 (值越大越靠前)
comments: true # 是否开启评论
indexing: true # 是否允许搜索引擎索引

# 高级选项
mermaid: false   # 启用 Mermaid 图表
katex: false     # 启用 KaTeX 数学公式
mathjax: false   # 启用 MathJax 数学公式
---

内容组织与推荐

1. 分类与标签

  • 分类 (Categories)：支持层级结构，在列表中仅显示一级分类

    1
    categories: [技术文档, Hexo教程]

  • 标签 (Tags)：用于关联文章和关键词检索

    1
    tags: [Hexo, Stellar, 博客搭建]

2. 相关文章推荐

  1. 安装依赖插件：

    1
    npm install hexo-related-popular-posts --save

  2. 在主题配置中启用：

    1
    2
    3
    4
    article:
      related_posts:
        enable: true
        title: 您可能感兴趣的文章  # 推荐模块标题

高级美化技巧

1. 长代码块滚动条

解决代码块过长导致的页面布局问题：

  1. 创建自定义 JS 文件 /themes/stellar/source/js/custom.js：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 为超长代码块添加滚动限制
    document.addEventListener("DOMContentLoaded", function() {
      const codeBlocks = document.querySelectorAll('.highlight');
      codeBlocks.forEach(block => {
        if (block.scrollHeight > 800) {
          block.style.maxHeight = '300px';
          block.style.overflowY = 'auto';
          block.style.borderRadius = '8px'; // 添加圆角美化
        }
      });
    });

  2. 在 _config.yml 中注入脚本：

    1
    2
    3
    inject:
      script:
        - <script src="/js/custom.js?1"></script>

注意：此功能对 Tabs 容器内的代码块无效。

2. 页脚访问统计

添加「不蒜子」访问统计和运行时间：

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
# 在 _config.stellar.yml 的 footer.content 配置
content: |
  <center>
    <span>
      © 2024 <a target="_blank" href="https://github.com/FelicxFoster">Felicx</a> | 
      基于 <a target="_blank" href="https://github.com/FelicxFoster/hexo-theme-stellar">Stellar</a> 构建
    </span>
    <br>
    <!-- 不蒜子统计 -->
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span>
      总访问量 <span id="busuanzi_value_site_pv" style="font-weight:bold">0</span> 次 | 
      本文阅读量 <span id="busuanzi_value_page_pv" style="font-weight:bold">0</span> 次
    </span>
    <br>
    <!-- 运行时间 -->
    <span id="runtime_span">🦉博客已运行 0 天🦉</span>
    <script>
      function updateRuntime() {
        const start = new Date(2018, 8, 12); // 月份从0开始 (8=9月)
        const now = new Date();
        const diff = now - start;
        
        const years = Math.floor(diff / (365 * 24 * 60 * 60 * 1000));
        const days = Math.floor(diff / (24 * 60 * 60 * 1000)) % 365;
        const hours = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
        const minutes = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
        const seconds = Math.floor((diff % (60 * 1000)) / 1000);
        
        document.getElementById('runtime_span').innerHTML = 
          `🦉持续营业：${years}年${days}天${hours}时${minutes}分${seconds}秒🦉`;
      }
      setInterval(updateRuntime, 1000);
      updateRuntime();
    </script>
  </center>

3. 页脚字数统计

  1. 安装统计插件：

    1
    npm install hexo-wordcount --save

  2. 修改主题模板文件 (/themes/stellar/layout/_partial/main/footer.ejs)：

    1
    2
    3
    // 在 footer 内容输出前添加
    el += '<span class="totalcount">共发表 ' + site.posts.length + ' 篇博文 · </span>';
    el += '<span class="post-count">总计 ' + totalcount(site) + ' 字</span>';

  3. 添加自定义样式 (/themes/stellar/source/css_custom.styl)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 页脚统计样式 */
    .page-footer {
      text-align: center;
      margin: 0 auto;
      width: 100%;
      .text {
        .totalcount, .post-count {
          color: var(--text-p2);
          font-size: 0.9rem;
        }
      }
    }

效果展示：

image-20250621170234185

至此，你的 Stellar 主题博客已初具规模！下一期我们将深入探讨 Stellar 主题的更多高级组件和自定义功能。

许可协议

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

© 2025 huanyuehjj 使用 Stellar 创建
总访问 次 | 本页访问 次
共发表 2 篇Blog · 总计 2.9k 字