音源来自: https://bandcamp.com

框架制作于: https://iframely.com/


2022.05.21 更新:

前天模仿别人写的 spotify 在 hugo 上的 shortcode 自己写了个 funkwhale 的 shortcode ,funkwhale 因为属性较少很好做,于是放话说要做 bandcamp 的,结果实际做起来有点麻烦,暂时先弄了个样式固定只需要扔个链接上去的超简陋 shortcode,unsafe 改成 false,等啥时候我想要再弄再说……

目前这个主题似乎不能在简述部分放歌曲列表,原因不明。

先把 funkwhale 的 shortcode 放这里:

<!--
Parameters:
	0 - instance - (Required) yourinstance.tld
    1 - type - (Required) playlist / artist / track
    2 - id - (Required) Target ID
    3 - width - (Optional) width (must be quoted if using %)
    4 - height - (Optional) height
-->

{{ if .IsNamedParams }}
	<iframe 
	src="https://{{ .Get "instance" }}/front/embed.html?&amp;type={{ .Get "type" }}&amp;id={{ .Get "id" }}" 
	width="{{ default "100%" (.Get "width") }}" 
	height="{{ default "330" (.Get "height") }}" 
	scrolling="no" 
	frameborder="no"></iframe>
{{ else }}
	<iframe src="https://{{ .Get 0 }}/front/embed.html?&amp;type={{ .Get 1 }}&amp;id={{ .Get 2 }}" 
	width="{{ default "100%" (.Get 3) }}" 
	height="{{ default "330" (.Get 4) }}" 
	scrolling="no" 
	frameborder="no"></iframe>
{{ end }}

效果:


今天发现 Iframely 能轻松制作富媒体网页播放器所需的 code(当然,不限于 Bandcamp,更不仅限于音视频播放),一般来说无需注册直接把想要播放的音源 url 丢进去就会自动生成 html 格式的 code,并可以简单编辑一些样式,将生成的 code 嵌入自己网站中对应位置就可以了。注册后似乎可以自己进行一些制作,不过目前还没有尝试,之后研究下依旧发在这里。

Hugo 博客需要修改下 markup 设置才可直接在 content 中的 markdown 文件里直接嵌入 html 的 code。简单来说,假设您的 config 文件为 toml 格式,那么在里面加入这么几行就可以了:

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

Markup 详细配置可以参考官方文档: https://gohugo.io/getting-started/configuration-markup

想要和我一样放在置顶文章的效果也很简单,在 Front Matter 中加入 weight: 1 即可。想要放在其他位置,比如侧边栏,可能要在 layouts 对应位置找地方嵌入。

我很喜欢 Bandcamp 这个音乐平台,用户可以以最直接的方式支持创作者(购买单曲或专辑),并直接在里面购买并下载音乐源文件(一般是 mp3 和 flac 格式),购买前有几次试听全曲的机会(部分专辑可能只能试听一部分)。购买即拥有这点太多音乐流媒体如今做不到,不必为了自己喜欢的音乐一直购买会员,避免音乐因为各种原因下架而无法继续听的风险。缺点的话,收录的音乐大多由独立音乐人创作,像那些热门流行乐这边几乎没有,音源有限,另外就是近年被墙了 OTZ(所以说,为什么)。