Hugo Shortcodes 学习

参考

https://github.com/parsiya/Hugo-Shortcodes

https://github.com/laozhu/hugo-nuo/tree/master/layouts/shortcodes

https://github.com/gohugoio/hugo/tree/master/docs/layouts/shortcodes

https://github.com/spf13/spf13.com/tree/master/layouts/shortcodes

https://shenheng.xyz/posts/2018-11-23-hugo-shortcode-test/

https://github.com/parsiya/Hugo-Shortcodes

https://www.zhangqibot.com/post/others-hugo-nuo-post-preview/

https://www.gohugo.org/doc/extras/shortcodes/

Shortcodes 介绍

内置 shortcodes

youtube

{{< youtube id >}}

https://www.youtube.com/watch?v=84JmaRRffTk

{{< youtube 84JmaRRffTk >}}

vimeo

{{< vimeo id >}}

https://vimeo.com/185472558

{{< vimeo 185472558 >}}

gist

{{< gist username id >}}

https://gist.github.com/Xiechengqi/83dc77050fe7331624d93b11f684d1e2

{{< gist Xiechengqi 83dc77050fe7331624d93b11f684d1e2 >}}

https://gist.github.com/Xiechengqi/c681f696a3a71d096171b2fdea96fe2c

{{< gist Xiechengqi c681f696a3a71d096171b2fdea96fe2c >}}

自定义 shortcodes

video - [源码]

加载本地或网络直链视频

content/video/hugo-shortcodes-test.mp4

{{< video /video/demo.mp4 >}}

{{< video src="/video/mangzhong.webm" type="webm" >}}

https://www.iosapp.top/video/QK.mp4

{{< video https://www.iosapp.top/video/QK.mp4 type="mp4" >}}

terminal - [源码]

模拟 MAC 终端显示命令

{{< terminal "jiri@jiri-mbp-pro" "~/Sites/jiridj.be (zsh)" >}}
$ ls -l ~
total 40
drwx------+  8 jiri  staff    272 Mar 21 14:30 Desktop
{{< /terminal >}}

–

jiri@jiri-mbp-pro~~/Sites/jiridj.be (zsh)

$ ls -l ~
total 40
drwx------+ 8 jiri staff 272 Mar 21 14:30 Desktop

codecaption - [源码]

{{< codecaption lang="html" title="Code caption shortcode" >}}
<figure class="code">
  <figcaption>
    <span>{{ .Get "title" }}</span>
  </figcaption>
  <div class="codewrapper">
    {{ highlight .Inner (.Get "lang") "linenos=true" }}
  </div>
</figure>
{{< /codecaption >}}

Code caption shortcode

1
2
3
4
5
6
7
8


<figure class="code">
  <figcaption>
    <span>{{ .Get "title" }}</span>
  </figcaption>
  <div class="codewrapper">
    {{ highlight .Inner (.Get "lang") "linenos=true" }}
  </div>
</figure>

gallery-slider - [源码]

相册循环播放

配置参数

参数	默认值	描述
`dir`	`none`	Path to image-folder (mandatory)
`width`	`500px`	Width of the slider area
`height`	`300px`	Height of the slider area
`arrow-left`	`fa-chevron-left`	Defines the left icon (See info below)
`arrow-right`	`fa-chevron-right`	Defines the right icon
`no-fa`	`false`	Toggles dependency inclusion for FontAwesome
`no-jquery`	`false`	Toggles dependency inclusion for JQuery
`auto-slide`	`0`	Set automatic sliding duration in ms

{{< gallery-slider dir="/gallery-slider/" auto-slide="2000" >}}

声享(shengxiang) - [源码]

https://ppt.baomitu.com/

显示声享 ppt

https://ppt.baomitu.com/d/633ad31d

{{< shengxiang "633ad31d" >}}

维基百科(wp) - [源码]

字符串添加维基百科链接

{{< wp tag="VIC_cipher" >}}
{{< wp tag="VIC_cipher" lang="fr" >}}
{{< wp tag="VIC_cipher" lang="fr" title="" >}}
{{< wp tag="VIC_cipher" title="VIC Cipher" >}}
{{< wp tag="VIC_cipher" lang="en" title="VIC Cipher" >}}
{{< wp VIC_cipher >}}
{{< wp VIC_cipher fr >}}
{{< wp VIC_cipher "" fr >}}
{{< wp VIC_cipher "VIC Cipher" >}}
{{< wp VIC_cipher "VIC Cipher" fr >}}

参考