尝试插入音乐时的灵感 @ shenmo | 2021-10-09T11:14:39+08:00 | 1 分钟阅读 | 更新于 2021-10-09T11:14:39+08:00

昨晚写博客的时候,想要插入一段音频…….

首先是找到了网易云音乐(非常熟悉的老朋友了)

直接找到对应歌曲,生成外链播放器

enter description here 复制代码,粘贴到博文里

结果是根本没有显示,连个白框都没有

百度启动!面向百度编程的我怎么可能不百度?

结果一整页的CSDN&博客园的复制粘贴。。。先忍住恶心,翻找有用的东西

找了很久,比如说搜索 网易云 hugo 静态博客 网易云 静态博客 iframe

都没有

直到最后突然发现直接搜hugo插入网易云就找到了。。。

enter description here

复制粘贴 没用。。。 只会有一个播放器的壳子,根本没有音乐内容!!

此时已经折腾到了后半夜。。。室友大呼小叫打王者荣耀。。。抓狂。打开拼多多——新耳塞——下单

突然想起不翻墙我是可以用Bing的

众所周知只要小众一点百度就瞎了

所以满怀希望打开bing

看到了救命的帖子

https://blog.ohmykreee.top/article/music-player-in-hugo-page/

enter description here 引入Aplayer来播放音乐!

根据教程,我引入了第三方js

enter description here

当时我是按照直接修改主题模板的方式添加了

后来发现我的主题模板提供了配置项(作者大大赛高!)

回滚之后引入成功

enter description here

看看我的本地博客

enter description here

OHHHHHHHHHHHHHHHH

然后按照接下来的步骤

enter description here

enter description here

成功了!

但是

为什么会有一排播放器????

enter description here

给博主留言之后我就睡觉了

第二条早上,我突然想到

昨晚似乎看到了这个东西

问题就在于新的渲染器 Goldmark 不默认渲染 HTML 代码,甚至用 shortcodes 也不行

等等

如果说

其实本来网易云的链接是可以加载的

只是没有开启Goldmark的渲染????

马上修改,结果是

enter description here

完全正常。。。。。。

行吧,虽然路途曲折,最终是解决了

然而,并没有痛苦,而是欣悦!

在这里,我学到了一个全新的操作!

那就是

enter description here

追加依赖!

我好事点进去看了这些js,发现和我在Valine官方看到的非常相似!

也就是说,官方的代码,其实是引入js的!

在本地创建custom.js,复制粘贴官方的代码

确实引入了!!!!

看来新的一轮折腾开始了!!

© 2019 - 2024 shenmo的世界

Hugo theme Dream.

看不见我

avatar
关于我

星火应用商店

社交链接

本博客所有文章使用《知识共享 署名-非商业性使用-相同方式共享 4.0》(CC-BY-NC-SA-4.0)协议

这意味着你可以在署名并标明出处的情况下进行非商业转载(转载的文章也需要遵守CC-BY-NC-SA-4.0协议),但不可以进行商业转载