Hexo使用记录

Posted by zengchengjie on Tuesday, December 3, 2024

Hexo使用记录

使用APlayer添加音乐

问题：

hexo要添加音乐，使用Aplayer插件，但是这个插件好像是将代码写到public的html文件里的，可是html文件不是hexo执行生成的吗？那我每次构建以后，岂不是这个音乐集成代码就没了

回答：

你提到的情况是正确的。Hexo 是一个静态网站生成器，它会根据你的源文件生成静态的 HTML 文件。如果你手动将 APlayer 的代码写入到 public 目录下的 HTML 文件中，那么每次你重新构建 Hexo 站点时，这些手动添加的代码都会被覆盖。

为了避免这种情况，你可以通过以下几种方法来集成 APlayer 插件：

方法一：使用 Hexo 插件

安装 APlayer 插件：
```
npm install hexo-tag-aplayer --save
```
配置插件：在你的 Hexo 配置文件 _config.yml 中添加 APlayer 的配置：
```
aplayer:
  meting: true
  asset_inject: true
```
在文章中使用 APlayer 标签：在你的 Markdown 文件中使用 APlayer 标签来插入音乐：
```
{% aplayer "Song Title" "Artist Name" "/path/to/music.mp3" "/path/to/cover.jpg" %}
```

方法二：自定义模板

创建自定义模板：在你的主题目录下创建一个自定义模板文件，例如 layout/_partial/aplayer.ejs 或 layout/_partial/aplayer.swig，并在其中添加 APlayer 的初始化代码。
在主题布局中引入模板：在你的主题布局文件（例如 layout/layout.ejs 或 layout/layout.swig）中引入这个自定义模板：
```
<%- partial('_partial/aplayer') %>
```
在文章中使用 APlayer：在你的 Markdown 文件中添加 APlayer 的初始化代码或使用自定义的标签来插入音乐。

方法三：使用 JavaScript 动态加载

在主题中添加 APlayer 脚本：在你的主题的 head.ejs 或 footer.ejs 文件中添加 APlayer 的脚本链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

在文章中使用 JavaScript 初始化 APlayer：在你的 Markdown 文件中使用 JavaScript 来初始化 APlayer：

<div id="aplayer"></div>
<script>
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
      name: 'Song Title',
      artist: 'Artist Name',
      url: '/path/to/music.mp3',
      cover: '/path/to/cover.jpg'
    }]
  });
</script>

通过以上方法，你可以确保 APlayer 插件的代码不会在每次构建时丢失，并且能够正确地集成到你的 Hexo 站点中。