Stellar：容器类标签

box 盒子容器

note 标签就是使用 box 容器实现的，它们样式是相同的：

语法格式

{% box [title] [color:color] [child:codeblock/tabs] %}
...
{% endbox %}

彩色代码块

设置 child:codeblock 并设置 color:颜色枚举 可以实现 10 种不同颜色的代码块，彩色代码块一般可以用在代码正确与错误的示范对比场景。

示例

写法

推荐的写法

func test() {
    // ...
}

不推荐的写法

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

嵌套多段代码块

在同一个 box 标签中放入多个代码块：

示例

写法

发送端

+ (void)test {
    [NSNotificationCenter.defaultCenter postNotificationName:@"test" object:nil];
}

订阅端

func setup() {
    list.add(title: "test") { section in
        section.add(title: "设置 Observer") {
            NotificationCenter.default.addObserver(self, selector: #selector(self.onReceive), name: .init("test"), object: nil)
        }
        section.add(title: "发通知") {
            OC.test()
        }
    }
}
@objc func onReceive(other: (() -> Void)? = nil) {
    Capsule("收到通知")
}

嵌套其它标签

例如嵌套一个 tabs 标签：

图文混排

示例代码

个人电脑作为办公设备时，我们该如何保护隐私？

公司一般都会强制安装安防软件，这些软件要求开机自启动，要求有屏幕录制权限、完全的磁盘访问权限包括相册图库。因此如果使用自己的 MacBook 作为办公设备，必须要把生活区和工作区完全独立开，安装在两个磁盘分区，并且对磁盘分区进行加密。

dropdown 是一个通用的图标链接下拉菜单，可以用于正文内容，也被 Footer Social 复用：

语法格式

{% dropdown [direction:up/down] [align:left/right] [open:true] title %}
- [标题](url)
- icon:key [带图标标题](url)
{% enddropdown %}

主按钮自带展开箭头，无需填写 icon；已有的主按钮 icon: 参数会被忽略。子项使用 [标题](URL)，可以附加 icon:key，省略时只显示文字。

鼠标移入按钮时展开菜单，移出按钮和菜单后关闭。菜单默认根据可用空间选择展开方向，也可以用 direction:up/down 指定上下方向，用 align:left/right 指定对齐方式。内容过高时可以滚动，不受正文或侧栏裁剪。菜单适配明暗主题，不支持嵌套 dropdown。

folding 折叠容器

折叠块标签的语法格式为：

{% folding title [codeblock:bool] [open:bool] [color:color] %}
content
{% endfolding %}

参数说明

codeblock: true/false
open: true/false
color: red/orange/yellow/green/cyan/blue/purple/light/dark

彩色可折叠代码块

设置 child:codeblock 可以折叠代码块，也可以指定颜色。以下代码折叠框默认展开：

默认打开的代码折叠框

func test() {
  print("hello world")
}

代码如下：

{% folding child:codeblock open:true color:yellow 默认打开的代码折叠框 %}
代码块
{% endfolding %}

危险，请不要打开这个

可以用颜色区分提示、警告等不同内容。

警告，真的很危险

可以用颜色区分提示、警告等不同内容。

最后一次警告，千万不要打开这个

不要说我们没有警告过你，Windows 10 不是為所有人設計，而是為每個人設計。

folders 多个折叠容器聚合

样式相比 folding 简单一些，适用于多个折叠标签平铺显示的场景，例如题目列表：

语法格式

{% folders [color:color] %}
<!-- folder 标题 -->
内容
{% endfolders %}

color 会作为颜色属性传给容器；省略时使用默认样式。每个  开启一项，没有任何 folder 标记时输出空容器。

题目1

这是答案1

题目2

这是答案2

题目3

这是答案3

代码如下：

{% folders %}
<!-- folder 题目1 -->
这是答案1
<!-- folder 题目2 -->
这是答案2
<!-- folder 题目3 -->
这是答案3
{% endfolders %}

tabs 分栏容器

tabs 移植自 NexT 主题，在 Stellar 中的用法如下：

支持设置 align:center 来使内容居中
设置默认激活的标签方式为 active:1 而非 , 1
不需要  来作为结束标识
不需要 tabs id 来保证唯一性
不支持 @icon 方式设置图标（因为 Stellar 不再内置 fontawesome 图标库）
轮廓样式简化，可以搭配其它容器类标签嵌套使用。

let x = 123
print("hello world")

a	b	c
a1	b1	c1
a2	b2	c2

grid 网格分区容器

这个功能在 1.24.0 版本后获得重构，支持固定列数、动态列数、设置间距和圆角。

动态列数

默认的布局为【最小宽度为240px】即如果页面宽度大于 480px 则会显示为 2 列，大于 720px 则会显示为 3 列，以此类推，下面是效果：

Unsplash Photo

The Galactic Center is the rotational center of the Milky Way galaxy. Its central massive object is a supermassive black hole of about 4 million solar masses, which is called Sagittarius A*. Its mass is equal to four million suns. The center is located 25,800 light years away from Earth.

Ōwhiro Bay, Wellington, New Zealand
Published on May 31, 2022
SONY, ILCE-6000
Free to use under the Unsplash License

示例写法如下：

{% grid %}
<!-- cell -->
{% image https://images.unsplash.com/photo-1653979731557-530f259e0c2c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80 download:https://unsplash.com/photos/bcql6CtuNv0/download?ixid=MnwxMjA3fDB8MXx0b3BpY3x8NnNNVmpUTFNrZVF8fHx8fDJ8fDE2Njg4NDAxMDI&force=true ratio:774/1161 %}
<!-- cell -->
**[Unsplash Photo](https://unsplash.com/photos/bcql6CtuNv0)**

The Galactic Center is the rotational center of the Milky Way galaxy. Its central massive object is a supermassive black hole of about 4 million solar masses, which is called Sagittarius A*. Its mass is equal to four million suns. The center is located 25,800 light years away from Earth.

> Ōwhiro Bay, Wellington, New Zealand
> Published on May 31, 2022
> SONY, ILCE-6000
> Free to use under the Unsplash License

{% endgrid %}

如果要修改最小宽度，可以这样写：

{% grid w:350px %}
...
{% endgrid %}

固定列数

如果要固定为 2 列，可以这样写：

{% grid c:2 %}
...
{% endgrid %}

背景样式

普通 Box 样式：

cell 1

cell 2

cell 3

cell 4

可浮起的卡片样式：

cell 1

cell 2

cell 3

cell 4

示例写法如下：

普通 Box 样式：

{% grid bg:box w:150px %}
<!-- cell -->
cell 1
<!-- cell -->
cell 2
<!-- cell -->
cell 3
<!-- cell -->
cell 4
{% endgrid %}

可浮起的卡片样式：

{% grid bg:card w:150px %}
<!-- cell -->
cell 1
<!-- cell -->
cell 2
<!-- cell -->
cell 3
<!-- cell -->
cell 4
{% endgrid %}

设置间距

默认间距为 16px，如果需要修改，可以这样写：

{% grid bg:card gap:32px w:120px %}
<!-- cell -->
cell 1
<!-- cell -->
cell 2
<!-- cell -->
cell 3
<!-- cell -->
cell 4
{% endgrid %}

cell 1

cell 2

cell 3

cell 4

设置圆角半径

默认圆角半径等同于卡片的圆角半径，如果需要修改，可以这样写：

{% grid bg:card br:4px w:150px %}
<!-- cell -->
cell 1
<!-- cell -->
cell 2
<!-- cell -->
cell 3
<!-- cell -->
cell 4
{% endgrid %}

cell 1

cell 2

cell 3

cell 4

br 是 border-radius 的缩写，用来设置圆角半径。

banner 可以在正文中展示带背景图、标题和导航的横幅。

语法格式

{% banner title [subtitle] [bg:url] [avatar:url] [link:url] %}
[可选的 navbar 标签]
{% endbanner %}

title/subtitle 是顺序参数；bg、avatar、link 是命名参数。设置 link 时整个横幅可点击；未设置时顶部显示返回按钮。内容区只取第一个已渲染的 navbar。

鼠标悬停时，背景图会缓慢放大并变暗。

标题、副标题和导航文字会根据背景图调整颜色。

用于独立页面顶部

写法如下：

{% banner 随记 bg:https://res.xaox.cc/gh/cdn-x/xaoxuu@main/posts/20250706164631268.webp %}
{% navbar active:/notes/ [随记](/notes/) [收藏](/bookmark/) %}
{% endbanner %}

用于用户个人资料页

写法如下：

{% banner 某某 这是个人简介 avatar:https://res.xaox.cc/gh/cdn-x/xaoxuu@main/avatar/classic.webp bg:https://res.xaox.cc/gh/cdn-x/xaoxuu@main/posts/20250706163949681.webp %}
{% endbanner %}

用作文章摘要卡片

设置 link 可以让整个卡片响应点击事件，实现点击跳转到对应文章：

{% banner 博客进阶：自动化部署 本文讲了如何利用脚本和 GitHub Actions 简化博客搭建和部署流程，提高效率。 bg:https://res.xaox.cc/gh/cdn-x/xaoxuu@main/posts/20250706160404696.webp link:/blog/20221126/ %}
{% endbanner %}

gallery 图库

gallery 用于排列一组图片，内部使用 Markdown 图片语法。

语法格式

{% gallery [layout:grid/flow] [size:s/m/l/xl/mix] [aspect_ratio:original/square/portrait] %}
![说明](图片地址)
{% endgallery %}

layout 默认 grid，flow 为竖向瀑布流。size 和 aspect_ratio 省略时分别读取 tags.gallery.size/aspect_ratio，默认为 mix/square。容器内只处理独立的 Markdown 图片行；无有效图片时输出空图库。

@tianhao_wang

@eberhard

@vklemen

写法如下

{% gallery %}
![@tianhao_wang](https://images.unsplash.com/photo-1688142202243-e218ad203952?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYzfEZ6bzN6dU9ITjZ3fHxlbnwwfHx8fHw%3D)
![@eberhard](https://images.unsplash.com/photo-1700994630045-f7a20df6d92e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjN8fHxlbnwwfHx8fHw%3D)
![@eberhard](https://images.unsplash.com/photo-1533274221104-015a584a1005?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4fGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D)
![@eberhard](https://images.unsplash.com/photo-1539604214100-ab860d9082e0?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIxfGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D)
![@eberhard](https://images.unsplash.com/photo-1698843848092-588f9c1bb0bd?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mzh8fHxlbnwwfHx8fHw%3D)
![@vklemen](https://images.unsplash.com/photo-1516571748831-5d81767b788d?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
{% endgallery %}

详细用法请看这篇文章：

/blog/20231223/https://xaoxuu.com/blog/20231223/

swiper 轮播容器

默认一张图片是 50% 宽度，通过设置 width:min 设置为 25% 宽度，width:max 设置为 100% 宽度。

写法如下

{% swiper effect:cards %}
![](https://images.unsplash.com/photo-1625171515821-1870deb2743b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80)
![](https://images.unsplash.com/photo-1528283648649-33347faa5d9e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80)
![](https://images.unsplash.com/photo-1542272201-b1ca555f8505?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80)
![](https://images.unsplash.com/photo-1524797905120-92940d3a18d6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80)
{% endswiper %}

宽度

切换效果

写法如下

{% swiper width:min/max %}
...
{% endswiper %}

{% swiper effect:cards/coverflow %}
...
{% endswiper %}

注意

一个页面只能设置一次，第一个 swiper 容器的效果全局生效。

table 表格容器

普通 Markdown 表格默认铺满容器，单元格不换行，内容超宽时横向滚动。需要自动换行、固定列宽或紧凑间距时，可以用 table 标签选择样式。各样式均使用圆角边框。

table 标签用于包裹 Markdown 表格，通过 style 参数切换展示样式：

scroll

场景	示例内容
横向滚动	这是一段比较长的说明文字，如果长度超出了页面宽度，会超出容器宽度，导致横向滚动
普通单元格	内容较短的单元格

{% table style:scroll %}
| 列1 | 列2 |
| :--- | :--- |
| A | B |
{% endtable %}

wrap

场景	示例内容
自动换行	这是一段比较长的说明文字，如果长度超出了页面宽度，会自动换行到下一行，而不是超出容器宽度
普通单元格	内容较短的单元格

{% table style:wrap %}
| 列1 | 列2 |
| :--- | :--- |
| A | B |
{% endtable %}

compact

与 scroll 一样「宽度足够时铺满、内容超出时横向滚动」，仅内边距与行高更紧凑。

参数	说明
内边距	上下 4px、左右 1em
行高	1.4

{% table style:compact %}
| 列1 | 列2 |
| :--- | :--- |
| A | B |
{% endtable %}

容器类标签

box 盒子容器

彩色代码块

嵌套多段代码块

嵌套其它标签

folding 折叠容器

彩色可折叠代码块

folders 多个折叠容器聚合

tabs 分栏容器

grid 网格分区容器

动态列数

固定列数

背景样式

设置间距

设置圆角半径

banner 横幅容器

用于独立页面顶部

用于用户个人资料页

用作文章摘要卡片

gallery 图库

swiper 轮播容器

table 表格容器

scroll

wrap

compact

站内搜索

容器类标签

box 盒子容器

彩色代码块

嵌套多段代码块

嵌套其它标签

dropdown 下拉菜单

folding 折叠容器

彩色可折叠代码块

folders 多个折叠容器聚合

tabs 分栏容器

grid 网格分区容器

动态列数

固定列数

背景样式

设置间距

设置圆角半径

banner 横幅容器

用于独立页面顶部

用于用户个人资料页

用作文章摘要卡片

gallery 图库

swiper 轮播容器

table 表格容器

scroll

wrap

compact