One

主题

One2025-03-09
529
2.5m
Get...

添加网页音乐播放器 ​

image-20250308073343552

添加网页音乐播放器 ​

版权 ​

次配置来源于《Hyde Blog》大佬的指导，十分感谢大佬，大佬威武💖💖。

环境 ​

自己开源的 《vuepress-theme-vdoing-one-public》网站模板。

此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️

效果 ​

image-20250308073343552

配置 ​

警告

官方给的代码加在项目的配置文件里，我测试是不生效的，因此这里我将代码加在打好包的index.html文件里。

（1）打开网站音乐播放器官网

点击免费注册：

image-20250308073635744

一步步点击到获取代码：（拷贝这2行代码）

image-20250308074516224

（2）将这2行代码添加到自己打好包的index.html文件如下位置：

docs\.vuepress\dist\index.html

image-20250308074449217

css
    <script type="text/javascript" src="https://myhkw.cn/player/js/jquery.min.js"></script>
    <script type="text/javascript" id="myhk" src="https://myhkw.cn/api/player/1xxxxx0" key="17xxxxxxx20" m="1" lr="r"></script>

这里唯一麻烦的是，每次打包后都要手动添加代码，这里我直接用sed命令再每次打包后自动插入这2行代码：

编辑shell\vdoing.sh文件：

bash
……
#构建
cd /d/vuepress-theme-vdoing-one-private
npm run build:win
echo "----------------------------追加音乐播放器代码前--------------------------------"
tail -5 /d/vuepress-theme-vdoing-one-private/docs/.vuepress/dist/index.html
sed -i '/<\/body>/i\    <script type="text/javascript" src="https://myhkw.cn/player/js/jquery.min.js"></script>\n    <script type="text/javascript" id="myhk" src="https://myhkw.cn/api/player/你的私有代码" key="你的私有代码" m="1" lr="r"></script>' /d/vuepress-theme-vdoing-one-private/docs/.vuepress/dist/index.html
echo "----------------------------追加音乐播放器代码后--------------------------------"
tail -5 /d/vuepress-theme-vdoing-one-private/docs/.vuepress/dist/index.html

……

image-20250308080931783

（3）一键提交代码测试，观察效果

image-20250308081049075

最近更新