Hugo Shortcodes

前些日子看上了hexo-butterfly主题的Note标签，试了试Hugo上的hugo-notice觉得和主题不是很搭，于是决定用Hugo的Shortcodes自己实现一个。

内置Shortcodes

Hugo已经内置了部分Shortcodes功能，如gist显示：

1

{{< gist spf13 7896402 >}}

自定义Shortcodes

Hugo中的Shortcodes模板文件需要放入主题路径的layout/shortcodes文件夹中，并以Shortcodes名.html命名。

Hugo中的Shortcodes主要有两种形式，一种为One Tag式，如：

1

{{< figure src="/media/spf13.jpg" title="Steve Francia" >}}

对于该种Shortcodes，访问其参数有两种方式，一种是通过{{.Get "src"}}按照属性名获取，另一种是使用{{index .Param 0}}按照参数位置进行访问。

另一种Shortcodes为带内容的Shortcodes，如：

1

{{< highlight go >}} A bunch of code here {{< /highlight >}}

在这种情况下，tag中参数的访问与之前相同，其内容通过.Inner访问，如果需要对内容进行Markdown解析，可以使用markdownify函数。

My Shortcodes

安装

• 将短代码仓库添加至theme文件夹

  1	git clone https://github.com/3verness/shortcodes.git themes/shortcodes

• 将config.toml中的主题一行改为

  1	theme = ["shortcodes", "meme"]

• 在assets/scss/custom/_custom.scss文件中添加：

  1	@import "shortcodes/shortcodes"

• 开始使用

功能

Note

1
2
3

{{< note primary >}}
这是一条note
{{< /note >}}

目前支持的类型有：default, primary, success, info, warning, danger。

音乐播放

目前提供两种添加方式，一种通过MetingJS实现，可以实现网易云与QQ音乐的外链播放，如：

1

{{< meting "https://music.163.com/#/song?id=32046766" >}}

另一种则可以手动播放本地歌曲，如：

1

{{< <music url="http://music.163.com/song/media/outer/url?id=536623501.mp3" name="Ref:rain" artist="Aimer" cover="http://music.163.com/song/media/outer/url?id=536623501.mp3" lrc="" >}}

视频内嵌

优化了Youtube的播放并增加了Bilibili的外链播放器。

1

{{< ytb zCLOJ9j1k2Y >}}

1

{{< bili BV1KJ411C7qF >}}

友链

1

{{< friend name="3verness" url="https://oi-io.me" logo="https://oi-io.me/favicon.ico" motto="To discover. To change." >}}

3verness
To discover. To change.