wakeup-倪安东

最近在找歌,然后就突然想到,hugo中可不可以引入音乐播放器?于是去网上搜索了一下,发现并没有现成的

于是去看了看官网,发现了关于shortcode的介绍,就想到了用这个来引入音乐

shortcode介绍

可以在markdown中插入一段自定义的html,目录应该是在layouts的shortcodes下

创建music.html

我自己尝试了一下在根目录创建layouts和shortcodes目录,发现并没有作用,于是我到themes里面创建了,是可以读取到的,最终应该是这样子

shortcode-dir

编辑music.html

<h2>{{.Get 1}}</h2>
<audio controls autoplay loop  preload="none" src="{{.Get 0}}">
    <p>Your browser does not support the <code>audio</code> element.</p>
</audio>

这里用到的 “{{ .Get 0}}“是hugo中shortcode的语法,在markdown中传递参数给html 第一个参数传递歌曲的位置,第二个参数传递歌名

上传歌曲

我把音乐放到了这个目录

shortcode-music-dir

编辑markdown文件,引入shortcode

像下面这样,在markdown任何地方引入都可以,然后传递参数

<!-- 两个大括号之间有个空格,否则这个也会被识别为shortcode -->
{ {< music "/music/wakeup.m4a" "wakeup-倪安东" >} }

完成!