about 关于块容器
在 1.21.0 版本后请使用 banner 组件代替。
方便在关于页面显示一段图文信息，比普通块容器稍微有一点点不一样：
{% about avatar:/asset/avatar.svg height:60px %} |
albums 专辑容器
类似于 gallery 但是支持点击跳转，数据来源于
blog/source/_data/links/group_id.yml
{% albums group_id %} |
audio 音频标签
支持音乐外链以及网易云音乐，网易云支持设置 type 以及
autoplay 参数。
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} |
type: 2/0 # 歌曲/歌单 # 不设置默认为2歌曲模式 |
banner 横幅容器
这个功能在 1.21.0 版本后开始支持，将会取代 about 组件，请尽快完成迁移。
用于独立页面顶部
{% banner 随记 bg:https://pic.imgdb.cn/item/630c11b216f2c2beb1ddc531.jpg %} |
用于用户个人资料页
{% banner 某某 这是个人简介 avatar:/asset/avatar.svg bg:https://pic.imgdb.cn/item/630c11b216f2c2beb1ddc531.jpg %} |
用作文章摘要卡片
设置 link 可以让整个卡片响应点击事件，实现点击跳转到对应文章：
{% banner 博客进阶：自动化部署 本文讲了如何利用脚本和 GitHub Actions 简化博客搭建和部署流程，提高效率。 bg:https://pic.imgdb.cn/item/630c11b216f2c2beb1ddc531.jpg link:https://xaoxuu.com/blog/20221126/ %} |
box 盒子容器
note 标签就是使用 box 容器实现的，它们样式是相同的
因为原 noteblock 标签在升级到 hexo 6.0之后跟官方库冲突了，官方一直没有解释原因，后不得不改名：
noteblock -> grid -> border -> ablock -> box
详情见：#172
Hello |
World |
{% box Stellar v1.12.0 color:warning %} |
title: # 标题 |
checkbox 复选
{% checkbox 普通的没有勾选的复选框 %} |
checked: true/false |
copy 复制行
对于单行内容，可以使用 copy 标签来实现复制功能
git:https 或者 git:ssh 或者
git:gh 来快速放置一个 git 仓库链接：
{% copy curl -s https://sh.xaox.cc/install | sh %} |
emoji 表情包
内置了可配置的表情标签
{% emoji 爱你 %} |
如果对高度有特别要求，可以指定高度，例如：
<center>{% emoji blobcat ablobcatrainbow height:1em %}{% emoji blobcat ablobcatrainbow height:2em %}{% emoji blobcat ablobcatrainbow height:3em %}{% emoji blobcat ablobcatrainbow height:2em %}{% emoji blobcat ablobcatrainbow height:1em %}</center> |
{% emoji [source] name [height:1.75em] %} |
其中 source 可省略，默认为配置中的第一个
source（详见「引入表情包」部分）
表情速查表：Stellar内嵌blobcat小表情
tag_plugins: |
在配置文件中，文件名用
${name}代替。
folding 折叠容器
title
content
{% folding title [codeblock:bool] [open:bool] [color:color] %} |
codeblock: true/false |
彩色可折叠代码块
备注标签相较于旧版进行了增强，可以实现更多种颜色，还可以通过设置
child:codeblock
来实现可折叠的代码块。以下是一个默认打开的代码折叠框：
默认打开的代码折叠框
func test() { |
代码如下：
{% folding child:codeblock open:true color:yellow 默认打开的代码折叠框 %} |
危险，请不要打开这个
警告，真的很危险
最后一次警告，千万不要打开这个
不要说我们没有警告过你，Windows 10不是為所有人設計，而是為每個人設計。
folders 多个折叠容器聚合
样式相比 folding
简单一些，适用于多个折叠标签平铺显示的场景，例如题目列表：
题目1
这是答案1
题目2
这是答案2
题目3
这是答案3
代码如下：
{% folders %} |
frame 设备框架
{% frame iphone11 img:/assets/wiki/prohud/toast/demo-loading.png video:/assets/wiki/prohud/toast/demo-loading.mp4 focus:top %} |
friends 友链
您可以在任何位置插入友链组，支持静态数据和动态数据，静态数据需要写在数据文件中：
- title: 某某某 |
在需要的位置这样写：
{% friends ios_developer %} |
实现动态友链
从 xaoxuu/issues-json-generator 作为模板克隆或者 fork 仓库
修改 config.yml 并打开 github action 的运行权限
# 要抓取的 issues 配置 |
不出意外的话，仓库中已经配置好了 issue
模板，只需要在模板中指定的位置填写信息就可以了。然后在自己的仓库里提交一个
issue 并将 Label 设置为 active 进行测试。
提交完 issue 一分钟左右，如果仓库中出现了 output
分支提交，可以点击查看一下文件内容是否已经包含了刚刚提交的 issue
中的数据，如果包含，那么前端页面就可以使用友链数据了：
{% friends api:https://raw.github.xaox.cc/xaoxuu/friends/output/v2/data.json %} |
数据托管与加速
特别感谢小冰博客的加速访问方案，解决了直接请求 GitHub API速度过慢的问题，详见 小冰博客的教程。
支持把数据托管到任何其他地方来使用，例如：
{% friends api:https://raw.github.xaox.cc/xaoxuu/friends/output/v2/data.json %} |
动态数据 API 升级至 v2 版本，原使用 issue-api仓库的需要将友链仓库同步更新。 v1 版本已经停止维护。
你可以有 N 种办法加速访问 GitHub 仓库里的文件。
gallery 图库容器
这个功能在 1.21.0 版本后开始支持，其内部只能填写 md 格式的图片。
{% gallery %} |
详细用法请看这篇文章：
ghcard 卡片
{% ghcard xaoxuu %} |
grid 网格分区容器
这个功能在 1.24.0 版本后获得重构，支持固定列数、动态列数、设置间距和圆角。
默认的布局为【最小宽度为240px】即如果页面宽度大于 480px 则会显示为 2 列，大于 720px 则会显示为 3 列，以此类推，下面是效果：
The Galactic Center is the rotational center of the Milky Way galaxy.Its central massive object is a supermassive black hole of about 4million solar masses, which is called Sagittarius A*. Its mass is equalto four million suns. The center is located 25,800 light years away fromEarth.
Ōwhiro Bay, Wellington, New Zealand Published on May 31, 2022 SONY,ILCE-6000 Free to use under the Unsplash License
{% grid %} |
如果要修改最小宽度，可以这样写：
{% grid w:350px %} |
如果要固定为 2 列，可以这样写：
{% grid c:2 %} |
普通 Box 样式：
cell 1
cell 2
cell 3
cell 4
可浮起的卡片样式：
cell 1
cell 2
cell 3
cell 4
普通 Box 样式： |
默认间距为 16px，如果需要修改，可以这样写：
{% grid bg:card gap:32px w:120px %} |
cell 1
cell 2
cell 3
cell 4
默认圆角半径等同于卡片的圆角半径，如果需要修改，可以这样写：
{% grid bg:card br:4px w:150px %} |
cell 1
cell 2
cell 3
cell 4
这里的 br 是 border-radius 的缩写，虽然和
<br>易混淆，但是我不知道是否有其他更好的命名，全称太长了。
hashtag 标签
Stellar Hexo GitHub Gitea如果没有指定颜色，且没有设置默认颜色，则随机取一个颜色，快来试试吧～
{% hashtag Stellar https://xaoxuu.com/wiki/stellar/ %} |
image 图片标签
图片标签是一个精心设计的应对各种尺寸插图的标签，对于大图，可以放置一个「下载」按钮，语法格式如下：
{% image src [description] [download:bool/string] [width:px] [padding:px] [bg:hex] %} |
src: 图片地址 |
横向铺满的图片
无论在什么宽度的设备上都希望横向铺满的图片，一般不需要额外操作。可以在链接后面写上图片描述，如有必要，可以通过设置
download:true
使其显示一个「下载」按钮链接指向图片地址，如果下载链接与显示的图片地址不同，可以
download:下载链接 来使其能够下载原图。
{% image https://s.xaox.cc/xaoxuu/posts/202401131914137.jpg-hd 图片由 xaoxuu 拍摄于一个普通的阳光明媚的下午 download:https://s.xaox.cc/xaoxuu/posts/202401131914137.jpg-hd %} |
竖图（小图）优化
宽度较小而高度较大的图片，可以设置宽、高、填充间距、背景色等对其布局进行优化，使得它在不同宽度的屏幕下都能获得不错的视觉体验：
{% image /assets/xaoxuu/mirror/apple/documentation/watchkit/06d45110-1dd7-49a4-a413-9f5159ecdd0e.png width:200px padding:16px bg:white %} |
如果不进行约束，在宽屏设备上会占用很大篇幅
可以设置填充宽度和颜色，支持 bg:var(--card)
动态颜色，能够适配暗黑模式：
{% image /asset/avatar.svg bg:var(--card) padding:16px %} |
Fancybox 插件点击放大
由于 Stellar 主题的插件具有按需加载的特性，所以 Fancybox
插件默认也是已经配置好了的，在任意 image 标签中增加
fancybox:true
参数即可为特定图片开启缩放功能。如果一个页面没有任何地方使用，则不会加载
Fancybox 插件。
如果您希望全站所有的 image
标签都开启此功能，可在主题配置文件中修改以下参数：
######## Tag Plugins ######## |
link 链接卡片
外链卡片标签的语法格式为： {% link href [title] [icon:src] [desc:true/false] %}
href: 链接
title: 可选，手动设置标题（为空时会自动抓取页面标题）
icon: 可选，手动设置图标（为空时会自动抓取页面图标）
desc: 可选，是否显示摘要描述，为true时将会显示页面描述
不带摘要的样式： |
mark 标记标签
支持多彩标记，包括：默认 红 橙 黄 绿 青 蓝 紫 亮 暗 警告 错误 一共 12 种颜色。
支持多彩标记，包括：{% mark 默认 %} {% mark 红 color:red %} {% mark 橙 color:orange %} {% mark 黄 color:yellow %} {% mark 绿 color:green %} {% mark 青 color:cyan %} {% mark 蓝 color:blue %} {% mark 紫 color:purple %} {% mark 亮 color:light %} {% mark 暗 color:dark %} {% mark 警告 color:warning %} {% mark 错误 color:error %} 一共 12 种颜色。 |
md 渲染外部 markdown 文件
{% folding %} |
效果如下
navbar 导航栏
文章内也可以插入一个导航栏：
{% navbar active:/wiki/ [文章](/) [项目](/wiki/) [留言](#comments) [GitHub](https://github.com/xaoxuu/) %} |
active 传入要高亮的那个按钮的 url
note 备注块
{% note [title] content [color:color] %} |
title: 标题（可选） |
具有标题的备注块
直接写备注内容，默认是和代码块一样的样式，第一个空格前面的是标题，后面的是正文，如果标题中需要显示空格，请使用
代替。
这是正文 哈哈。
{% note 这 是标题 这是正文 哈哈。 %} |
彩色备注块
备注块示例
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
color可设置red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error几种取值。
{% note 一共支持12种颜色，可以满足几乎所有的需求了。 color 可设置 red、orange、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 %} |
okr 目标管理
这个功能在 1.20.0 版本后开始支持，这是一个 OKR（Objectives and Key Results）示例：
来自2025年的复盘：已《基本》实现目标
- 当 KR进度为 100% 时，标签默认显示为已完成
- 当 KR未设置进度时，默认为0%
- 当 O未设置进度时，则显示所有KR进度平均值
您可以在 _config.yml 文件中修改标签的颜色和文案
您可以在 _config.yml 文件中增加任意的标签配置
第一行会被作为标题并加粗，写法如下：
{% okr o1 %} |
poetry 诗词
莫笑农家腊酒浑，丰年留客足鸡豚。
山重水复疑无路，柳暗花明又一村。
箫鼓追随春社近，衣冠简朴古风存。
从今若许闲乘月，拄杖无时夜叩门。
{% poetry 游山西村 author:陆游 footer:诗词节选 %} |
posters 海报容器
类似于 gallery 但是支持点击跳转，数据来源于
blog/source/_data/links/group_id.yml
{% posters group_id %} |
quot 引用
适合居中且醒目的引用：
Stellar 是迄今为止最好用的主题
支持自定义引号：
热门话题
其中自定义引号素材在主题配置文件的 tag_plugins.quot
中配置：
tag_plugins: |
写法如下
适合居中且醒目的引用：{% quot Stellar 是迄今为止最好用的主题 %} |
特别引用
此外，加上
el:h2/h3/h4/h5/h6可以作为标题使用
radio 单选
{% radio 没有勾选的单选框 %} |
checked: true/false |
sites 网站卡片
您可以在任何位置插入网站卡片组，支持静态数据和动态数据，静态数据需要写在数据文件中：
- title: 标题 |
在需要的位置这样写：
{% sites 分组名 %} |
原 friends 和 sites 标签数据合并至 links/xxx.yml文件，动态数据使用方法同友链，数据源格式相同，与友链共享数据，仅样式不同，也可以用sites 标签做友链。
swiper 轮播容器
默认一张图片是 50% 宽度，通过设置 width:min 设置为 25%
宽度，width:max 设置为 100% 宽度。
{% swiper effect:cards %} |
{% swiper width:min/max %} |
{% swiper effect:cards/coverflow %} |
一个页面只能设置一次，第一个 swiper容器的效果全局生效。
tabs 分栏容器
这个标签移植自 NexT 主题，但做了以下修改：
- 支持设置
align:center来使内容居中 - 设置默认激活的标签方式为
active:1而非, 1（使用默认格式降低学习成本，且显式声明可读性更强） - 不需要
<!-- endtab -->来作为结束标识（因为 Stellar 会自动判断） - 不需要
tabs id来保证唯一性（因为 Stellar 会设置唯一标识） - 不支持
@icon方式设置图标（因为 Stellar 不再内置fontawesome图标库） - 轮廓样式简化，可以搭配其它容器类标签嵌套使用。
let x = 123 |
| a | b | c |
|---|---|---|
| a1 | b1 | c1 |
| a2 | b2 | c2 |
timeline 时间线
支持静态和动态时间线数据源： - 静态数据 - github issues 支持多种筛选参数，详见 API - github releases 支持多种筛选参数，详见 API - gitea issues 支持多种筛选参数，详见 API - gitea releases 支持多种筛选参数，详见 API - memos - ...
常见的使用场景请看这篇文章：
静态时间线
静态数据是写死在 md 源文件中的，在 deploy
时就已经确定了。
今天除夕，也是生日，一个人在外地过年+过生日，熬夜开发新主题，尽量在假期结束前放出公测版。
{% timeline %} |
动态时间线
动态数据是从 GitHub Issues 中拉取的，使用方法为：
- 建一个仓库
- 创建一个
issue并添加一个label进行测试 - 写
timeline标签时加上api:https://api.github.com/repos/your-name/your-repo/issues
例如： {% timeline api:https://api.github.com/repos/xaoxuu/blog-timeline/issues?direction=asc&per_page=3 %}{% endtimeline %}
{% timeline type:fcircle api:https://raw.github.xaox.cc/xaoxuu/friends-rss-generator/output/data.json %} |
- fork shaoyaoqian/WeiboSpider 的爬虫，修改自己的仓库名
- 修改
.github/workflows/main.yml中的微博ID为你想爬取的ID，修改完后每天会自动爬取你的微博，存储为 json 文件，输出文件在 output 分支
{% timeline limit:20 type:weibo api:你的json文件地址 %}{% endtimeline %} |
静态 + 动态
用法同静态和动态单独使用时一样，例如：
{% timeline reversed:true api:https://api.github.com/repos/xaoxuu/blog-timeline/issues?per_page=2 %} |
数据筛选
只显示某个人的数据
筛选最近3条todo
筛选评论最多的3条建议
上述示例代码如下：
{% folders %} |
更多用法详见：
toc 文档目录树
{% toc wiki:xxx [open:true] [display:mobile] title %} |
video 视频标签
支持 bilibili 和视频外链，可设置最大宽度， bili 可设置自动播放
{% video bilibili:BV1GP4y1d729 %} |
width: 500px # 须带单位 80% 20em 100mm... |
目前 bilibili 的 iframe 标签不能放进 grid 容器里，原因未知。