04-短代码

jijian 主题内置多个实用的短代码，用于增强文章内容的表现力。本文档详细介绍各短代码的使用方法。

bilibili

用于在文章中嵌入哔哩哔哩视频。

基本用法

1

{{< bilibili bvid="BV1xx411c7mD" >}}

完整参数

1
2
3
4
5
6
7


{{< bilibili 
  bvid="BV1xx411c7mD" 
  aid="av170001" 
  cid="27930584" 
  page="1" 
  autoplay="false" 
>}}

参数说明

参数	类型	必需	说明
`bvid`	string	二选一	视频的 BV 号（推荐）
`aid`	string	二选一	视频的 AV 号
`cid`	string	否	视频 CID（多 P 视频时需要）
`page`	integer	否	多 P 视频的页码，默认为 1
`autoplay`	boolean	否	是否自动播放，默认 `false`

使用示例

基本用法（推荐）：

1

{{< bilibili bvid="BV1xx411c7mD" >}}

多 P 视频：

1
2


<!-- 播放第 3 P -->
{{< bilibili bvid="BV1xx411c7mD" page="3" >}}

自动播放：

1

{{< bilibili bvid="BV1xx411c7mD" autoplay="true" >}}

注意事项

推荐使用 bvid 参数，因为 aid 可能会被逐步弃用
视频播放器自动保持 16:9 画幅比例
支持响应式宽度，适配不同屏幕

figure

增强版图片展示短代码，支持标题、链接、对齐等功能。

基本用法

1

{{< figure src="/images/photo.jpg" >}}

完整参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{{< figure 
  src="/images/photo.jpg"
  link="https://example.com"
  target="_blank"
  rel="noopener"
  alt="图片描述"
  caption="这是图片说明"
  title="鼠标悬停提示"
  width="800"
  height="600"
  class="my-image"
  align="center"
  attr="图片来源：网络"
  attrlink="https://example.com"
>}}

参数说明

参数	类型	必需	说明
`src`	string	是	图片路径
`link`	string	否	点击图片跳转的链接
`target`	string	否	链接打开方式：`_blank`（新标签）、`_self`（当前标签）
`rel`	string	否	链接 rel 属性，如 `noopener`、`noreferrer`
`alt`	string	否	图片 alt 文本
`caption`	string	否	图片说明文字
`title`	string	否	鼠标悬停时的提示文字
`width`	string	否	图片宽度
`height`	string	否	图片高度
`class`	string	否	自定义 CSS 类名
`align`	string	否	对齐方式：`left`、`center`、`right`
`attr`	string	否	图片属性说明（如版权信息）
`attrlink`	string	否	属性说明的链接

使用示例

带说明的图片：

1
2
3
4
5


{{< figure 
  src="/images/screenshot.png"
  alt="软件截图"
  caption="图1：软件主界面"
>}}

可点击跳转的图片：

1
2
3
4
5
6


{{< figure 
  src="/images/thumbnail.jpg"
  link="/images/full-size.jpg"
  alt="点击查看大图"
  caption="点击查看原图"
>}}

外部链接图片：

1
2
3
4
5
6
7


{{< figure 
  src="/images/photo.jpg"
  link="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
  alt="外部链接"
>}}

带版权信息：

1
2
3
4
5
6


{{< figure 
  src="/images/photo.jpg"
  caption="美丽的风景"
  attr="图片来源：Unsplash"
  attrlink="https://unsplash.com"
>}}

对齐方式：

1
2
3
4
5
6
7
8


<!-- 居中（默认） -->
{{< figure src="/images/photo.jpg" align="center" >}}

<!-- 左对齐 -->
{{< figure src="/images/photo.jpg" align="left" >}}

<!-- 右对齐 -->
{{< figure src="/images/photo.jpg" align="right" >}}

与灯箱功能的交互

如果设置了 link 参数，点击图片会跳转链接，不触发灯箱
如果未设置 link 参数，点击图片会触发 medium-zoom 灯箱效果

collapse

可折叠的内容块，适合隐藏长篇内容或剧透内容。

基本用法

1
2
3


{{< collapse summary="点击展开" >}}
这里是被折叠的内容。
{{< /collapse >}}

完整参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{{< collapse 
  summary="点击查看详细内容"
  openByDefault="true"
>}}
这里是被折叠的内容，支持 Markdown 格式。

- 列表项 1
- 列表项 2

**粗体文本** 和 *斜体文本* 都可以正常显示。
{{< /collapse >}}

参数说明

参数	类型	必需	说明
`summary`	string	是	折叠块标题（显示在折叠状态）
`openByDefault`	boolean	否	默认是否展开，默认 `false`

效果展示

基本折叠：

剧透警告

这里是剧透内容，默认隐藏。

默认展开：

常见问题

Q: 如何使用这个功能？ A: 很简单，按照文档操作即可。

代码示例

基本折叠：

1
2
3


{{< collapse summary="剧透警告" >}}
这里是剧透内容，默认隐藏。
{{< /collapse >}}

默认展开：

1
2
3
4


{{< collapse summary="常见问题" openByDefault="true" >}}
Q: 如何使用这个功能？
A: 很简单，按照文档操作即可。
{{< /collapse >}}

嵌套 Markdown：

1
2
3
4


{{< collapse summary="代码示例" >}}
```python
def hello():
    print("Hello, World!")


**长篇内容**：

```markdown
{{< collapse summary="点击查看完整教程" >}}
## 步骤一：准备工作

确保你已经安装了必要的工具...

## 步骤二：配置文件

编辑配置文件...

## 步骤三：运行测试

执行以下命令...
{{< /collapse >}}

vertical

中文古文竖排展示短代码，专门用于展示古诗词或特殊引用文段。

基本用法

1
2
3
4
5
6


{{< vertical >}}
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
{{< /vertical >}}

完整参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{{< vertical md="true" >}}
**《静夜思》**

李白

床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
{{< /vertical >}}

参数说明

参数	类型	必需	说明
`md`	boolean	否	是否解析 Markdown 格式，默认 `false`

效果展示

纯文本竖排：

落霞与孤鹜齐飞，秋水共长天一色。

支持 Markdown：

《滕王阁序》

王勃

落霞与孤鹜齐飞，秋水共长天一色。

代码示例

纯文本竖排：

1
2
3
4


{{< vertical >}}
落霞与孤鹜齐飞，
秋水共长天一色。
{{< /vertical >}}

支持 Markdown：

1
2
3
4
5
6
7
8


{{< vertical md="true" >}}
**《滕王阁序》**

*王勃*

落霞与孤鹜齐飞，
秋水共长天一色。
{{< /vertical >}}

样式特点

从右到左竖排阅读
自动换列
保持古文排版美感
支持标点符号正确显示

inTextImg

行内图片短代码，用于在文本中插入小图标或装饰性图片。

基本用法

1

这是一段文字，中间插入图片：{{< inTextImg url="/img/icon.png" >}} 继续文字。

完整参数

1

这是一个图标示例：{{< inTextImg url="/img/icon.png" height="20" alt="图标" >}} 后续文字。

参数说明

参数	类型	必需	说明
`url`	string	是	图片路径
`height`	string	否	图片高度（像素），默认自动
`alt`	string	否	图片 alt 文本

使用示例

基本用法：

1

欢迎来到我的博客 {{< inTextImg url="/img/star.png" >}}

调整大小：

1

点击这里 {{< inTextImg url="/img/external-link.png" height="16" >}} 访问外部链接。

表情符号替代：

1

点赞 {{< inTextImg url="/img/like.png" height="18" alt="点赞" >}} 和收藏 {{< inTextImg url="/img/collect.png" height="18" alt="收藏" >}}

rawhtml

原始 HTML 短代码，用于在 Markdown 中插入原始 HTML 代码。

基本用法

1
2
3
4
5


{{< rawhtml >}}
<div style="color: red; font-size: 24px;">
    这是自定义 HTML 内容
</div>
{{< /rawhtml >}}

使用示例

自定义样式：

1
2
3
4
5
6


{{< rawhtml >}}
<div style="background: linear-gradient(to right, #ff6b6b, #4ecdc4); padding: 20px; border-radius: 8px; color: white;">
    <h3>渐变背景</h3>
    <p>这是一段带渐变背景的文字</p>
</div>
{{< /rawhtml >}}

嵌入第三方组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{{< rawhtml >}}
<iframe 
    src="https://www.google.com/maps/embed?pb=..." 
    width="100%" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
</iframe>
{{< /rawhtml >}}

自定义表格：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{< rawhtml >}}
<table style="width: 100%; border-collapse: collapse;">
    <tr style="background: #f5f5f5;">
        <th style="padding: 10px; border: 1px solid #ddd;">项目</th>
        <th style="padding: 10px; border: 1px solid #ddd;">状态</th>
    </tr>
    <tr>
        <td style="padding: 10px; border: 1px solid #ddd;">前端开发</td>
        <td style="padding: 10px; border: 1px solid #ddd;">✅ 完成</td>
    </tr>
</table>
{{< /rawhtml >}}

注意事项

使用 rawhtml 需要在 hugo.yaml 中启用不安全的 HTML 渲染：

1
2
3
4


markup:
  goldmark:
    renderer:
      unsafe: true

请谨慎使用，确保 HTML 代码的安全性
避免插入恶意脚本或不受信任的第三方代码

短代码组合使用

多个短代码可以组合使用，实现复杂的内容展示：

视频教程 + 代码折叠

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


## 视频教程

{{< bilibili bvid="BV1xx411c7mD" >}}

## 代码示例

{{< collapse summary="点击查看完整代码" >}}
```python
# 这里是完整代码
def main():
    print("Hello, World!")

if __name__ == "__main__":
    main()


### 图片展示 + 详细说明

```markdown
{{< figure 
  src="/images/workflow.png"
  alt="工作流程图"
  caption="图1：整体工作流程"
>}}

{{< collapse summary="点击查看详细说明" >}}
### 步骤说明

1. **需求分析**：明确项目目标
2. **设计阶段**：制定技术方案
3. **开发实现**：编写代码
4. **测试部署**：验证功能
{{< /collapse >}}