本博客可用的Shortcode

不断更新中，本篇使用codex辅助生成

图片类 Shortcode

图片轮播（carousel）

功能有：图片无限循环、鼠标滚轮 / 键盘方向键切换、懒加载和自动调节高度

{{< carousel "https://unsplash.it/1920/1080/?random=1,https://unsplash.it/1920/1080/?random=2,https://unsplash.it/1920/1080/?random=3,https://unsplash.it/1920/1080/?random=4" >}}

{{< carousel "4.jpg,7.jpg,9.jpg" >}}

瀑布流图片（waterfall）

用于在文章中插入一组图片。默认规则如下：

1 张图：单图显示
2 张图：横向排列，每张 50% 宽度
3 张图：横向排列，每张 33.33% 宽度
4 张图：2x2 布局
5 张及以上：启用自动瀑布流布局，图片会被放入当前最短的一列

图片说明默认隐藏，鼠标悬停在图片上时会显示。

Shortcode Format

Name	Value	Description
gap	CSS size	可选参数。图片之间的间距，默认 `10px`。
minWidth	CSS size	可选参数。自动瀑布流每列的最小宽度，默认 `190px`。
layout	masonry / auto / grid	可选参数。手动控制布局模式。
auto	true / false	可选参数。手动开启或关闭自动瀑布流。

{{< waterfall gap="10px" minWidth="190px" >}}
https://picsum.photos/seed/mayoi-01/640/900 | 第一张图的说明
https://picsum.photos/seed/mayoi-02/720/480 | 第二张图的说明
https://picsum.photos/seed/mayoi-03/600/600 | 第三张图的说明
{{< /waterfall >}}

强制开启自动瀑布流：

{{< waterfall layout="masonry" gap="10px" minWidth="190px" >}}
图片地址 | 图片说明
图片地址 | 图片说明
{{< /waterfall >}}

强制关闭自动瀑布流，使用普通布局：

{{< waterfall layout="grid" gap="10px" >}}
图片地址 | 图片说明
图片地址 | 图片说明
{{< /waterfall >}}

也可以使用 auto="true" 或 auto="false" 来控制：

{{< waterfall auto="true" >}}
图片地址 | 图片说明
图片地址 | 图片说明
{{< /waterfall >}}

Side Image（图文并排）

用于在正文中插入图文并排的区块，桌面端图片和文字左右排列，移动端会自动变成上下排列。

Shortcode Format

Name	Value	Description
img	图片地址	必填参数。图片 URL 或本地图片路径。
alt	图片替代文字	可选参数。用于图片无法显示时的说明文字。
caption	图片说明	可选参数。显示在图片下方。
position	left / right	可选参数。控制图片在左侧或右侧，默认是 `left`。

Examples

图片在左侧：

{{< sideimg
  img="https://example.com/image.jpg"
  alt="图片说明"
  caption="图片下方的 caption"
  position="left"
>}}

这里写正文内容，支持 Markdown。

- 可以写列表
- 也可以写多段文字

{{< /sideimg >}}

图片在右侧：

{{< sideimg
  img="https://example.com/image.jpg"
  alt="图片说明"
  caption="图片下方的 caption"
  position="right"
>}}

这里写正文内容。`position="right"` 时图片会显示在右侧。

{{< /sideimg >}}

视频类 Shortcode

Bilibili

在博文中插入哔哩哔哩媒体资源。

Shortcode Format

Name	Value	Description
vid	AV号 / BV号 [分P号]	必填参数。(Type: String) 视频资源ID。

{{< bilibili AV号或BV号 >}}
{{< bilibili AV号或BV号 分P号 >}}

Tencent

在博文中插入腾讯视频媒体资源。

Shortcode Format

Name	Value	Description
vid	视频id	必填参数。(Type: String) 视频资源ID。

Examples

插入资源：https://v.qq.com/x/page/b31563j0jqw.html

<!-- just video src -->
{{< tencent  b31563j0jqw >}}

Video

在博文中插入本地(.mp4)视频文件。

Shortcode Format

Name	Value	Description
src	relative paths	必填参数。(Type: String) 视频文件（相对）路径。
autoplay	true / false	可选参数。(Type: String) 自动播放。
poster	relative paths	可选参数。(Type: String) 视频封面（相对）路径。

Examples

插入资源：与本篇博文放置在同一目录下的视频文件./video.mp4

<!-- just video src -->
{{< video "./video.mp4">}}

<!-- Other option -->
{{< video src="./video.mp4" autoplay="true" poster="./video-poster.png" >}}

Youtube

在博文中插入 YouTube 媒体资源。

Shortcode Format

Name	Value	Description
id	video id	必填参数。(Type: String) 视频ID。
autoplay	true / false	可选参数。(Type: String) 进入页面后自动播放。

Examples

插入资源：https://www.youtube.com/watch?v=jflq6vNcZyA

<!-- just video src -->
{{< youtube jflq6vNcZyA >}}

<!-- Other option -->
{{< youtube id="jflq6vNcZyA" autoplay="true" >}}

如何使用Stack主题提供的demo-shortcode

例如实现页内插入 Youtube 视频，假设如下 Markdown 内容为您的一篇博客正文，若您正处于 hugo server 本地调试模式，可直接复制挪用。

> 这是写在你的 Markdown 正文中的内容哟~

## Example 1

- 插入视频：`https://www.youtube.com/watch?v=MpYy6wwqxoo`
- 接受参数视频 ID,可能网址很长,但只需要复制**键值对** `v=` 后面的内容，如：

{{< youtube MpYy6wwqxoo >}}

## Example 2

- 插入视频：`https://www.youtube.com/watch?v=XRGquU0ZJok&list=PLvOO0btloRnsiqM72G4Uid0UWljikENlU&index=6`
- 这是一个分 p 的视频列表，链接中写明了这个`List ID` ,以及这个"视频"在列表中的位置序号 `index` 
但此处我们一次性只能插入一个视频，所以依然是只需要复制**键值对** `v=` 后面的内容，如：

{{< youtube XRGquU0ZJok >}}

链接类 Shortcode

永久链接和相对链接（ref / relref）

Hugo 中的 ref 和 relref

NeoDB

在博文中插入 Neodb 自动化短评卡片,教程来自《Blog | 菜谱：用NeoDB短代码展示书影游短评

{{< neodb "neodb链接" >}} 评论内容 {{< /neodb >}}

文字类 Shortcode

Abbr

{{< abbr "AWSL" "啊我死了" >}}

AWSL

文字排版

{{< align left "文字居左" >}}

{{< align center "文字居中" >}}

{{< align right "文字居右" >}}

文字居左

文字居中

文字居右

Codehtml

渲染.md文件中嵌入的html代码

{{< codehtml >}}
  <br/>
{{< codehtml >}}

Detail

在Hugo中折叠部分内容

{{% detail "You killed my father!" %}}
I am your father.
NOOOOOOO!
{{% /detail %}}

You killed my father!

I am your father. NOOOOOOO!

隐藏文字

这是一段 <span class="blur">高斯模糊呐~ </span>
这是一段 <span class="shady">隐藏文字</span>

这是一段高斯模糊——之为什么luna主题的高斯模糊不能在stack主题用

这是一段隐藏文字，哎呀，和另一个shortcode功能重合了

引用样式

{{< quote >}}
三月，因久旱不雨，苏轼赴郿，祈雨于太白山之上清宫。数日后，虽有微雨，父老以为不足，于是，再陪宋太守亲往祭祷，回程路上，便见道中有云气自山中来，如群马奔突而至车座左右，苏轼一时好奇心起，开笼收云归家，作《攓云篇》。
{{< /quote >}}

三月，因久旱不雨，苏轼赴郿，祈雨于太白山之上清宫。数日后，虽有微雨，父老以为不足，于是，再陪宋太守亲往祭祷，回程路上，便见道中有云气自山中来，如群马奔突而至车座左右，苏轼一时好奇心起，开笼收云归家，作《攓云篇》。

防止剧透的隐藏文字

用法就是在你想使用「隐藏文字」的地方这么写

{{< spoiler >}} 隐藏文字 {{< /spoiler >}}

效果：隐藏文字