Stellar v2 主题修改记录 16:9 封面比例，1280×720尺寸

一、环境准备

1
2
3
4
5
6
7

# 初始化 Hexo
hexo init my-blog
cd my-blog
npm install

# 安装 Stellar 主题
git clone --depth 1 https://github.com/xaoxuu/hexo-theme-stellar.git themes/stellar

国内访问慢可以用镜像：https://gitclone.com/github.com/xaoxuu/hexo-theme-stellar.git

二、常见问题

1. 更新主题后缺少依赖

1

npm install cheerio --registry=https://registry.npmmirror.com

2. 深色模式闪烁

在 _config.stellar.yml 的 inject.head_begin 里加内联脚本，页面渲染前就设置好主题：

1
2
3

inject:
  head_begin: |
    <script src="/js/theme-init.js"></script>

source/js/theme-init.js：

1
2
3
4
5
6

(function(){
  var t = localStorage.getItem('Stellar.colorScheme');
  if(t === 'dark' || t === 'light') {
    document.documentElement.setAttribute('data-theme', t);
  }
})();

3. 左栏 Brand 横排显示

默认是竖排居中，改成横排左对齐：

1
2
3
4
5
6
7
8
9
10

.brand-wrap {
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
}
.brand-image {
  width: 48px !important;
  height: 48px !important;
  margin: 0 1rem 0 0 !important;
}

4. 文章列表封面图右侧渐隐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.post-list .post-card {
  position: relative;
}
.post-list .post-card .post-cover {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.post-list .post-card .post-cover img {
  height: 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #fff 50%);
  mask: linear-gradient(90deg, transparent, #fff 50%);
  object-fit: cover;
  opacity: 0.8;
}
.post-list .post-card .post-content {
  position: relative;
  z-index: 1;
}

5. 专栏（Topic）配置

专栏配置文件 source/_data/topic/journey.yml

1
2
3
4
5
6
7
8

name: 城市漫游
tagline: 用脚步认识一座城
route:
  path: /topic/journey/
listing:
  sort:
    field: date
    direction: asc

文章 front-matter

1
2
3
4
5
6

---
title: 第一站
collection:
  profile: topic
  id: journey
---

注意：profile: topic 不能改，id 对应文件名。

三、部署到 cnb.cool

1
2
3
4
5
6
7

# 初始化仓库
git init
git remote add origin https://cnb.cool/用户名/仓库名.git
git add .
git commit -m "初始化"
git branch -M main
git push -u origin main

四、更新stellar

1
2
3
4
5
6
7
8
9
10
11

# 1. 从 git 中移除 themes/stellar 的所有文件（磁盘文件保留）
git rm -r --cached themes/stellar

# 2. 删掉旧目录
Remove-Item -Recurse -Force themes/stellar

# 3. 重新作为 submodule 添加
git submodule add -b main https://github.com/xaoxuu/hexo-theme-stellar.git themes/stellar

# 4. 安装主题依赖
npm install --prefix themes/stellar

五、常用命令速查

1
2
3
4

npx hexo new post "标题"   # 新建文章
hexo cl; hexo g; hexo se  # 一键清除缓存并启动
hexo g && hexo d          # 生成并部署
npx wrangler@3 pages dev ./public   # wrangler启动

Stellar 剧集列表写法笔记

适用于 Hexo Stellar 主题，用来写”光影里的流年”这类剧集/电影收藏页。
两种方案：posters 海报墙（数据驱动，颜值高）+ timeline 时间线（按年份写短评）。

方案一：posters 海报墙（推荐，最省事）

用一个 yml 数据文件统一维护所有剧集，文章里一行代码出整面竖版海报墙。
以后加新剧只改 yml，不用动文章。

1. 建数据文件

新建 source/_data/links/drama.yml（按年份分文件也行，比如 drama2026.yml）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

- title: 善意的竞争
  url: https://movie.douban.com/subject/xxxxxx/
  cover: https://img9.doubanio.com/view/photo/l_ratio_poster/public/pxxxxxx.jpg
  description: 职场新人的生存博弈，9.2分
  icon:
  avatar:

- title: 我的解放日志
  url: https://movie.douban.com/subject/yyyyyy/
  cover: https://img9.doubanio.com/view/photo/l_ratio_poster/public/pyyyyyy.jpg
  description: 三个绝望的年轻人寻找不被打扰的生活，9.0分
  icon:
  avatar:

- title: 沉默的海
  url: https://movie.douban.com/subject/zzzzzz/
  cover: https://img9.doubanio.com/view/photo/l_ratio_poster/public/pzzzzzz.jpg
  description: 世界观不错，节奏偏慢，7.5分

字段说明：

2. 文章里调用

1

{% posters drama size:mix %}

size 参数（海报大小）：

• xs：最小，一排放很多张
• s：小
• m：中
• l：大
• xl：特大
• mix：大小混搭（最像豆瓣那种瀑布流，推荐）

3. 按年份分组（多文件）

如果想分年份展示，就建多个 yml：

1
2
3
4

source/_data/links/
├── drama2024.yml
├── drama2025.yml
└── drama2026.yml

文章里：

1
2
3
4
5
6
7

## 2026

{% posters drama2026 size:mix %}

## 2025

{% posters drama2025 size:mix %}

方案二：timeline 时间线（更有”流年”感）

按年份倒序排列，每部剧带评分、标签、短评，适合走心的怀旧页。

语法

1
2
3
4

{% timeline %}
<!-- node 年份/日期 -->
剧集信息
{% endtimeline %}

每个 <!-- node 标题 --> 开启一个时间节点。

完整示例

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

{% timeline %}
<!-- node 2026 -->
**善意的竞争** (2026)  {% mark color:green 9.2 %}

{% hashtag 韩剧 color:blue %} {% hashtag 职场 color:cyan %} {% hashtag 悬疑 color:purple %}

职场新人的生存博弈，节奏紧凑，女主气场全开。

{% checkbox checked:true 已看完 %}

<!-- node 2025 -->
**我的解放日志** (2022)  {% mark color:green 9.0 %}

{% hashtag 韩剧 color:blue %} {% hashtag 治愈 color:green %}

三个绝望的年轻人，在郊区寻找"不被打扰"的生活。

{% checkbox checked:true 已看完 %}

<!-- node 2024 -->
**沉默的海** (2021)  {% mark color:yellow 7.5 %}

{% hashtag 韩剧 color:blue %} {% hashtag 科幻 color:purple %}

世界观不错，节奏偏慢，后半段有点拖。

{% radio checked:true 在追 %}
{% endtimeline %}

用到的小标签速查

mark 颜色：red orange yellow green cyan blue purple
评分配色建议：绿=9分以上推荐，黄=7-8分一般，红=6分以下避雷

推荐组合写法（颜值 + 内容）

页面顶部用 posters 出一面海报墙，下面用 timeline 按年份写短评：

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

---
title: 光影里的流年
date: 2026-10-12
---

> 把看过的剧，一格一格收进光影里。

## 海报墙

{% posters drama size:mix %}

## 按年份回忆

{% timeline %}
<!-- node 2026 -->
**善意的竞争** (2026)  {% mark color:green 9.2 %}

{% hashtag 韩剧 color:blue %} {% hashtag 职场 color:cyan %}

职场新人的生存博弈，节奏紧凑。

<!-- node 2025 -->
**我的解放日志** (2022)  {% mark color:green 9.0 %}

三个绝望的年轻人寻找不被打扰的生活。
{% endtimeline %}

备注

• 海报地址去豆瓣电影条目页，右键海报图 → “复制图片地址”，用 l_ratio_poster 那个尺寸。
• 数据文件改完不用动文章，重新 hexo clean && hexo g 即可生效。
• posters 和 friends / sites 共用 _data/links/ 目录的 yml 格式，只是展示样式不同。
• 如果海报想点击放大（不跳豆瓣），在 yml 里把 url 留空即可。