写在之前， hugo shortcodes中文意译即为雨果博客短代码，是一种先配置文件，通过在文章中插入短代码模式，来实现纯文字，歌曲，文章，个人社交文字转发，以及视频，播客等在个人博客上显示的一种方式。
以下几个短代码的应用
上次我在“Hugo解决网易云音乐不显示问题”这篇博客中说了，开启HTML外链引用必须先添加：
1.[markup.goldmark.renderer]
2.unsafe= true
然后自己再在网易云音乐引入 iframe实现在hugo博客上显示音乐。但是现在，有一种更好的方式，hugo提倡引入外链可以用短代码。
方式为：新建/layouts/shortcodes/music.html，在其中引入：
{{- $scratch := .Page.Scratch.Get "scratch" -}}
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<style type="text/css">.dark-theme .aplayer{background:#212121}.dark-theme .aplayer.aplayer-withlist .aplayer-info{border-bottom-color:#5c5c5c}.dark-theme .aplayer.aplayer-fixed .aplayer-list{border-color:#5c5c5c}.dark-theme .aplayer .aplayer-body{background-color:#212121}.dark-theme .aplayer .aplayer-info{border-top-color:#212121}.dark-theme .aplayer .aplayer-info .aplayer-music .aplayer-title{color:#fff}.dark-theme .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#fff}.dark-theme .aplayer .aplayer-info .aplayer-controller .aplayer-time{color:#eee}.dark-theme .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#eee}.dark-theme .aplayer .aplayer-list{background-color:#212121}.dark-theme .aplayer .aplayer-list::-webkit-scrollbar-thumb{background-color:#999}.dark-theme .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#bbb}.dark-theme .aplayer .aplayer-list li{color:#fff;border-top-color:#666}.dark-theme .aplayer .aplayer-list li:hover{background:#4e4e4e}.dark-theme .aplayer .aplayer-list li.aplayer-list-light{background:#6c6c6c}.dark-theme .aplayer .aplayer-list li .aplayer-list-index{color:#ddd}.dark-theme .aplayer .aplayer-list li .aplayer-list-author{color:#ddd}.dark-theme .aplayer .aplayer-lrc{text-shadow:-1px -1px 0 #666}.dark-theme .aplayer .aplayer-lrc:before{background:-moz-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:-webkit-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:linear-gradient(to bottom, #212121 0%, rgba(33,33,33,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 )}.dark-theme .aplayer .aplayer-lrc:after{background:-moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:-webkit-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 )}.dark-theme .aplayer .aplayer-lrc p{color:#fff}.dark-theme .aplayer .aplayer-miniswitcher{background:#484848}.dark-theme .aplayer .aplayer-miniswitcher .aplayer-icon path{fill:#eee}</style>
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
{{- if .IsNamedParams -}}
{{- if .Get "url" -}}
<meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}" theme="{{ .Get `theme` | default `#2980b9` }}"
{{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
{{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
{{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
{{- with .Get "volume" }} volume="{{ . }}"{{ end -}}
{{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}}
></meting-js>
{{- else if .Get "auto" -}}
<meting-js auto="{{ .Get `auto` }}" theme="{{ .Get `theme` | default `#2980b9` }}"
{{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
{{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
{{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
{{- with .Get "loop" }} loop="{{ . }}"{{ end -}}
{{- with .Get "order" }} order="{{ . }}"{{ end -}}
{{- with .Get "volume" }} volume="{{ . }}"{{ end -}}
{{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}}
{{- with .Get "list-folded" }} list-folded="{{ . }}"{{ end -}}
{{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}}
></meting-js>
{{- else -}}
<meting-js server="{{ .Get `server` }}" type="{{ .Get `type` }}" id="{{ .Get `id` }}" theme="{{ .Get `theme` | default `#2980b9` }}"
{{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
{{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
{{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
{{- with .Get "loop" }} loop="{{ . }}"{{ end -}}
{{- with .Get "order" }} order="{{ . }}"{{ end -}}
{{- with .Get "volume" }} volume="{{ . }}"{{ end -}}
{{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}}
{{- with .Get "list-folded" }} list-folded="{{ . }}"{{ end -}}
{{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}}
></meting-js>
{{- end -}}
{{- else if strings.HasSuffix (.Get 0) "http" -}}
<meting-js auto="{{ .Get 0 }}" theme="#2980b9"></meting-js>
{{- else -}}
<meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="#2980b9"></meting-js>
{{- end -}}
{{- $scratch.Set "music" true -}}
此博客音乐代码实现，我参考木木木木木的GitHub库。
短代码模板为
1 {/{< music auto="https://music.163.com/#/album?id=xxxxxx" >}\}(把第一个左右花括号内“/\”去掉即可，HTTPs后即为网站id）
例如：
再比如，引用bilibili视频，新建/layouts/shortcodes/bilibili.html,在其中引入：
<div style="position: relative; padding: 32% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
src="//player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1{{end}}&as_wide=1&high_quality=1&danmaku=1"
scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
短代码模板为
1{/{< bilibili BVXXXXXXXX >}\}(把第一个左右花括号内“/\”去掉即可，BV即为BV号)
例如：
基本上，还有其它短代码模板也类似。基本上都是/layouts/shortcodes/xxx模式,再配置相应的短码id即可。
网页参考：1.hugo短码2.木木木木木的music.html
