Butterfly主题引入Dplayer播放器，并适配pjax

点击查看更新记录

更新记录

2024-6-6: 适配方案01

依样画葫芦尝试pjax适配

效果预览
1686036313532.png

魔改正文

本方案目前只是根据原有的Aplayer播放器适配进行依样画葫芦
如果有更好的方法，欢迎各位看官提出

点击查看魔改正文

  1. 在博客根目录打开CMD，输入npm安装指令，安装Dplayer插件

    1
    npm install hexo-tag-dplayer --save

  2. 新建[根目录]\themes\butterfly\layout\includes\third-party\dplayer.pug

    1
    script(src=url_for(theme.asset.dplayer_js))

  3. 修改[根目录]\themes\butterfly\layout\includes\additional-js.pug在大约53行的位置

    1
    2
    3
    4
    5
    6
    7
      if theme.aplayerInject && theme.aplayerInject.enable
        if theme.pjax.enable || theme.aplayerInject.per_page
          include ./third-party/aplayer.pug
    +     include ./third-party/dplayer.pug
        else if page.aplayer
          include ./third-party/aplayer.pug
    +     include ./third-party/dplayer.pug

  4. 修改[根目录]\themes\butterfly\layout\includes\third-party\pjax.pug在大约41行下面的位置，依样画葫芦，添加适配代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
        if (window.aplayers) {
          for (let i = 0; i < window.aplayers.length; i++) {
            if (!window.aplayers[i].options.fixed) {
              window.aplayers[i].destroy()
            }
          }
        }

    +   if (window.dplayers) {
    +     for (let i = 0; i < window.dplayers.length; i++) {
    +       if (!window.dplayers[i].options.fixed) {
    +         window.dplayers[i].destroy()
    +       }
    +     }
    +   }

  5. 最后打开[根目录]\_config.butterfly.yml添加CDN配置项

    1
    2
    3
    4
    5
    6
      option:
        main_css: /css/index.css
        main: /js/main.js
        utils: /js/utils.js
    +   #dplayer播放器
    +   dplayer_js: https://npm.elemecdn.com/dplayer@1.26.0/dist/DPlayer.min.js

使用方式

详情见官方文档

  1. 官方举例：

    1
    2
    {% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
    {% dplayer 'url=some.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autoplay" %}

  2. 本人使用的：