容器类标签(7个)
ablock 普通块容器
note 标签就是使用 ablock 容器实现的,它们样式是相同的:
更名记录(Stellar 1.18.0)
因为原 noteblock 标签在升级到 hexo 6.0 之后跟官方库冲突了,官方一直没有解释原因,后不得不改名:
noteblock -> grid -> border -> ablock
详情见:#172
{% ablock [title] [color:color] [child:codeblock/tabs] %} |
{% ablock Stellar v1.12.0 color:warning %} |
彩色代码块
设置 child:codeblock
并设置 color:颜色枚举
可以实现 10 种不同颜色的代码块,彩色代码块一般可以用在代码正确与错误的示范对比场景。
推荐的写法
func test() { |
不推荐的写法
func test() -> () { |
嵌套其它标签
例如嵌套一个 tabs
标签:
folding 折叠容器
折叠块标签的语法格式为:
{% 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 %} |
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 |
grid 网格分区容器
这个功能在 1.12.0 版本后开始支持,目前只支持显示一行两列,且手机端因宽度较窄会恢复为单列显示。
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 bg:block %} |
bg
为可选参数,默认没有背景,可设置为block/card
两种样式
about 关于块容器
方便在关于页面显示一段图文信息,比普通块容器稍微有一点点不一样:
{% about avatar:/assets/xaoxuu/avatar/rect-256@2x.png height:80px %} |
请发表您的建议 #198
swiper 轮播容器
默认一张图片是 50% 宽度,通过设置 width:min
设置为 25% 宽度,width:max
设置为 100% 宽度。
{% swiper effect:cards %} |
{% swiper width:min/max %} |
{% swiper effect:cards/coverflow %} |
一个页面只能设置一次,第一个 swiper
容器的效果全局生效。