Coder Social home page Coder Social logo

Comments (10)

MeteorVE avatar MeteorVE commented on May 23, 2024 1

今天解決了這個問題
環境 : 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/[email protected]/dist/Meting.min.js"></script>

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

from hexo-tag-aplayer.

Ziven-n avatar Ziven-n commented on May 23, 2024

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

from hexo-tag-aplayer.

Ziven-n avatar Ziven-n commented on May 23, 2024

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

from hexo-tag-aplayer.

grzhan avatar grzhan commented on May 23, 2024

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

from hexo-tag-aplayer.

Ziven-n avatar Ziven-n commented on May 23, 2024

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

from hexo-tag-aplayer.

Ziven-n avatar Ziven-n commented on May 23, 2024

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

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

from hexo-tag-aplayer.

huweihuang avatar huweihuang commented on May 23, 2024

我之前遇到的问题,提了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

from hexo-tag-aplayer.

PassedBy avatar PassedBy commented on May 23, 2024

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

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

from hexo-tag-aplayer.

hushhw avatar hushhw commented on May 23, 2024

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

from hexo-tag-aplayer.

battlesteed avatar battlesteed commented on May 23, 2024

今天解決了這個問題
環境 : 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/[email protected]/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/[email protected]/dist/Meting.min.js"></script>'
});

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

from hexo-tag-aplayer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.