Hugo shortcoeds示例

神器shortcodes的横空出世，让hugo一举超越hexo，神奇程度不亚于当年total commander的插件系统。下面，介绍自己在用的近二十个shortcodes。

视频简码（video.html）

如果想让页面加载本地视频文件，你的视频文件可以放在hugo站点下的 static/img/ 媒体目录，也可以放置在你的页面目录 , 然后，按照以下2种形式援引路径来调用。

媒体目录

{{% video src="/img/video/videojs.mp4"  controls="yes" %}}

效果如下：

页面目录

比如，视频在 content/post/hello/ 目录下：

{{< video src="my_video.mp4" controls="yes" >}}

在线视频

除了通过简码可以自定义加载本地视频，hugo还内置了youtube、vimeo、Twitter、Instagram等加载在线视频的简码，当然在国内被墙了，访问不了。

Youtube:

{{< youtube w7Ft2ymGmfc >}}

效果如下（需要翻墙查看）：

Vimeo:

{{< vimeo 146022717 >}}

twitter

{{< tweet 877500564405444608 >}}

instagram

{{< instagram BWNjjyYFxVx hidecaption >}}

bilibili

{{< bilibili aid="63014656" >}}

wikipedia

{{< wp tag="膜蛤文化" lang="zh" title="《神秘的膜蛤文化》" >}}
或者简化版
{{< wp 膜蛤文化 "《神秘的膜蛤文化》" zh >}}

豆瓣

{{< douban ID >}}

此处的ID是电影的IMDB号（失效，官方已下架api）或者书籍的ISBN序列号

效果如下：

注意：豆瓣自18年开始即启用referrer筛除防盗链，所以为了避免出现无法显示海报或者书籍封面的情形，建议在header.html增加下列meta标签，但这样做又会影响aplayer的显示，两权其害取其轻者，在想出完美方案之前只能牺牲图片显示了。

<meta name="referrer" content="never">

嵌入文档（gdocs.html）

为了将google 文档嵌入页面，你首先要通过 文件 >发布 > 嵌入得到一段iframe代码，将其中的src=““的链接复制粘贴出来即可。

{{< gdocs src="https://docs.google.com/document/d/e/2PACX-1vTAQPJ1wIH4OWoI3OKV2LIl8xUUwAg8ngQGcHd6VF3x8EYfRX5jLg6x2SuHhaaqVOmV_tvFvtYEqJcZ/pub?embedded=true" >}}

效果如下（需要翻墙查看）：

imgur

为了避免特定的敏感图片被国内ISP审察，我们可以将imgur作为上传图床，随后引用置入帖子中，以https://imgur.com/a/ZT8fImy为例

{{< imgur id="ZT8fImy" >}}

简易版文本居中

{{< center >}}
引用文本
#除去首位两行，每行行末加<br>
{{< center >}}

pdf内嵌展示

{{< pdf src="**.pdf" >}}

相对地址效果：

绝对地址效果：

声享PPT（shengxiang.html）

引入 声享 PPT 演示文稿，

{{% shengxiang "a8a49a00" "dark" %}}

Image caption（imgcap.html）

{{< imgcap title="戏鸟图" src="https://ian2.oss-cn-hangzhou.aliyuncs.com/clt6/20190212115749.png" >}}

戏鸟图

HTML4 Audio Widget（audio.html）

参数

• src - (required) Address of the audio file
• type - (required) Audio encoding(mp3, ogg, etc)
• preload - Should the audio be preloaded when the page loads Valid values are: “none”, “metadata”, and “auto” Default is set to “metadata”
• title - Title of audio track
• attr - Attribution
• attr_link - Link to attribution
• year - Year the audio was produced
• artist - Artist of the audio
• album_title - Title of the album
• album_art - Link to the album art
• label - Record label
• class - Class attribute of the audio element By default it contains “audio_controls”
• id - Id attribute of the audio element
• style - Style attribute of the audio element
• width - Width of HTML5 audio control widget
• height - Height of HTML5 audio control widget

{{< audio src="/audio/Beep.mp3" artist="windows" tile="Beep" >}}

vega-lite

{{< vega id="viz" spec="/post/Hugo shortcodes.files/vegalite.json" >}}

来试试Vega-Lite镶嵌的图形吧

站内外链接

[网易新闻](https://news.163.com)
[Hugo Math Sample]({{< ref "post/Hugo Math Sample.md" >}})
[A publication]({{< ref "publication/hi.md" >}})
[A project]({{< ref "project/hi.md" >}})
[mathjax组表示]({{< relref "20190206mathjax samples for hugo.md#组(Group)" >}})

mathjax组表示

站内静态文件链接（staticref.html）

为站内文件创建一个链接,比如PDF文档, 首先需要新建一个文件目录如： static/files/ ，接下来以如下形式展现:

{{% staticref "files/cv.pdf" "newtab" %}}Download my CV{{% /staticref %}}

下载我的作品

增加参数 "newtab"可以以新标签页的形式打开。

个性化引用（customed blackquote）

{{% quote bar="true" size="17.5px"  ta="center" from="周金平" %}}
引用文本
{{% /quote %}}

#可带参数1：s或者size，控制效果和HTTML里的font-size效果一样
#可带参数2：ta或者align，控制效果与HTML里的text-align效果一样
#可带参数3：by或者frome，控制效果是靠右堆砌的作者署名
#可带参数4：bar为ture则显示顶端装饰，默认不写bar参数

实际效果

我们是一棵树上的枝子。
当我被砍伐，
你有断臂之痛。
该怎样向你坦承自己的荒芜、阴影和虚妄的意念?
我反复在同一场雨水里
缴获清凉。
在同一条河流里
沉溺旧我。
我是新的了。才敢坦然，
念一个人的名字，念出温度和光亮。
我有落雪的心境，呆在你画的苹果之中
获取干干净净的饱足。

—周金平

附件(Attachments.html）

如果你文章需要添加多个附件链接，那么Attachments简码就派上用场了。唯一要注意的是，Attachments简码要生效，必须将附件置于指定文件夹内，目前仅支持两种方式：

1、如果你的页面源文件是markdown文件，附件必须放在遵循一定规则命名（文件名+.files）的文件夹内，目录结构如下：

> * content
>   * _index.md
>   * page.files
>      * attachment.pdf
>   * page.md

2、如果你的页面是一个文件夹，附件必须是嵌套的子目录下，且目录名必须为**‘files’** ，目录结构如下：。

> * content
>   * _index.md
>   * page
>      * index.md
>      * files
>          * attachment.pdf

注意：如果你支持多语言，那就需要为每一个语言配置对于的文件夹。

参数

例如:

• 为了匹配所有的’jpg’后缀的文件, 请用 .*jpg ，注意不是*.jpg
• 为了匹配所有的’jpg’或’png’后缀的文件,用 .*(jpg|png)

实例

以pdf或mp4结尾的附件

    {{%attachments title="Related files" pattern=".*(pdf|mp4)"/%}}

###颜色样式

{{%attachments style="orange" /%}}
{{%attachments style="grey" /%}}
{{%attachments style="blue" /%}}
{{%attachments style="green" /%}}

其中blue样式的效果如下：

内容隐藏（expand.html）

这一简码可以实现文本内容的展开/折叠，按提示点击后才会出现展开/折叠 (如果没有文本，则默认提示是 “快来点我吧…")

问答例

{{%expand "三画大，两画小，打一字，想知道答案吗？" %}}是【秦】字！{{% /expand%}}

实例：

折叠型

{{%expand%}}蒸羊羔,蒸熊掌,蒸鹿尾儿,烧花鸭,烧雏鸡儿,烧子鹅,卤煮咸鸭,酱鸡,腊肉,松花,小肚儿,晾肉,香肠,什锦苏盘,熏鸡,白肚儿,清蒸八宝猪,江米酿鸭子,罐儿野鸡,罐儿鹌鹑,卤什锦,卤子鹅,卤虾,烩虾,炝虾仁儿,山鸡,兔脯,菜蟒,银鱼,清蒸哈什蚂,烩鸭腰儿,烩鸭条儿,清拌鸭丝儿,黄心管儿,焖白鳝,焖黄鳝,豆鼓鲇鱼,锅烧鲇鱼,烀皮甲鱼,锅烧鲤鱼,抓炒鲤鱼,软炸里脊,软炸鸡,什锦套肠,麻酥油卷儿,熘鲜蘑,熘鱼脯儿,熘鱼片儿,熘鱼肚儿,醋熘肉片儿,熘白蘑{{% /expand%}}

实例：

图片（figure.html）

将thumb.jpg用于缩略图,而将image.jpg用于灯箱图集展示。

{{< figure src="thumb.jpg" link="image.jpg" >}}

将image.jpg 同时用于缩略图和灯箱。

{{< figure src="image.jpg" >}} or {{< figure link="image.jpg" >}}

将image-small.jpg 同时用于缩略图和灯箱。

{{< figure link="image.jpg" thumb="-small" >}}

图集（gallery.html）

caption-position

决定图片描述文字的显示位置，可选参数有:

• bottom (默认)
• center
• none hides captions on the page (they will only show in PhotoSwipe)

caption-effect

决定鼠标滑过图片时描述文字如何出现，可选参数有:

• slide (默认)
• fade
• none (captions always visible)

hover-effect

决定鼠标滑过图片时的特效动作，可选参数有:

• zoom (默认)
• grow
• shrink
• slideup
• slidedown
• none

hover-transition

决定鼠标滑过图片时是否需要过渡. 可选参数有:

• 默认 - 平滑过渡
• none - 生硬过渡

拟terminal窗口

{{< terminal "root@xdd-iMAC" "~/Sites/jiridj.be (zsh)" >}}
代码
{{< /terminal >}}

效果如下：

注意提示(notice.html)

注意提示是一个非常有用的shortcodes模板，可以为文章增加贴士、笔记、引言以及基于文章的告诫等多用途，目前支持warning、 info、note、tip.四种风格显示。

#$$可以在warning、info、note、tip中四选一
{{% notice $$ %}}
your text
{{% /notice %}}

info

note

tip

warning

gallery slider（目前仍未适配手机端）

配置参数

左右提示图标可以在FontAwesome图标库 挑选。

示例

#全部以默认参数运行
{{< gallery-slider dir="/img/portfolio/" >}}
#推荐配置
{{< gallery-slider dir="/img/hugo/" width="600px" height="400px" arrow-left="fa-angle-double-left" arrow-right="fa-angle-double-right" auto-slide="2500" >}}

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

效果如下：