本文展示了主题支持的所有自定义短代码(Shortcodes),用于在 Markdown 文章中插入丰富的内容元素。
一、国内网站嵌入
1. B站视频 (bilibili)
嵌入 B站 视频,支持 BV 号或 av 号。
1{{< bilibili "BV1634y1t7xR" >}}
2. 腾讯视频 (tencent)
1{{< tencent "u00306ng962" >}}
3. 抖音 (douyin)
1{{< douyin "7300000000000000001" >}}
4. 优酷 (youku)
1{{< youku "XMzkzNDAwMjg0" >}}
5. 爱奇艺 (iqiyi)
1{{< iqiyi "a_19irtgqk8s" >}}
6. 微博卡片 (weibo)
以卡片样式嵌入微博链接。
1{{< weibo url="https://weibo.com/xxxx" author="博主名" content="微博内容摘要" >}}
某科技博主
@weibo
今天分享一个超好用的开发工具…
7. 知乎卡片 (zhihu)
以卡片样式嵌入知乎文章链接。
1{{< zhihu url="https://zhuanlan.zhihu.com/p/xxx" title="文章标题" description="简介" >}}
知乎
8. 豆瓣 (douban)
嵌入豆瓣书籍、电影或音乐。
1{{< douban "3538091" type="book" >}}
9. 网易云音乐 (netease)
嵌入网易云音乐播放器。type=song 为单曲,type=playlist 为歌单。
1{{< netease "186254" type="song" >}}
二、国外平台嵌入
10. YouTube
Hugo 内置短代码,直接使用视频 ID 即可。
1{{< youtube ZJthWmvUzzc >}}
11. GitHub Gist / CodePen (embed)
通用代码嵌入短代码。
1{{< embed src="https://gist.github.com/user/abc123.js" platform="gist" >}}
12. GitLab Snippet
1{{< gitlab 2349278 >}}
三、实用工具类
13. 引用块 (quote)
带作者、来源和链接的精美引用框。
1{{< quote author="爱因斯坦" source="关于科学" url="https://example.com" >}}
2想象力比知识更重要。知识是有限的,而想象力概括着世界上的一切。
3{{< /quote >}}
想象力比知识更重要。知识是有限的,而想象力概括着世界的一切,推动着进步,并且是知识进化的源泉。
14. 视频播放器 (video)
嵌入自托管或远程 MP4 视频。
1{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" >}}
15. 提示框 (admonition)
5 种样式的提示框:info / tip / warning / danger / note。
1{{< admonition type="tip" title="小贴士" >}}
2这是一个实用的技巧提示!
3{{< /admonition >}}
小贴士
善用快捷键可以大幅提升你的写作效率。按
Ctrl + K 快速插入代码块,按 Ctrl + B 加粗文本。注意
发布前请务必检查文章中的所有外部链接是否可访问,避免出现死链影响用户体验。
警告
请勿在文章中泄露敏感信息,如 API 密钥、密码或个人隐私数据!
16. 卡片链接 (card)
通用的外链卡片,支持图标和封面图。
1{{< card url="https://github.com" title="GitHub" description="全球最大代码托管平台" icon="fa-github" >}}
17. 按钮 (button)
多种颜色和大小的按钮组件。
类型:primary / success / warning / danger / dark / light
尺寸:small / normal / large
1{{< button href="https://example.com" text="立即查看" type="primary" size="normal" >}}
2{{< button href="https://example.com" text="下载文件" type="success" size="small" >}}
18. 折叠内容 (details)
可展开/折叠的内容区域,适合放长代码、补充说明等。
1{{< details summary="点击查看更多" >}}
2这里是隐藏的详细内容...
3{{< /details >}}
19. 带说明图片 (figure)
带圆角阴影效果的图片展示组件,自动适配暗黑模式。
1{{< figure src="/images/photo.webp" caption="图片描述文字" alt="替代文本" >}}
20. Mermaid 图表
Stack 出箱即用地支持 Mermaid 图表。
1graph TD;
2 A[开始] --> B{是否登录?};
3 B -->|是| C[显示仪表盘];
4 B -->|否| D[跳转登录页];
5 C --> E[结束];
6 D --> E;
7
8 style A fill:#2a9d8f,color:#fff
9 style E fill:#e76f51,color:#fff
使用速查表
| Shortcode | 用法 | 说明 |
|---|---|---|
bilibili | {{< bilibili "BV号" >}} | B站视频 |
tencent | {{< tencent "vid" >}} | 腾讯视频 |
douyin | {{< douyin "id" >}} | 抖音视频 |
youku | {{< youku "vid" >}} | 优酷视频 |
iqiyi | {{< iqiyi "vid" >}} | 爱奇艺视频 |
zhihu | {{< zhihu url=".." title=".." >}} | 知乎卡片 |
weibo | {{< weibo url=".." author=".." >}} | 微博卡片 |
douban | {{< douban "id" type="book" >}} | 豆瓣嵌入 |
netease | {{< netease "id" type="song" >}} | 网易云音乐 |
youtube | {{< youtube "ID" >}} | YouTube (内置) |
gitlab | {{< gitlab "snippetId" >}} | GitLab 片段 |
embed | {{< embed src=".." platform="gist" >}} | 通用嵌入 |
video | {{< video src="url" >}} | MP4 播放器 |
quote | {{< quote author="..">}}..{{</* /quote >}} | 引用块 |
admonition | {{< admonition type="tip">}}..{{</* /adm >}} | 提示框 |
card | {{< card url=".." title=".." >}} | 链接卡片 |
button | {{< button href=".." text=".." type="primary" >}} | 按钮 |
details | {{< details summary="..">}}..{{</* /details >}} | 折叠区 |
figure | {{< figure src=".." caption=".." >}} | 带说明图片 |
留言评论
期待你的想法评论加载中