短代码测试
测试了一下 Hugo 的短代码，包括内置和自定义的。捡捡补补，程序员的共享精神真伟大。
HUGO 内置短代码
Figure
1{{< figure src="https://unsplash.it/1920/1080/?random=4" title="Unplash Random" >}}
Unplash Random
我自定义了 figcaption 的样式。
Gist
{{< gist spf13 7896402 >}}
原生引入的 Gist 在黑暗模式下奇丑无比，我无法忍受，所以也修改了 Gist 的 CSS 样式，其中代码高亮没有改完，只修改了这里引入出现的标签等，剩下的以后再说吧毕竟我估计不会怎么用到这个短代码。
代码高亮
1{{< highlight html >}}
2
3<div class="shortcode">
4 <p>shortcode test</p>
5</div>
6{{< /highlight >}}
1<div class="shortcode">
2 <p>shortcode test</p>
3</div>MemE 主题中本来就自带代码高亮，所以这个短代码没啥用。
Param
1{{< param categories >}}
Ref 和 Relref
1[2021 年度总结]({{< ref 2021-personal-summary.md >}})
2
3[2021 年度总结 | 阅读]({{< relref "2021-personal-summary.md#阅读" >}})
Tweet
1{{< tweet user="cottonsprout" id="1469024461223776256" >}}
chainsaw kids pic.twitter.com/NbnA09PXYA
— kiwi! (@cottonsprout) December 9, 2021
Vimeo
1{{< vimeo 146022717 >}}
Youtube
1{{< youtube y5WZ2htfiZU >}}
自定义短代码
Rating
1{{< rating 10 8 >}}
折叠
用 detials 和 summary 时列表会失效，手打列表标签还挺麻烦的，用短代码替代。
1{{< accordion "以 TXT 为圆心" >}}
2
3- THE BOYZ 为半径
4- 中间忘记了
5- 召唤五代丝
6 {{< /accordion >}}
以 TXT 为圆心
图片轮播
1{{< carousel "https://unsplash.it/1920/1080/?random=1,https://unsplash.it/1920/1080/?random=2,https://unsplash.it/1920/1080/?random=3" >}}
Spotify
1{{< spotify track 3UZ46DvXvB2R7sBUZornlv >}}
循环短代码中变量 统计变量的数量用 插播一下自定义短码时学到的语法：
.Params 时和其他语言一样用的是 rangelen，len $variable
1{{< pdf src="https://www.blatchingtonmill.org.uk/assets/Uploads/All-Of-Me-Sheet-Music-John-Legend-All-Of-Me-Piano-Sheet-Music-Medium-Vocals-Piano-Guitar.pdf" >}}
手机端不太方便，电脑端看着挺舒服的。