📢 新文章推送 · 每周更新优质内容 · 订阅更新 →
向下滚动
示例演示

短代码 (Shortcodes)

AI 智能总结

本文展示了主题支持的所有自定义短代码(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" >}}
GitHub
全球最大的代码托管平台,超过 1 亿开发者使用。

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 >}}
📋 点击查看完整配置示例
1# Hugo 配置示例
2baseURL: "https://your-domain.com"
3title: "My Blog"
4theme: "hugo-theme-lumin"
5
6params:
7  defaultTheme: "auto"
8  sidebarPosition: "left"

这段配置被折叠起来了,点击标题即可展开查看。

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=".." >}}带说明图片
版权声明

本文作者 Lumin

本文链接 https://www.zhengquan.xyz/demo/shortcodes/

许可协议 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

请作者喝杯咖啡 ☕

  • 微信打赏
    微信支付
  • 支付宝打赏
    支付宝
点击按钮查看打赏二维码
🎁 推荐工具
试试这些实用在线工具,提升工作效率
前往工具集 →

留言评论

期待你的想法

评论加载中