Skip to main content INNERSO

短代码测试

测试了一下 Hugo 的短代码，包括内置和自定义的。捡捡补补，程序员的共享精神真伟大。

HUGO 内置短代码

Figure

markdown code snippet start

1

{{< figure src="https://unsplash.it/1920/1080/?random=4" title="Unplash Random" >}}

markdown code snippet end

Unplash Random

我自定义了 figcaption 的样式。

Gist

markdonw code snippet start

1

{{< gist spf13 7896402 >}}

markdonw code snippet end

原生引入的 Gist 在黑暗模式下奇丑无比，我无法忍受，所以也修改了 Gist 的 CSS 样式，其中代码高亮没有改完，只修改了这里引入出现的标签等，剩下的以后再说吧毕竟我估计不会怎么用到这个短代码。

代码高亮

markdown code snippet start

1
2
3
4
5
6

{{< highlight html >}}

<div class="shortcode">
    <p>shortcode test</p>
</div>
{{< /highlight >}}

markdown code snippet end

1
2
3

<div class="shortcode">
    <p>shortcode test</p>
</div>

MemE 主题中本来就自带代码高亮，所以这个短代码没啥用。

Param

markdown code snippet start

1

{{< param categories >}}

markdown code snippet end

[LEARN]

Ref 和 Relref

markdown code snippet start

1
2
3

[2021 年度总结]({{< ref 2021-personal-summary.md >}})

[2021 年度总结 | 阅读]({{< relref "2021-personal-summary.md#阅读" >}})

markdown code snippet end

2021 年度总结

2021 年度总结 | 阅读

Tweet

markdown code snippet start

1

{{< tweet user="cottonsprout" id="1469024461223776256" >}}

markdown code snippet end

Vimeo

markdown code snippet start

1

{{< vimeo 146022717 >}}

markdown code snippet end

Youtube

markdown code snippet start

1

{{< youtube y5WZ2htfiZU >}}

markdown code snippet end

自定义短代码

Rating

markdown code snippet start

1

{{< rating 10 8 >}}

markdown code snippet end

折叠

用 detials 和 summary 时列表会失效，手打列表标签还挺麻烦的，用短代码替代。

markdown code snippet start

1
2
3
4
5
6

{{< accordion "以 TXT 为圆心" >}}

- THE BOYZ 为半径
- 中间忘记了
- 召唤五代丝
  {{< /accordion >}}

markdown code snippet end

以 TXT 为圆心
  • THE BOYZ 为半径
  • 中间忘记了
  • 召唤五代丝

图片轮播

markdown code snippet start

1

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

markdown code snippet end

Spotify

markdown code snippet start

1

{{< spotify track 3UZ46DvXvB2R7sBUZornlv >}}

markdown code snippet end

插播一下自定义短码时学到的语法：

  • 循环短代码中变量 .Params 时和其他语言一样用的是 range

  • 统计变量的数量用 len，len $variable

PDF

markdown code snippet start

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

markdown code snippet end

手机端不太方便，电脑端看着挺舒服的。

参考来源