返回

本博客可用的Shortcode

应该会继续更新,看到好用的短代码就抄过来了……

写这篇文章的时候眼泪都快出来了,今天好像学到很多东西,又好像什么都没学,只知道有些代码抄了没用(T_T)

Abbr

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

文字排版

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

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

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

文字居左

文字居中

文字居右

Bilibili

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

Shortcode Format

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

图片轮播

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

{{< 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" >}}

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 >}}

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

永久链接 和 相对链接 ref and relref

Hugo 中的 ref 和 relref

防止剧透的隐藏文字

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

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

效果: 隐藏文字

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 >}}
人世间原来不过是一位疯癫的画家往空间泼溅的一大摊乱七八糟的颜色,我们的眼泪却不断地把它们洗掉。
Built with Hugo
Theme Stack designed by Jimmy
© Licensed Under CC BY-NC-SA 4.0