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. 本人使用的: