文章	评论	标签
56	2	0

前言

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

摘抄1

引入全局脚本样式文件

引入方法很多，有新建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/[email protected]/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 播放内容

<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`	用户未自定义前的默认初始化音量

更多参数参考:

MetingJS Options

APlayer Options

摘抄2

参考地址：

解除安全限制

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

启用非安全模式

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

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

切换旧的代码渲染器

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

defaultMarkdownHandler = "blackfriday"

禁用 jQuery

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

复制 /themes/dream/layouts/_default/baseof.html 到 /layouts/_default/baseof.html
修改 baseof.html ：
<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 ，在其中添加如下代码：

{{- $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/[email protected]/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：

<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/[email protected]/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

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

搬运：APLAYER FOR HUGO

佳凌雾杨

前言

摘抄1

引入全局脚本样式文件

加入文章页开关模板

设置 Front-matter 开关

嵌入 APlayer 播放内容

摘抄2

解除安全限制

启用非安全模式

切换旧的代码渲染器

禁用 jQuery

只在需要的页面调用

shortcode法

摘抄3

文章中引入函数

定义播放器参数

在头部引入依赖

使用方法

摘抄4

第一种

第二种

添加代码

总结和我的想法

播放器引入

pjax引入研究