短代码总览 Demo

本文把主题 FluxGrid 支持的所有短代码全部过了一遍,方便核对样式。

1. [tag] 彩色内联标签

六种内置 type:

2. [scode] 提示/告知块

默认尺寸(default)

size=simple(更紧凑)

size=small(最小)

3. [button] 按钮

八种颜色

圆角 + 图标

外链会自动在新标签页打开:

4. [post] 文章卡片

站内文章(按 cid,把下面的 cid 改成你站里实际存在的文章 id)

POST · 2026.04.24【技术分享】YTBlogTheme 短代码 Demo短代码总览 Demo 本文把主题 FluxGrid 支持的所有短代码全部过了一遍,方便核对样式。 --- 1. 彩色内联标签 六种内置 type: 默认 主要 信息 警...

小尺寸站内卡片

外部链接卡片(url + title 必填,intro / cover 可选)

EXTERNAL ↗Typecho 官方仓库一款简洁、强大的博客程序。

5. [collapse] 折叠块

6. [tabs] 标签页

function hello() {
  console.log('Hello, Tabs!');
}

7. [timeline] 时间线

小尺寸(默认 type=small)

大尺寸(type=large)

8. [column] + [block] 多列栅格

两列 50/50

三列 1fr/1fr/1fr(按 fr 等分)

非等分:30% + 70%

9. [login] 登录可见

只有登录用户(博主/管理员)能看到下面方块里的真实内容,未登录的访客看到的是占位提示:

10. [reply] 评论(审核通过)可见

未评论或评论未通过审核的访客看到占位,评论通过审核后内容才会真正展示:

11. 嵌套与组合举例

在 scode 里放 button

在 collapse 里放 tabs

print("hello")

两列对比 + 按钮

附录:所有可用参数速查

[tag type={primary|info|warning|danger|success|dark}]文字[/tag]

[scode type={share|yellow|red|lblue|green}
        size={default|simple|small}]内容[/scode]

[post cid=<数字>  size={default|small}]
[post url=<URL> title=<标题> [intro=<摘要>] [cover=<图片 URL>]]

[button url=<URL>
        color={light|info|dark|success|black|warning|primary|danger}
        type=round
        icon=<任意字符/emoji>]文字[/button]

[collapse title=<标题> status=true]内容[/collapse]

[tabs][tab name=<名称> active=true]...[/tab]...[/tabs]

[timeline title=<标题> type={small|large}]
  [item date=<日期> color=<颜色>]项目[/item]
[/timeline]

[column]
  [block size=<数字%|px|em|fr>]内容[/block]
  [block size=<...>]内容[/block]
[/column]

[login]...[/login]
[reply]...[/reply]