Hugo添加短代码

写在之前， hugo shortcodes中文意译即为雨果博客短代码，是一种先配置文件，通过在文章中插入短代码模式，来实现纯文字，歌曲，文章，个人社交文字转发，以及视频，播客等在个人博客上显示的一种方式。

以下几个短代码的应用

上次我在“Hugo解决网易云音乐不显示问题”这篇博客中说了，开启HTML外链引用必须先添加：

1.[markup.goldmark.renderer]
2.unsafe= true

然后自己再在网易云音乐引入 iframe实现在hugo博客上显示音乐。但是现在，有一种更好的方式，hugo提倡引入外链可以用短代码。

方式为：新建/layouts/shortcodes/music.html（2026年4月，此短代码接口已经出现问题，需要修改，我已经部署在vps上了），在其中引入：

{{- $scratch := .Page.Scratch.Get "scratch" -}}
<link rel="stylesheet" href="https://fastly.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-list{background-color:#212121}.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-lrc p{color:#fff}
</style>
<script src="https://fastly.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<script>
  /* 关键：使用自定义 API 节点以绕过 IP 封锁 */
  var meting_api='https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r';;
</script>
<script src="https://fastly.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

{{- if .IsNamedParams -}}
    {{- $theme := .Get "theme" | default "#760411" -}}
    {{- if .Get "url" -}}
        <meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}" theme="{{ $theme }}"
        {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
        ></meting-js>
    {{- else if .Get "auto" -}}
        {{/* 核心修改：直接将 URL 传递给 meting-js 的 auto 属性 */}}
        <meting-js auto="{{ .Get `auto` }}" theme="{{ $theme }}"
        {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
        {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
        ></meting-js>
    {{- else -}}
        <meting-js server="{{ .Get `server` | default `netease` }}" type="{{ .Get `type` | default `playlist` }}" id="{{ .Get `id` }}" theme="{{ $theme }}"
        {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
        {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
        ></meting-js>
    {{- end -}}
{{- else -}}
    <meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="#760411"></meting-js>
{{- end -}}

{{- $scratch.Set "music" true -}}

~~此博客音乐代码实现，我参考木木木木木的GitHub库。~~ 原版已改

短代码模板为

 {/{< music auto="https://music.163.com/#/song?id=xxxxxx" >}\}(把第一个左右花括号内“/\”去掉即可，HTTPs后即为网站id）

上面不行的话，可以改格式为

{/{< music server="netease" type="id" 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

February 15, 2021

以下几个短代码的应用