写这篇文章的时候眼泪都快出来了,今天好像学到很多东西,又好像什么都没学,只知道有些代码抄了没用(T_T)
Abbr
{{< abbr "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
防止剧透的隐藏文字
用法就是在你想使用「隐藏文字」的地方这么写
{{< 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 >}}