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

安装

该Shortcodes包仅支持MemE主题。

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

    1
    
    git clone https://git.everness.me/Everness/shortcodes.git themes/shortcodes
    
  • config.toml中的主题一行改为

    1
    
    theme = ["shortcodes", "meme"]
    
  • 开始使用

功能

Note

1
2
3
{{< note primary >}}
这是一条note
{{< /note >}}

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

这是一条note

这是一条primary note

这是一条success note

这是一条info note

这是一条warning note

这是一条danger note

音乐播放

目前提供两种添加方式,一种通过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="" >}}

目前已知在相同页面添加两首歌曲会出现bug,等待修复。

视频内嵌

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

1
{{< ytb zCLOJ9j1k2Y >}}
1
{{< bili BV1KJ411C7qF >}}

友链

1
{{< friend name="Everness" url="https://everness.me" logo="https://everness.me/favicon.ico" motto="To discover. To change." >}}