tabs 分栏容器
let x = 123
print("hello world")
a | b | c |
---|---|---|
a1 | b1 | c1 |
a2 | b2 | c2 |
folders 多个折叠容器聚合
题目1
这是答案1
题目2
这是答案2
题目3
这是答案3
{% folders %}
<!-- folder 题目1 -->
这是答案1
<!-- folder 题目2 -->
这是答案2
<!-- folder 题目3 -->
这是答案3
{% endfolders %}
folding 折叠容器
默认打开的代码折叠框
代码块
{% folding child:codeblock open:true color:yellow 默认打开的代码折叠框 %}
代码块
{% endfolding %}
box 盒子容器——彩色代码块
俺是内容
俺是内容
{% box 俺是标题 color:green %}
俺是内容
{% endbox %}
grid 网格分区容器
默认的布局为【最小宽度为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 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 www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png %}
<!-- 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容器可以固定列数、背景样式、设置间距、设置圆角半径。详见Stellar 容器类标签组件
gallery 图库容器
用于制作图片墙
写法如下:
{% gallery %}






{% endgallery %}
albums 专辑容器
类似于gallery 但是支持点击跳转,数据来源于blog/source/_data/links/group_id.yml
blog/source/_posts/xxx.md
{% albums group_id %}
posters 海报容器
类似于gallery 但是支持点击跳转,数据来源于blog/source/_data/links/group_id.yml
blog/source/_posts/xxx.md
{% posters group_id %}
banner 横幅容器
可用于用户个人资料页、独立页面顶部、文章摘要卡片
具体可参考:Stellar 容器类标签组件
swiper轮播容器
默认一张图片是 50% 宽度,通过设置 width:min 设置为 25% 宽度,width:max 设置为 100% 宽度。
写法如下:
{% swiper effect:cards %}




{% endswiper %}