【搬运】APLAYER FOR HUGO

2022-10-25T00:59:00

前言

大同小异，第二篇开始摘抄就简化了

摘抄1

地址：APLAYER FOR HUGO

引入全局脚本样式文件

引入方法很多，有新建html的方法，也有插入head自定义html中的方法。

最新 CDN 请参考官网

在博客源文件夹的 /layouts/partials/head 目录下新建 custom.html 文件，内容如下：

<!-- 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/dist/Meting.min.js"></script>

加入文章页开关模板

考虑到不是所有页面都需要嵌入 aplayer, 所以在博客源文件夹的 /layouts/_default/single.html 文件合适位置，插入下列代码：

   {{ if eq .Params.aplayer true -}}
    {{ partial "aplayer.html" . }}
    {{ end -}}

设置 Front-matter 开关

在需要设置aplayer的页面设置 aplayer = true的Front-matter的开关即可。

嵌入 APlayer 播放内容

<divclass="aplayer"data-id="22680660"data-server="netease"data-type="song"data-mutex="true"data-mini="false"data-loop="none"></div>

播放器参数：

参数是否必须默认值描述 & 可选值
data-id是 单曲 ID / 歌单 ID / 专辑 ID / 搜索关键词
data-server是 音乐平台： netease,tencent,kugou,xiami,baidu
data-type是 音乐类型： song,playlist,album,search,artist
data-autoplay否false是否自动播放，移动端浏览器不支持该选项
data-mutex否true播放时是否暂停其他 APlayer 对象
data-listmaxheight否340px播放列表最高高度
data-preload否auto音乐预加载模式：none, metadata, auto
data-theme否#2980b9主题色
data-mini否false是否开启迷你模式
data-loop否all循环方式：all, one, none
data-order否list播放顺序：list, random
data-lrc否false
data-list-folded否false歌单列表初始时是否折叠
data-volume否0.7用户未自定义前的默认初始化音量

更多参数参考:

摘抄2

参考地址：

解除安全限制

20200111更新后的hugo，在文章（markdown）中嵌入的html标签，在浏览器中全部被替换成了一句 <!-- raw HTML omitted -->，对于这个问题，有不同的解决方案。

启用非安全模式

在博客的根目录 config.toml中添加如下代码：

  [markup.goldmark]    [markup.goldmark.renderer]      unsafe = true

切换旧的代码渲染器

在配置文件的 [markup] 部分添加以下内容（以 config.toml 为例，其他格式请参考对应文件的语法）：

defaultMarkdownHandler = "blackfriday"

禁用 jQuery

副作用：模板内涉及功能会失效。

  1. 复制 /themes/dream/layouts/_default/baseof.html 到 /layouts/_default/baseof.html
  2. 修改 baseof.html ： <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

注释掉：<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> -->

只在需要的页面调用

将前面使用的依赖代码，仅在需要的页面（对应的markdown 文件）调用，并加入：

<meting-js
server="netease"type="playlist"id="1234567"></meting-js>

即可。

shortcode法

先按前述引入，然后新建 ~/layouts/shortcodes/music.html ，在其中添加如下代码：

music.html代码

{{- $scratch := .Page.Scratch.Get "scratch" -}}
<!-- require APlayer --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><style type="text/css">.dark-theme .aplayer{background:#212121}.dark-theme .aplayer.aplayer-withlist .aplayer-info{border-bottom-color:#5c5c5c}.dark-theme .aplayer.aplayer-fixed .aplayer-list{border-color:#5c5c5c}.dark-theme .aplayer .aplayer-body{background-color:#212121}.dark-theme .aplayer .aplayer-info{border-top-color:#212121}.dark-theme .aplayer .aplayer-info .aplayer-music .aplayer-title{color:#fff}.dark-theme .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#fff}.dark-theme .aplayer .aplayer-info .aplayer-controller .aplayer-time{color:#eee}.dark-theme .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#eee}.dark-theme .aplayer .aplayer-list{background-color:#212121}.dark-theme .aplayer .aplayer-list::-webkit-scrollbar-thumb{background-color:#999}.dark-theme .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#bbb}.dark-theme .aplayer .aplayer-list li{color:#fff;border-top-color:#666}.dark-theme .aplayer .aplayer-list li:hover{background:#4e4e4e}.dark-theme .aplayer .aplayer-list li.aplayer-list-light{background:#6c6c6c}.dark-theme .aplayer .aplayer-list li .aplayer-list-index{color:#ddd}.dark-theme .aplayer .aplayer-list li .aplayer-list-author{color:#ddd}.dark-theme .aplayer .aplayer-lrc{text-shadow:-1px -1px 0 #666}.dark-theme .aplayer .aplayer-lrc:before{background:-moz-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:-webkit-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:linear-gradient(to bottom, #212121 0%, rgba(33,33,33,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 )}.dark-theme .aplayer .aplayer-lrc:after{background:-moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:-webkit-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 )}.dark-theme .aplayer .aplayer-lrc p{color:#fff}.dark-theme .aplayer .aplayer-miniswitcher{background:#484848}.dark-theme .aplayer .aplayer-miniswitcher .aplayer-icon path{fill:#eee}</style><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>{{- if .IsNamedParams -}}
    {{- if .Get "url" -}}
        <meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}" theme="{{ .Get `theme` | default `#2980b9` }}"        {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}        {{- with .Get "mini" }} mini="{{ . }}"{{ end -}}        {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}        {{- with .Get "volume" }} volume="{{ . }}"{{ end -}}        {{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}}        ></meting-js>    {{- else if .Get "auto" -}}
        <meting-js auto="{{ .Get `auto` }}" theme="{{ .Get `theme` | default `#2980b9` }}"        {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}        {{- with .Get "mini" }} mini="{{ . }}"{{ end -}}        {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}        {{- with .Get "loop" }} loop="{{ . }}"{{ end -}}        {{- with .Get "order" }} order="{{ . }}"{{ end -}}        {{- with .Get "volume" }} volume="{{ . }}"{{ end -}}        {{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}}        {{- with .Get "list-folded" }} list-folded="{{ . }}"{{ end -}}        {{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}}        ></meting-js>    {{- else -}}
        <meting-js server="{{ .Get `server` }}" type="{{ .Get `type` }}" id="{{ .Get `id` }}" theme="{{ .Get `theme` | default `#2980b9` }}"        {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}        {{- with .Get "mini" }} mini="{{ . }}"{{ end -}}        {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}        {{- with .Get "loop" }} loop="{{ . }}"{{ end -}}        {{- with .Get "order" }} order="{{ . }}"{{ end -}}        {{- with .Get "volume" }} volume="{{ . }}"{{ end -}}        {{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}}        {{- with .Get "list-folded" }} list-folded="{{ . }}"{{ end -}}        {{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}}        ></meting-js>    {{- end -}}
{{- else if strings.HasSuffix (.Get 0) "http" -}}
    <meting-js auto="{{ .Get 0 }}" theme="#2980b9"></meting-js>{{- else -}}
    <meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="#2980b9"></meting-js>{{- end -}}
{{- $scratch.Set "music" true -}}
​

然后直接在 md 文档中引用即可（记得补齐花括号）：

{< music auto="https://music.163.com/#/playlist?id=yourid" >}

摘抄3

参考地址：

和我使用同一个主题的人的魔改方案，我把相关commit提取一下。

文章中引入函数

layouts/partials/article/article.html 中引入以下内容：

<article class="{{ if .Params.image }}has-image {{ end }}main-article">    {{ partial "article/components/header" . }}
​
    {{ if .Params.audio }}
        {{ if or ( eq .Params.audio.p "before" ) ( not .Params.audio.p ) }}
            {{ partial "article/components/audio" . }}
        {{ end }}
    {{ end }}
​
    {{ partial "article/components/content" . }}
​
    {{ if or ( eq .Params.audio.p "after")  ( eq .Params.audio.p "fixed" )  }}
        {{ partial "article/components/audio" . }}
    {{ end }}
​
    {{ partial "article/components/footer" . }}
​
    {{ if or .Params.math .Site.Params.article.math }}

引入的主要是.Params.audio相关的函数和article/components/audio的依赖目录。

定义播放器参数

新建 layouts/partials/article/components/audio.html：

audio.html代码

<div style="margin: 20px;"><meting-js style="margin: 10px;"    name="{{ .Params.audio.name }}"    artist="{{ .Params.audio.artist }}"    url="{{ .Params.audio.url }}"    {{ if .Params.audio.cover }}        cover="{{ .Params.audio.cover }}"    {{ else }}        cover="/images/logo.png"    {{ end }}    fixed="{{ eq .Params.audio.p "fixed" }}" server="{{ .Params.audio.server }}" type="{{ .Params.audio.type }}" id="{{ .Params.audio.id }}" autoplay="true" loop="all" order="list" preload="auto" list-folded="true"    list-max-height="500px"    theme="#999999" lrc-type="1"></meting-js>
</div>

在头部引入依赖

/layouts/partials/head/custom.html 文件添加：

    {{ if .Params.audio }}
       <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>   {{ end }}

使用方法

支持参数如下

参数说明
server无
type播放类型，song，playlist，album，search，artist，分别对应，单曲、播放列表、专辑、搜索结果、艺术家，只有在自己指定播放文件的时候无需填写该参数
id播放内容的ID，如果是单曲即为单曲ID，如果是搜索可以直接输入搜索的内容只有在自己指定播放文件的时候无需填写该参数
name歌曲名称，如果播放自己指定的音频文件，可以定义播放内容的名称
cover音乐播放的封面，默认为站点LOGO，如果播放自己指定的音频文件，可以定义播放内容的封面
artist艺术家，如果播放自己指定的音频文件，可以定义播放内容的艺术家名字
url播放指定文件的地址
p播放器显示的位置，before，after，fixed，分别表示插入在文章内容最前面、最后面，或在整个页面窗口左下方浮动显示，如果是放在文章前面，可以不用单独定义p参数

文章中，在需要插入音乐的页面中，添加 Front Matter 内容即可开启。

audio:  server: netease  type: song  id: your-id  p: before

全局，在整个页面左下方插入一首指定的曲目：

audio:  name: 歌曲名称  url: https://xxxxxxx.com/xxx.mp3  p: fixed  cover: https://xxxxx.com/xxx.jpg # 可以不写  artist: 艺术家名字 # 可以不写

摘抄4

参考地址：

主要参考引入aplayer的html代码。

第一种

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <!-- 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></head><body>​
<meting-js        server="netease"        type="playlist"        id="60198"        fixed="true"        autoplay="true"        loop="all"        order="random"        preload="auto"        list-folded="ture"        list-max-height="500px"        lrc-type="1"></meting-js>​
</body></html>

第二种

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <!-- 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></head><body>​
<!-- <meting-js server="netease" type="song" id="1492792890"></meting-js>--><meting-js server="netease" type="playlist" id="5260535564"></meting-js><meting-js server="netease" type="album" id="3154175"></meting-js><meting-js server="netease" type="artist" id="5781"></meting-js><meting-js server="tencent" type="album" id="003k3pNG0KpRVI"></meting-js><meting-js server="tencent" type="album" mini="true" id="003k3pNG0KpRVI"></meting-js><meting-js server="tencent" type="album"   list-folded="true" id="003k3pNG0KpRVI"></meting-js>​
</body></html>

添加代码

在页脚添加代码就行了（添加 no-destroy使其不会初始化）：

<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><div class="aplayer no-destroy"><meting-js server="netease" type="playlist" id="60198" fixed="true" autoplay="true" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"></meting-js>
</div>

总结和我的想法

我的想法是仅引入全局的播放器另外还需要调用pjax。

第三种方法在首页引入Front Matter内容无效，第四种成功了。

播放器引入

/layouts/partials/foot/custom.html 文件添加：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><style type="text/css">.aplayer-miniswitcher{background: var(--body-background) !important; border-radius: 0 0 0 0;} .aplayer .aplayer-miniswitcher .aplayer-icon path{fill: var(--body-text-color);}</style><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script><div>
<meting-js server="netease" type="playlist" id="6940342461" fixed="true" autoplay="false" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="500px" theme="var(--card-background)" lrc-type="0"></meting-js>
</div>

pjax引入研究

pjax引入可以避免音乐中断。但是……我看文章在新页面打开不就好了？

全局音乐 Pjax优化

对应仓库

hugo-maupassant-pjax

网上只找到这个，相关内容只能等后面慢慢试了，有点费时。

Halo引入

因为我主要是用aplayer播传好到 onedrive-index上面的东西，所以封面，css，js传好就行。Halo设置里面在底部插入

<link rel="stylesheet" href="/upload/APlayer.min.css"><div id="aplayer"></div><div id="aplayer" style="position:absolute;left;0;bottom:0;"></div><script src="/upload/APlayer.min.js"></script><script>  const ap = new APlayer({
    container: document.getElementById('aplayer'),    autoplay: false, //自动播放    listFolded: true, //播放列表默认折叠    listMaxHeight: 90, //播放列表最大高度    order: 'list', //音频循环顺序, 可选值: 'list', 'random'    loop: 'all', //音频循环播放, 可选值: 'all', 'one', 'none'    theme: '#e9e9e9', //切换音频时的主题色，优先级低于audio.theme    preload: 'none', //音频预加载，可选值: 'none', 'metadata', 'auto'    mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器    lrcType: 0, //歌词格式，可选值：3（LRC文件歌词格式），1（JS字符串歌词格式）    volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效    fixed: true, //吸底模式（fixed:true），迷你模式（mini:true），普通模式（注释此行或者设置fixed:false）    audio: [
        {
            name: '負けないで！Fly away',            artist: '氷上恭子',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/01.mp3',            cover: '/upload/1.jpg',            theme: '#b3cde0'        },        {
            name: '音速娘',            artist: 'kala',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/02.mp3',            cover: '/upload/2.jpg',            theme: '#b3cde0'        },        {
            name: 'Mr.B Bee',            artist: '沢口遥',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/03.mp3',            cover: '/upload/3.jpg',            theme: '#b3cde0'        },        {
            name: 'ちょっとね',            artist: '高桥千代美',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/04.mp3',            cover: '/upload/4.jpg',            theme: '#b3cde0'        },        {
            name: '天使の羽根で',            artist: 'かないみか',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/05.mp3',            cover: '/upload/5.jpg',            theme: '#b3cde0'        },        {
            name: 'Love Wing',            artist: 'アイドル防衛隊ハミングバード',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/06.mp3',            cover: '/upload/6.jpg',            theme: '#b3cde0'        },        {
            name: 'City Connection',            artist: 'かないみか',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/07.mp3',            cover: '/upload/7.jpg',            theme: '#b3cde0'        },        {
            name: 'Sakura Mankai',            artist: '細江慎治',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/08.mp3',            cover: '/upload/8.jpeg',            theme: '#b3cde0'        },        {
            name: 'Cute Mafia',            artist: '渡部恭久',            url: 'https://files.20342053.xyz/api/raw/?path=/Music/09.mp3',            cover: '/upload/9.jpeg',            theme: '#b3cde0'        }
    ]
  });</script>

另外还调用了一个折叠的代码：

<style type="text/css">        .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
          left: -66px !important;          /* 默认情况下缩进左侧66px，只留一点箭头部分 */        }
​
        .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
          left: 0 !important;          /* 鼠标悬停是左侧缩进归零，完全显示按钮 */        }
</style>
参考自 https://blog.meta-code.top/2021/11/28/2021-43/

补充一个结合前面自动播放打开的情况下可以恢复播放进度的脚本，好处是不需要pjax，坏处是还是会断个几秒。（如果有pjax引入的主题就不需要这个了，当然也是可以手动引入pjax然后套进去的。）

<script>isRecover = false;​
ap.on('canplay', function () {
    if (!isRecover) {
        if (localStorage.getItem("musicIndex") != null) {
            musicIndex = localStorage.getItem("musicIndex");            musicTime = localStorage.getItem("musicTime");            if (ap.list.index != musicIndex) {
                ap.list.switch(musicIndex);            } else {
                ap.seek(musicTime);                ap.play();                localStorage.clear();                isRecover = true;            }
        } else {
            isRecover = true;        }
    }
});​
window.onbeforeunload = function (event) {
    if (!ap.audio.paused) {
        musicIndex = ap.list.index;        musicTime = ap.audio.currentTime;        localStorage.setItem("musicIndex", musicIndex);        localStorage.setItem("musicTime", musicTime);    }
};</script>

代码参考自：https://l3yx.github.io/2020/04/29/APlayer-%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2%E4%BF%9D%E6%8C%81%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E8%BF%9B%E5%BA%A6/

当然你要引入pjax也是可以的，就是要F12找一下网页的container的位置（不过对于本来就没引pjax的博客而言基本上是多此一举）

当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »

© 2024 MIP for Typecho v0.8 , Designed by Holmesian.