测试了一下Hugo的短代码，包括内置和自定义的。捡捡补补，程序员的共享精神真伟大。
1
|
{{< figure src="https://unsplash.it/1920/1080/?random=4" title="Unplash Random" >}}
|
Unplash Random
我自定义了 figcaption 的样式。
{{< gist spf13 7896402 >}}
原生引入的 Gist 在黑暗模式下奇丑无比，我无法忍受，所以也修改了 Gist 的 CSS 样式，其中代码高亮没有改完，只修改了这里引入出现的标签等，剩下的以后再说吧毕竟我估计不会怎么用到这个短代码。
1
2
3
4
5
6
|
{{< highlight html >}}
<div class="shortcode">
<p>shortcode test</p>
</div>
{{< /highlight >}}
|
1
2
3
|
<div class="shortcode">
<p>shortcode test</p>
</div>
|
MemE 主题中本来就自带代码高亮，所以这个短代码没啥用。
1
|
{{< param categories >}}
|
[LEARN]
1
2
3
|
[2021 年度总结]({{< ref 2021-personal-summary.md >}})
[2021 年度总结 | 阅读]({{< relref "2021-personal-summary.md#阅读" >}})
|
2021 年度总结
2021 年度总结 | 阅读
1
|
{{< tweet user="cottonsprout" id="1469024461223776256" >}}
|
1
|
{{< vimeo 146022717 >}}
|
1
|
{{< youtube y5WZ2htfiZU >}}
|
用 detials 和 summary 时列表会失效，手打列表标签还挺麻烦的，用短代码替代。
1
2
3
4
5
6
|
{{< accordion "以 TXT 为圆心" >}}
- THE BOYZ 为半径
- 中间忘记了
- 召唤五代丝
{{< /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" >}}
|
1
|
{{< music auto="https://music.163.com/#/song?id=494645489" >}}
|
用原生的 Aplay.js 会出现中文目录跳转失败的情况，搜索了一圈发现是里面 smoothscroll 的仓库处理 hash 时中文字符转成了 Unicode 码，具体看使用 Aplayer 导致博客目录跳转失效这篇博文。博主也提供了修改后的 Aplay.js，我就直接拿来用了，完美解决中文目录跳转失效的情况。（再次感慨程序员的分享精神太伟大了!)
{{< bilibili BV1c54y1H7rs >}}
嵌入好像默认 360P，选更高清的就会转跳外部链接（强迫症略难受
1
2
3
|
{{< gallery "https://unsplash.it/1920/1080/?random=5" "https://unsplash.it/1920/1080/?random=6" "https://unsplash.it/1920/1080/?random=7" >}}
{{< gallery "https://unsplash.it/1920/1080/?random=8" "https://unsplash.it/1920/1080/?random=9" >}}
|
插播一下自定义短码时学到的语法：
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" >}}
|
手机端不太方便，电脑端看着挺舒服的。
