安装aplayer之后，ins.js文件里多了引入，导致显示异常的问题

[Ziven-n]

[Ziven-n]

我的博客地址ziven.cc 是我使用方式不对吗

[Ziven-n]

具体位置是相册那里加载不出来，是不是哪里需要配置一下

[grzhan]

@Ziven-n 应该是资源插入代码出现了问题，如果方便请说明当前使用的主题

[Ziven-n]

主题是yilia,我的博客地址ziven.cc可以详细看看

[Ziven-n]

我重新看了下，应该是这样，使用npm命令安装完aplayer之后，在博客目录public/photos/目录下的所有文件头部都多了导入，包括.json、.css、.js文件

我git上已经版本回退取消安装了

[huweihuang]

我之前遇到的问题，提了issue：#43

原因可能是类似的。
安装了aplay插件生成后的html 多了以下代码：

<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script>

以下中此段代码出现的位置，原先应该是生成archive链接的内容，具体查看正常没有aplayer插件的效果，查看网页源代码，从208行开始：
view-source:https://www.huweihuang.com/archive/

<!-- USE SIDEBAR -->
    <!-- Post Container -->
            <div class="
                col-lg-8 col-lg-offset-1
                col-md-8 col-md-offset-1
                col-sm-12
                col-xs-12
                post-container
            ">
            # 此段为 aplayer增加的，导致archive生成异常
                <link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script>

<!-- 如果开启评论功能 -->

hexo 主题涉及此处的模板代码参考：https://github.com/huweihuang/hexo-theme-huweihuang/blob/master/themes/huweihuang/layout/page.ejs#L59

[PassedBy]

@Ziven-n 应该是资源插入代码出现了问题，如果方便请说明当前使用的主题

请问这个吧问题怎么解决呢？ hexo-theme-beantech主题

[hushhw]

@Ziven-n 今天折腾插入音乐，恰巧遇到了和你一样的问题。
我理解是因为官方文档里面写到的自动脚本插入功能导致的，你可以按官方文档说的关闭自动脚本插入功能，然后自己手动配置。
可以参考我写的这篇文章aplayer 音乐播放器

[MeteorVE]

今天解決了這個問題
環境 : hexo 4.2.1，nxt 7.8.0

1. 在 hexo config 那邊，如同這個 repo 的 readme 所寫，新增 asset_inject 這個選項。

aplayer:
  asset_inject: false

2. 再來我們必須自己引入 js 和 css 等檔案。
   我原本在 hexo 3.x 版本 配上 next 7.1.1 版本 ，自動注入就能 work 了
   現在升級了才發生這個問題，但是相對的，override 的功能也做得更完善。
   以下方式是適用 "如果你是 next 最新版本主題" :
3. 建立 blog資料夾/source/_data/head.swig
_data 這個資料夾預設沒有，自己創。
4. 在 /source/_data/next.yml 內
   搜尋 head: source/_data/head.swig 將他取消註釋。
   (註 : next.yml 這個配置又得講到 next 的資料分離功能，有點扯遠，但要麻煩自行去 next repo 看)
5. 在 /head.swig 內放入以下內容

<!-- require 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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

如果你說，步驟 2 後面的東西都看不懂怎麼辦。
那也可以直接做 file inject，就是直接修改源碼
在 next 主題資料夾內，找 layout/_partials/head/head.swig
在最後面加入上面那份引入的區塊就可以了。

[zeroonead]

今天解決了這個問題
環境 : hexo 4.2.1，nxt 7.8.0

1. 在 hexo config 那邊，如同這個 repo 的 readme 所寫，**新增** asset_inject 這個選項。

aplayer:
  asset_inject: false

1. 再來我們必須自己引入 js 和 css 等檔案。
   我原本在 hexo 3.x 版本 配上 next 7.1.1 版本 ，自動注入就能 work 了
   現在升級了才發生這個問題，但是相對的，override 的功能也做得更完善。
   以下方式是適用  "如果你是 next 最新版本主題" :

2. 建立 `blog資料夾/source/_data/head.swig`
   `_data` 這個資料夾預設沒有，自己創。

3. 在  /source/_data/next.yml  內
   搜尋 `head: source/_data/head.swig` 將他取消註釋。
   (註 : next.yml 這個配置又得講到 next 的資料分離功能，有點扯遠，但要麻煩自行去 next repo 看)

4. 在 `/head.swig` 內放入以下內容

<!-- require 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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

如果你說，步驟 2 後面的東西都看不懂怎麼辦。
那也可以直接做 file inject，就是直接修改源碼
在 next 主題資料夾內，找 layout/_partials/head/head.swig
在最後面加入上面那份引入的區塊就可以了。

也可以放一个inject.js文件到scripts目录,js文件内容:

hexo.extend.injector.register("head_begin", function(){
	return '<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><script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>'
});

就可以自动注入APlayer的css和js了