Hyde Blog

主题

Hyde2025-03-09 02:47:332025-05-19 20:28:53VdoingVdoing
568
2.5m
Get...

添加网页音乐播放器 ​

版权 ​

提示

本文是在 博主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.html

验证 ​

bash 控制台输入 hxx(此命令是我自定义的)命令,打开打包路径的 index.html 是否有添加上，如有说明成功~

最近更新