部署Dplayer到Hexo博客

Hexo使用Fuild主题的情况下,如何部署Dplayer到hexo博客内,并且我需要将本地视频文件放到source目录下,需要如何操作。并且引用

要在 Hexo 博客中部署 dplayer 并将 视频 文件放到“source/Videos”,可以按照以下步骤操作:

  1. 安装 DPlayer 插件:使用 npm install hexo-tag-dplayer --save 命令安装插件。

  2. 在 Hexo 文章中编写 DPlayer 标记:在您的 Markdown 文本中添加类似如下的标记

    1
    {% dplayer "url=" "pic=" "subtitle=" %}

    其中:

    • url: 您的音频/视频文件的URL。
    • pic:您的音频/视频封面图片的URL。
    • subtitle:您的音频/视频字幕的URL。(可选)

    例如:

    1
    {% dplayer "url=/videos/sword_dolly_v1.mp4" "pic=https://tse3-mm.cn.bing.net/th/id/OIP-C.9Fs5GJeIHHJKIjaugIZAMQHaEo?pid=ImgDet&rs=1" "subtitle=https://example.com/example.vtt" %}
  3. 配置 Fluid 主题:修改 _config.yml 文件,添加以下配置:

    1
    2
    3
    4
    # DPlayer
    dplayer:
    enable: true
    useCDN: true

    如果 useCDN 设置为 true,则使用 CDN 加载 DPlayer 脚本和样式。如果设置为 false,则使用本地脚本和样式。

  4. 生成并部署您的博客:使用 hexo generate 命令生成静态文件,并使用 hexo deploy 命令将它们部署到您的服务器上。

  5. 访问您的博客:在浏览器中访问您的博客文章页面,您应该能够看到嵌入的 DPlayer 播放器。

这些是在 Fluid 主题中部署 DPlayer 的基本步骤。请根据您的需要和具体情况进行调整和配置。

dplayer官方指南 : https://dplayer.diygod.dev/zh/guide.html#%E5%AE%89%E8%A3%85

最终效果


部署Dplayer到Hexo博客
https://fxy5750.github.io/2023/05/10/11-部署Dplayer到Hexo博客/
作者
fxy5750
发布于
2023年5月10日
更新于
2023年5月10日
许可协议