提示
本文是在 博主One 文章：《添加网页音乐播放器》 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~
注意
由于此项目是魔改的，放在head.ts文件中不生效，因此这里我将代码加在打好包的docs\.vuepress\dist\index.html文件里。
打开网站音乐播放器官网进行注册
找到左侧默认音乐播放器-获取代码
js
<script
type="text/javascript"
id="myhk"
src="https://myhkw.cn/api/player/xxxxxxxxxxxx"
key="xxxxxxxxxxxx"
m="1"
lr="l"
></script>参数说明：lr="l"代表播放器在左下角，lr="r"代表播放在右下角
警告
如果播放器不加载，请开启加载 jQuery 设置或将此段代码插入到网站源码</head>或播放器代码之前
js
<script
type="text/javascript"
src="https://myhkw.cn/player/js/jquery.min.js"
></script>将上面 2 行代码添加到自己打好包的docs\.vuepress\dist\index.html文件
示例：
html
<!DOCTYPE html>
<html lang="en">
/*省略...*/
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" id="myhk" src="https://myhkw.cn/api/player/xxxxxxxxxxxx" key="xxxxxxxxxxxx" m="1" lr="l"></script>
</html>这里唯一麻烦的是，每次打包后都要手动添加代码，这里我直接用 sed 命令再每次打包后自动插入这 2 行代码。编辑shell\vdoing.sh文件：
sh
#构建
cd /D/code/zhishiku/vuepress-theme-vdoing-Hyde
npm run build:win
echo "----------------------------追加音乐播放器代码前--------------------------------"
# “/D/code/zhishiku/vuepress-theme-vdoing-Hyde/docs/.vuepress/dist/index.html”换成自己打包的路径
tail -5 /D/code/zhishiku/vuepress-theme-vdoing-Hyde/docs/.vuepress/dist/index.html
sed -i '/<\/body>/i\ <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>\n <script type="text/javascript" id="myhk" src="https://myhkw.cn/api/player/xxxxxxxxxxxx" key="xxxxxxxxxxxx" m="1" lr="l"></script>' /D/code/zhishiku/vuepress-theme-vdoing-Hyde/docs/.vuepress/dist/index.html
echo "----------------------------追加音乐播放器代码后--------------------------------"
tail -5 /D/code/zhishiku/vuepress-theme-vdoing-Hyde/docs/.vuepress/dist/index.htmlbash 控制台输入 hxx(此命令是我自定义的)命令,打开打包路径的 index.html 是否有添加上，如有说明成功~
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。