搬运：APLAYER FOR HUGO

发表于 更新于 分类于 阅读次数：
尝试向Hugo引入aplayer

前言

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

摘抄1

地址：APLAYER FOR HUGO

引入全局脚本样式文件

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

最新 CDN 请参考官网

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

1
2
3
4
5
<!-- 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 文件合适位置，插入下列代码：

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

设置 Front-matter 开关

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

嵌入 APlayer 播放内容

1
2
3
4
5
6
7
8
9
<div
class="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中添加如下代码：

1
2
3
[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/jquery@3.6.0"></script>

注释掉：<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0"></script> -->

只在需要的页面调用

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

1
2
3
4
5
<meting-js
server="netease"
type="playlist"
id="1234567">
</meting-js>

即可。

shortcode法

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

music.html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{{- $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 中引入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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 文件添加：

1
2
3
4
5
6
 {{ 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/meting@2.0.1/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 内容即可开启。

1
2
3
4
5
audio:
  server: netease
  type: song
  id: your-id
  p: before

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

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

摘抄4

参考地址：

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

第一种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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/meting@2.0.1/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>

第二种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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/meting@2.0.1/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使其不会初始化）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
<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 文件添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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

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