Hexo博客 stellar主题的个性化配置(二)

一、自定义首页（替换近期内容）

默认首页显示的是博客文章列表，替换为自定义静态页面。

source/index.md

1
2
3
4
5
6
7
8
9

---
title: ""
layout: page
nav_tabs: true
comments: false
breadcrumb: false
---
## 随记
...自定义内容...

• layout: page — 使用静态页面布局，不渲染文章列表
• nav_tabs: true — 在顶部显示导航标签（page 布局默认不显示）

_config.stellar.yml — 移除侧边栏近期文章

1
2
3

site_tree:
  home:
    leftbar: welcome

主题默认 leftbar: welcome, recent，recent 会在侧边栏列出近期文章，去掉它避免和文章页内容重复。

_config.yml — 博客列表移到 /文章/

1
2

index_generator:
  path: "文章"

首页被 source/index.md 接管后，原博客列表需要换个路径，这里放到 /文章/，和顶部”文章”标签对应。

themes/stellar/scripts/filters/pretty_urls.js

1
2
3
4
5

const path = (
  page.path.endsWith('.html') &&
  !page.path.endsWith('/index.html') &&
+ page.path !== 'index.html'        // 保留根路径 index.html，不被转为子目录
)

主题会将所有 .html 转为 xxx/index.html 子目录格式，首页 index.html 被错误转成 index/index.html，导致 / 404。加一行排外判断。

二、导航栏等间距分布

_config.stellar.yml — 自定义 CSS 注入

1
2
3
4
5
6
7
8
9
10
11
12
13

inject:
  head:
    - '<style>
       .navbar nav {
         display: flex;
         justify-content: space-evenly;
         width: 100%;
       }
       .navbar nav a.active {
         pointer-events: auto;
         cursor: pointer;
       }
       </style>'

• justify-content: space-evenly — 标签等间距排列
• pointer-events: auto — 覆盖主题默认禁止点击当前页标签的行为

themes/stellar/layout/_partial/main/navbar/nav_tabs_blog.ejs

1
2
3
4
5
6

if (nav_tabs[key] === '/' || nav_tabs[key] === '') {
-   if (is_home()) {
+   if (page.path === 'index.html') {
      el += '<a class="active" ...';
    }
}

• 原逻辑用 startsWith 匹配，所有 URL 都以 / 开头，导致”首页”永远高亮
• is_home() 在博客路径迁移后指向 /文章/，不是真正首页
• 改为精确匹配 page.path === 'index.html'

三、站点结构修改

_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

# 侧边栏 Logo
logo:
  avatar: '[{config.avatar}](/)'     # 头像点击跳首页（默认 /about/）
  title: '[{config.title}](/)'
  subtitle: '{config.subtitle}'

# 站点结构
site_tree:
  home:
    leftbar: welcome
  index_blog:
    nav_tabs:
      '首页': /
      '文章': /文章
      '归档': /归档
      '摄影墙': /摄影墙
      '关于': /关于

# 无刷新切换（消除头像闪烁）
plugins:
  pjax:
    enable: true
    selectors: ['title', '#l_cover', '.l_body']
  preload:
    enable: true
    service: flying_pages

_config.yml

1
2
3

title: XD笔记          # 修复 sourcetitle 笔误
index_generator:
  path: "文章"         # 博客列表路由

删除文件

踩坑记录

1. sourcetitle 笔误 — Hexo 只认 title，写错导致站点名显示 “Hexo”。
2. ... 是 YAML 文档结束符 — 不能当占位符用，必须写成 # ...。
3. menubar 是侧边栏菜单 — Stellar 顶部导航标签用 site_tree.index_blog.nav_tabs 配置。
4. index_generator.path 非空时，source/index.md 路径会被主题错误改写 — 需修改 pretty_urls.js。