emoji 表情

语法

1

{% emoji [source] name [height:1.75em] %}

• source 可省略，默认为配置中第一个 source
• height 指定表情高度

效果演示

Stellar 内置表情包源

在 _config.yml 的 theme_config 中配置：

1
2
3
4
5
6
7

tag_plugins:
  emoji:
    default: https://gcore.jsdelivr.net/gh/cdn-x/emoticons/qq/{name}.gif
    twemoji: https://gcore.jsdelivr.net/gh/twitter/twemoji/assets/svg/{name}.svg
    qq: https://gcore.jsdelivr.net/gh/cdn-x/emoticons/qq/{name}.gif
    aru: https://gcore.jsdelivr.net/gh/cdn-x/emoticons/aru-l/{name}.gif
    tieba: https://gcore.jsdelivr.net/gh/cdn-x/emoticons/tieba/{name}.png

示例：

• {% emoji aini %} — 使用 default (qq) 源
• {% emoji twemoji 1f600 %} — 使用 twemoji 源
• {% emoji aru 得意 %} — 使用 aru 源
• {% emoji tieba huaji %} — 使用 tieba 源

blobcat 小表情（Stellar 内置）

Stellar 已默认内置 blobcat 表情。

表情速查：

示例：{% emoji blobcat heart %} {% emoji blobcat think %} {% emoji blobcat coffee %}

引入 blobcat 1.0

1
2
3
4

tag_plugins:
  emoji:
    default:
    blobcat: https://raw.githubusercontent.com/norevi/waline-blobcatemojis@1.0/blobs/%s.png

raw.githubusercontent.com 线路较慢，可替换为更快的 CDN：

• raw.iqiq.io
• jsd.cdn.zzko.cn
• fastly.jsdelivr.net
• cdn.staticaly.com
• raw.fastgit.org
• gcore.jsdelivr.net
• github.moeyy.xyz

使用方法：ping 以上链接，选最快的替换。

示例：{% emoji blobcat ablobcatrainbow %}

引入 blobcat 2.0（已不推荐）

该仓库已 Archived，链接已失效。且表情文件后缀不统一，需分两部分引入：

1
2
3
4
5

tag_plugins:
  emoji:
    default:
    bbpng: https://emoj.ml/blob%s.png
    bbgif: https://emoj.ml/ablob%s.gif

1.0 与 2.0 文件不通用。2.0 的 png 文件有前缀 blob，gif 文件有前缀 ablob，引用时只需写后半部分名称：

1

{% emoji bbpng enjoy %}{% emoji bbgif attention %}

建议 fork 仓库自行托管，或修改为自定义表情。

icon 图标

支持在任意位置插入图标，支持外链图标，也可以在 source/_data/icons.yml 中提前配置。

语法

1

{% icon key/url [color:颜色] [style:css样式] %}

• key/url — icons.yml 中的图标 key，或外链 SVG 地址
• color:颜色 — 指定图标颜色
• style:css — 直接修改样式（仅外链图标支持，中间不能有空格）

效果演示

icons.yml 中的图标：
外链图标：
指定颜色：

配置默认颜色

1
2
3

tag_plugins:
  icon:
    default_color: accent  # theme, accent, red, orange, yellow, green, cyan, blue, purple

留空时图标颜色与文字颜色相同。

mark 彩色标记

共支持 12 种颜色：

这是默认
这是红色
这是橙色
这是黄色
这是绿色
这是青色
这是蓝色
这是紫色
这是亮色
这是暗色
这是警告
这是错误

语法

1

{% mark 文字 [color:颜色] %}

颜色：red orange yellow green cyan blue purple light dark warning error（不加 color 默认为红色）

hashtag 话题标签

语法

1

{% hashtag 名称 URL [color:颜色] %}

• 未指定颜色且未设置默认颜色时，随机取一个颜色

image 图片

语法

1

{% image src [description] [download:bool/string] [width:px] [padding:px] [bg:hex] [fancybox:bool/string] [ratio:宽/高] %}

参数说明：

横向铺满的图片

图片由 xaoxuu 拍摄于一个普通的阳光明媚的下午

竖图（小图）优化

宽度较小而高度较大的图片，可以设置宽、高、填充间距、背景色：

支持动态颜色

bg:var(--card) 可以适配暗黑模式。

Fancybox 点击放大

在 image 标签中增加 fancybox:true 参数即可为特定图片开启缩放功能。也可以在主题配置中全局开启：

1
2
3

tag_plugins:
  image:
    fancybox: false

blockquote 段落引用

标准写法 > 引用内容 的增强版本，适合不太强调的、大段落的引用。

对比

这是使用 > 写法的例子：

这是使用 “> 引用” 写法的例子

这是使用 blockquote 标签的例子：

两者的区别：

• > 写法在技术文章和非技术文章样式不同
• blockquote 标签始终表现为非技术文章样式

quot 强调引用

适合居中且醒目的引用。

语法

1

{% quot 文字 [icon:图标key] [prefix:前缀图标] [suffix:后缀图标] [el:h2/h3/h4/h5/h6] %}

自定义引号

使用任意图标

作为标题使用

加上 el:h2/h3/h4/h5/h6 可作为标题：

配置

在 _config.yml 中配置默认引号图标：

1
2
3
4
5
6
7

tag_plugins:
  quot:
    default:
      prefix: bxs:quote-left
      suffix: bxs:quote-right
    hashtag:
      prefix: solar:hashtag-square-bold

note 彩色备注块

mark 彩色高亮

这是高亮文字，这是黄色高亮。

内联标签（文本修饰）

• 这是高斯模糊标签
• 这是密码标签
• 这是下划线标签
• 这是着重号标签
• 这是波浪线标签
• 这是删除线标签
• 这是^上角标标签
• 这是_下角标标签
• 这是键盘标签，试一试：⌘ + D

语法

1
2
3
4
5
6
7
8
9

{% blur 文字 %}       高斯模糊
{% psw 文字 %}        密码遮蔽（hover 显示内容）
{% u 文字 %}          下划线
{% emp 文字 %}        着重号（底部圆点）
{% wavy 文字 %}       波浪下划线
{% del 文字 %}        删除线
{% sup 文字 [color] %} 上角标
{% sub 文字 %}        下角标
{% kbd 文字 %}        键盘样式

audio 音频

外链音乐

网易云音乐

网易云音乐外链可能因版权或跨域限制无法加载（music.163.com iframe 被浏览器拦截），建议测试时使用外链 MP3 地址。

语法

1
2

{% audio [type:2/0] netease:歌曲ID [autoplay:1/0] %}
{% audio 外链MP3地址 %}

参数：

• type:2 — 歌曲模式（默认）
• type:0 — 歌单模式
• netease:xxx — 网易云音乐歌曲/歌单 ID
• autoplay:1/0 — 自动播放/手动播放（默认 0）

video 视频

Bilibili 视频

Bilibili 和 YouTube 视频的 iframe 在本地开发时（localhost:4000）会触发跨域安全策略报错（SecurityError、cross-origin frame），不影响实际显示。部署到正式域名（https://blog.hanxi.fun）后正常。

YouTube 视频

外链视频

语法

1
2
3

{% video bilibili:BV号 [width:100%] [autoplay:0] %}
{% video youtube:ID [width:100%] [autoplay:0] %}
{% video 视频外链URL [width:100%] [autoplay:0] %}

参数：

• width:500px — 宽度，须带单位（80% 20em 100px…）
• autoplay:1/0 — 自动播放/手动播放（默认 0）

frame 设备框架

语法

1

{% frame 设备型号 [img:图片URL] [video:视频URL] [focus:top/center/bottom] %}

支持的设备：iphone11 等，focus 控制屏幕内容聚焦位置。

navbar 导航栏

语法

1

{% navbar active:当前路径 [文字](链接) [文字2](链接2) ... %}

chat 聊天对话框

感谢 @且听风吟 为 Stellar 开发了精美的聊天风格标签。内置 QQ 和微信风格，支持单聊、群聊，支持文本、icon、图片、语音、视频、文件和链接。

1. 配置用户

在 source/_data/chat_users.yml 中定义用户：

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

user1:
  name: 寒夕
  avatar: /images/avatar.jpg
  label:
    text: 群主
    textColor: white
    bgColor: '#2196f3'
user2:
  name: 访客
  avatar: https://gcore.jsdelivr.net/gh/HcGys/DataSource/stellar/img/twikoo-default-avatar.jpeg
  label:
    text: 管理员
    textColor: white
    bgColor: '#f44336'

2. QQ 群聊（手机框架）

14:36

7

测试群聊

2026年5月18日 15:00

群主寒夕

你好，欢迎来到我的博客！

管理员访客

寒夕

你好，欢迎来到我的博客！

@寒夕 Are U OK

群主寒夕

群主寒夕

管理员访客

群主寒夕

https://xaoxuu.com/blog/20221029/

 QQ小程序

管理员访客

https://github.com/xaoxuu/hexo-theme-stellar

undefined  Chrome浏览器

发送

3. QQ 单聊（手机框架）

14:36

6

寒夕

2026年5月18日 15:00

群主寒夕

你好

管理员访客

Are U OK

群主寒夕

群主寒夕

管理员访客

群主寒夕

https://xaoxuu.com/blog/20221029/

 QQ小程序

发送

4. 微信单聊（手机框架）

14:36

7

寒夕

2026年5月18日 15:00

群主寒夕

你好

管理员访客

Are U OK

寒夕:

你好

群主寒夕

群主寒夕

管理员访客

群主寒夕

https://xaoxuu.com/blog/20221029/

 QQ小程序

管理员访客

https://github.com/xaoxuu/hexo-theme-stellar

undefined  Chrome浏览器

5. 微信单聊（无框架）

5

寒夕

2026年5月18日 15:00

群主寒夕

你好

管理员访客

Are U OK

群主寒夕

群主寒夕

管理员访客

语法

1
2
3
4
5
6
7
8
9
10
11

{% chat [设备] [style:qq/wechat] [title:标题] [scene:person/group] [me:用户ID] %}
<!-- chattip 时间提示 -->
<!-- chatcell user:用户ID md:文字内容 tag:已读标记 -->
<!-- chatcell user:用户ID image:图片URL -->
<!-- chatcell user:用户ID emoji:表情名 source:表情源 -->
<!-- chatcell user:用户ID link:链接URL from:来源 -->
<!-- chatcell user:用户ID voice:音频URL -->
<!-- chatcell user:用户ID video:视频URL -->
<!-- chatcell user:用户ID file:文件URL -->
<!-- chatcell user:用户ID quote:回复标记 -->
{% endchat %}

参数：

• 设备 — iphone11 等，不填则无手机框架
• style:qq/wechat — 聊天风格
• scene:person/group — 单聊 / 群聊
• me:用户ID — 当前用户（消息靠右显示）

chatcell 消息类型：

• md:文字 — Markdown 文本
• image:URL — 图片
• emoji:表情名 source:源 — 表情
• link:URL from:来源 — 链接卡片
• voice:URL — 语音
• video:URL — 视频
• file:URL — 文件

checkbox 复选框

button 按钮

语法

1

{% button text url [icon:key/src] [color:color] [size:xs] %}

参数：

• text — 显示文字（必填）
• url — 跳转链接（必填）
• icon:key/src — icons.yml 中的文件名或外链 SVG
• color — theme accent red orange yellow green cyan blue purple
• size:xs — 按钮尺寸，默认普通大小，xs 为最小号

link 链接卡片

不带摘要

带摘要

手动设置标题和图标

语法

1

{% link href [title] [icon:src] [desc:true/false] %}

参数：

• href — 链接地址（必填）
• title — 手动设置标题（为空时自动抓取）
• icon:src — 手动设置图标（为空时自动抓取）
• desc:true/false — 是否显示摘要描述

自部署 API

使用默认 api 可能流量超限，推荐自部署：

1
2
3

data_services:
  siteinfo:
    api: https://your-api-domain.com/site_info/v1?url={href}

参考：https://github.com/xaoxuu/site-info-api/

poetry 诗词

语法

1
2
3

{% poetry 标题 author:作者 [date:日期] [footer:页脚] %}
内容（支持 Markdown）
{% endpoetry %}

paper 纸张标签

语法

1
2
3

{% paper [style:underline] [title:标题] [author:作者] [date:日期] [footer:页脚] %}
内容
{% endpaper %}

正文格式标记：

• <!-- section --> — 小节标题（居中）
• <!-- paragraph --> — 段落（首行缩进）
• <!-- line left --> — 左对齐
• <!-- line right --> — 右对齐

reel 卷轴标签

语法

1
2
3

{% reel 标题 [author:作者] [date:日期] [footer:页脚] %}
内容
{% endreel %}

copy 复制行

带前缀：

Git 仓库链接：

语法

1
2

{% copy content [prefix:前缀] %}
{% copy git:https|ssh|gh repo路径 %}

radio 单选

语法

1

{% radio text [checked:true/false] [color:颜色] %}

okr 目标管理

语法

1
2
3
4
5
6
7
8
9

{% okr o1 %}
目标描述

<!-- okr kr1 percent:进度 status:状态 -->
关键结果描述

<!-- okr kr2 percent:80 -->
...
{% endokr %}

状态：normal(默认) off_track(偏离) unfinished(未完成) at_risk(有风险) done(已完成)

folding 折叠块

1

console.log('hello')

box 彩色容器

1
2
3

func test() {
  // ...
}

1
2
3

func test() -> () {
  // ...
}

tabs 分栏

文字

图片

代码

这是文字标签页的内容

图片标签页

1 2	let x = 123 print("hello world")

grid 网格

banner 横幅

用户资料页风格

寒夕

这是个人简介

文章摘要卡片（可点击跳转）

博客进阶：自动化部署

本文讲了如何利用脚本和 GitHub Actions 简化博客搭建和部署流程，提高效率。

folders 多折叠集合

gallery 图片画廊

风景1

风景2

风景3

swiper 轮播

timeline 时间线

文章与页面配置

文章类型

决定布局风格，在 front-matter 中设置：

1
2

type: tech   # 技术类文章（默认）
type: story  # 图文类文章，段落间距更大

或在主题配置中设置默认值：

1
2

article:
  type: tech

文章封面

基本封面

1

cover: https://example.com/cover.jpg

海报（全图封面卡片）

1
2
3
4
5
6

cover: https://example.com/cover.jpg
poster:
  topic: 标题上方的小字
  headline: 大标题
  caption: 标题下方的小字
  color: white  # 标题颜色，可选

Stellar v1.14.0 已更换 cover-title cover-cat cover-subtitle cover-text-color 为 poster

摘要

手动设置

用 <!-- more --> 分隔摘要和正文，前后必须有空行：

1
2
3
4
5

这是摘要内容，在文章列表可以看到。

<!-- more -->

这是正文，在主页看不到。

自动生成

在主题配置中设置：

1
2

article:
  auto_excerpt: 200

AI 摘要

1
2
3
4
5
6
7
8

tianli_gpt:
  enable: true
  js: https://jsd.onmicrosoft.cn/gh/qxchuckle/Post-Summary-AI@6.0/chuckle-post-ai.min.js
  field: post
  key: 你的key
  total_length: 1000
  typewriter: true
  summary_directly: true

文章横幅

1

banner: https://example.com/banner.jpg

隐藏/指定标题

1
2

h1: 快速开始        # 指定一级标题
h1: ''              # 隐藏标题

分类与标签

1
2

categories: [设计开发, iOS开发]  # 只显示第一级分类在列表页
tags: [iOS, 心率]                # 用于搜索、相关文章推荐

文章模板

编辑 scaffolds/post.md 自定义新建文章的 front-matter：

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

---
title: {{ title }}
date: {{ date }}
tags: []
categories: []
description:
cover:
banner:
poster:
  topic:
  headline:
  caption:
  color:
sticky:
mermaid:
katex:
mathjax:
topic:
author:
references:
comments: false
indexing: false
breadcrumb: false
leftbar:
rightbar:
h1:
type:
---

参考资料

1
2
3

references:
  - '[文章标题](https://example.com/post.html)'
  - '[另一篇文章](https://example.com/post2.html)'

许可协议

主题配置：

1
2

article:
  license: '本文采用 [署名-非商业性使用-相同方式共享 4.0 国际](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。'

支持 {author.name} 变量。

分享链接

1
2

article:
  share: [wechat, weibo, email, link]

覆盖 OpenGraph（分享缩略图）

1
2

open_graph:
  image: https://example.com/share-thumb.jpg

相关文章推荐

安装插件：

1

npm i hexo-related-popular-posts

主题配置：

1
2
3
4

article:
  related_posts:
    enable: true
    title: 您可能感兴趣的文章

独立页面菜单高亮

通过 menu_id 使页面对应菜单按钮高亮：

1
2
3
4

---
menu_id: more
title: 关于
---

友链页面

在 source/_data/links/分组名.yml 定义友链：

1
2
3
4
5

- title: 标题
  url: https://
  cover:
  icon:
  description:

文章中插入：

1

{% friends 分组名 %}