Hexo-添加音乐播放器
前言
在此使用的是Aplayer.MoePlayer.GitHub ，在Next(Gemini)主题下设置。 本文是自主创建，也可使用hexo-tag-aplayer插件。 搭配音乐搜索器.maicong.GitHub 使用更佳
一、 安装
在GitHub下载 Aplayer，然后将dist文件夹复制到themes/next/source文件夹下。
- 注：尝试复制到
source文件夹下失败。
二、 配置
新建 themes/next/source/dist/music.js
文件，添加内容：
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true, // 吸底模式
autoplay: true, // 自动播放
theme: '#b7daff' , //主题色
loop: 'all', // 循环播放, 可选值: 'all', 'one', 'none'
order: 'list', // 循环顺序, 可选值: 'list', 'random'
volume: 0.7, // 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
mutex: true, // 阻止多个播放器同时播放
listFolded: false, // 是否列表 默认折叠
listMaxHeight: 90, // 列表最大高度
lrcType: 1,
audio: [
{
name: "清新的小女孩 (For Ma)", //名称
artist: 'July Tun', // 艺术家
url: 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_72891154&response=res&type=convert_url&', //链接
cover: 'http://imge.kugou.com/stdmusic/150/20200114/20200114142306429193.jpg', //封面
lrc: '[00:1.21]清新的小女孩 - ไทย[00:14.88]႐ိုး႐ိုးေလးနဲ႔ လွေနတယ္ မရယ္[00:20.31]清新脱俗的女孩[00:20.31]ဆန္း၂ျပား၂မ၀တ္ပါနဲ႔လားကြယ္[00:28.58]你不需要刻意打扮穿着[00:28.58]ကမ႓ာေက်ာ္တဲ့ မင္းသမီးေတာင္[00:33.54]你的美貌[00:33.54]ေငးေမာေလာက္တယ္ မရဲ႕ အလွေတြရယ္[00:40.37]哪怕国际女星都会仰慕[00:40.37]မိုးျမင့္ထက္က ေငြၾကယ္ကေလးလိုပဲ[00:43.95]你清澈的眼眸[00:43.95]ေတာက္ပလြန္းတဲ့ ဒီမ်က္လံုးေတြနဲ႔[00:47.2]就像银河里的星星[00:47.2]ဖမ္းစားညိႇဳ႕တက္တယ္ ေမ့လို႔မရႏိုင္[00:51.57]你如此迷人，让人难以忘怀[00:51.57]မရဲ႕အၿပံဳးေတြထဲ[00:53.16]你的笑容里[00:53.16]ထူးျခားလြန္းတဲ့ မရဲ႕အလွေတြလည္း[00:57.03]有种不同寻常的美[00:57.03]ဟိုးေရွးဘ၀ကေတာင္းဆုျဖစ္မယ္[01:00.03]一定是你前世修来的[01:00.03]႐ူးခဲ့ရသူ ရင္ထဲလည္း[01:05.38]内心疯狂的想念你[01:05.38]မရဲ႕အေၾကာင္းေတြ အခ်ိန္တိုင္းပဲ[01:12.25]每分每秒都在想你[01:12.25]ေက်ာင္း၀န္းထဲက အလွနတ္သမီးေတြလည္း[01:38.68]你就像校园里的女神一样[01:38.68]မရဲ႕အလွကုိ လံုး၀မမီွႏိုင္တယ္[01:45.07]你是世上最美的女孩[01:45.07]အရမ္းလွတဲ့သူ မ ရယ္[01:49.1]美丽的女孩[01:49.1]ခ်စ္ပါရေစေတာ့ကြယ္[01:55.52]让我爱上你吧[01:55.52]မရဲ႕အခ်စ္နဲ႔ျပည့္စံုၿပီေပါ့ တကယ္[01:63.48]有你的微笑我就心满意足了[01:63.48]ေက်းဇူးျပဳ၍ မမုန္းပါနဲ႔လားကြယ္[01:68.97]只求你不要讨厌我[01:68.97]ဒီကမ႓ာမွာ မတစ္ေယာက္သာ ေတာင္းတမိတယ္[01:75.42]在这世界上，只为你一个人着迷[01:75.42]က်ေနာ့္ရဲ႕ အခ်စ္အိမ္ထဲ[01:82.08]在我的心里[01:82.08]ေမ့လို႔မရတဲ့ အိပ္မက္ထဲမွာပဲ[01:86.63]即使在梦里也忘不了你[01:86.63]စိုးမိုးထားခဲ့ ဒီအၾကည့္ေတြနဲ႔[01:91.75]你看我的样子[01:91.75]႐ူးသြပ္ခဲ့ရတယ္[01:92.52]让我痴迷[01:92.52]မရဲ႕အလွမွာ ႐ုန္းလို႔မထြက္ႏိုင္ခဲ့[01:98.42]沉醉于你的美貌无法自拔[01:98.42]ထူးျခားလြန္းတဲ့ မရဲ႕အလွေတြလည္း[02:04.72]有种不同寻常的美[02:04.72]ဟိုးေရွးဘ၀ကေတာင္းဆုျဖစ္မယ္[02:07.07]一定是你前世修来的[02:07.07]႐ူးခဲ့ရသူ ရင္ထဲလည္း[02:08.95]内心疯狂的想念你[02:08.95]မရဲ႕အေၾကာင္းေတြ အခ်ိန္တိုင္းပဲ[02:14.5]每分每秒都在想你[02:14.5]ေက်ာင္း၀န္းထဲက အလွနတ္သမီးေတြလည္း[02:2.]你就像校园里的女神一样[02:2.]မရဲ႕အလွကုိ လံုး၀မမီွႏိုင္တယ္[02:22.47]你是世上最美的女孩[02:22.47]အရမ္းလွတဲ့သူ မ ရယ္[02:26.42]美丽的女孩[02:26.42]ခ်စ္ပါရေစေတာ့ကြယ္[02:27.35]让我爱上你吧[02:27.35]ထူးျခားလြန္းတဲ့ မရဲ႕အလွေတြလည္း[02:53.62]有种不同寻常的美[02:53.62]ဟိုးေရွးဘ၀ကေတာင္းဆုျဖစ္မယ္[02:59.63]一定是你前世修来的[02:59.63]႐ူးခဲ့ရသူ ရင္ထဲလည္း[02:60.62]内心疯狂的想念你[02:60.62]မရဲ႕အေၾကာင္းေတြ အခ်ိန္တိုင္းပဲ[02:66.42]每分每秒都在想你[02:66.42]ေက်ာင္း၀န္းထဲက အလွနတ္သမီးေတြလည္း[02:69.92]你就像校园里的女神一样[02:69.92]မရဲ႕အလွကုိ လံုး၀မမီွႏိုင္တယ္[02:76.1]你是世上最美的女孩[02:76.1]အရမ္းလွတဲ့သူ မ ရယ္[02:77.75]美丽的女孩[02:77.75]ခ်စ္ပါရေစေတာ့ကြယ္[02:80.02]让我爱上你吧[02:80.02]ထူးျခားလြန္းတဲ့ မရဲ႕အလွေတြလည္း[02:85.43]有种不同寻常的美[02:85.43]ဟိုးေရွးဘ၀ကေတာင္းဆုျဖစ္မယ္[02:88.47]一定是你前世修来的[02:88.47]႐ူးခဲ့ရသူ ရင္ထဲလည္း[03:00.55]内心疯狂的想念你[03:00.55]မရဲ႕အေၾကာင္းေတြ အခ်ိန္တိုင္းပဲ[03:25.13]每分每秒都在想你[03:25.13]ေက်ာင္း၀န္းထဲက အလွနတ္သမီးေတြလည္း[03:40.78]你就像校园里的女神一样[03:40.78]မရဲ႕အလွကုိ လံုး၀မမီွႏိုင္တယ္[03:66.85]你是世上最美的女孩[03:66.85]အရမ္းလွတဲ့သူ မ ရယ္[03:72.58]美丽的女孩[03:72.58]ခ်စ္ပါရေစေတာ့ကြယ္[03:78.85]让我爱上你吧[03:78.85]ေက်းဇူးျပဳ၍ မရက္စက္လိုက္ပါနဲ႔[03:84.72]请不要拒绝我',
//theme: '#b7daff', //音频时的主题色
}
]
});- 更多参见Aplayer 官网
三、 添加到侧边栏
将外链插入到Hexo根路径的侧边栏文件中：
themes/next/layout/_macro/sidebar.swig ，即侧边栏友情链接
theme.links 这一项之后。
后更换到
themes/next/layout/_layout.swig
{% if theme.links %}
....省略部分代码
{% endif %}
<!-- 音乐 插件 -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
<!-- 音乐 插件 -->四、 修改搜索器
有了音乐搜索器
当然要稍稍修改下，使其用起来更便利些。
由于是PHP代码，自然不能在静态博客上使用，所以~~（爱怎么搭怎么搭吧）
修改 template.php文件，找到id为 j-main的form
【此处折叠】
<form id="j-main" class="am-form am-u-md-12 am-u-sm-centered music-main">
<a type="button" id="j-back" class="am-btn am-btn-success am-btn-lg am-btn-block am-radius am-margin-bottom-lg">成功 Get √ 返回继续 <i class="am-icon-reply am-icon-fw"></i></a>
<div class="am-g am-margin-bottom-sm">
<div class="am-u-lg-3">
<div class="am-input-group am-input-group-sm am-margin-bottom-sm" data-am-popover="{content: '音乐ID', trigger: 'hover'}">
<span class="am-input-group-label"><i class="am-icon-list-ol am-icon-fw"></i></span>
<input id="j-songid" class="am-form-field" readonly>
</div>
</div>
<div class="am-u-lg-3">
<div class="am-input-group am-input-group-sm am-margin-bottom-sm" data-am-popover="{content: '音乐地址', trigger: 'hover'}">
<span class="am-input-group-label"><i class="am-icon-link am-icon-fw"></i></span>
<input id="j-link" class="am-form-field" readonly>
<span class="am-input-group-btn">
<a id="j-link-btn" class="am-btn am-btn-default" target="_blank">
<i class="am-icon-external-link"></i>
</a>
</span>
</div>
</div>
<div class="am-u-lg-3">
<div class="am-input-group am-input-group-sm am-margin-bottom-sm" data-am-popover="{content: '音乐链接', trigger: 'hover'}">
<span class="am-input-group-label"><i class="am-icon-music am-icon-fw"></i></span>
<input id="j-src" class="am-form-field" readonly>
<span class="am-input-group-btn">
<a id="j-src-btn" class="am-btn am-btn-default" target="_blank">
<i id="j-src-btn-icon" class="am-icon-external-link"></i>
</a>
</span>
</div>
</div>
<div class="am-u-lg-3">
<div class="am-input-group am-input-group-sm am-margin-bottom-sm" data-am-popover="{content: '音乐歌词', trigger: 'hover'}">
<span class="am-input-group-label"><i class="am-icon-file-text-o am-icon-fw"></i></span>
<input id="j-lrc" class="am-form-field" readonly>
<span class="am-input-group-btn">
<a id="j-lrc-btn" class="am-btn am-btn-default" target="_blank">
<i id="j-lrc-btn-icon" class="am-icon-external-link"></i>
</a>
</span>
</div>
</div>
</div>
<div class="am-g">
<div class="am-u-lg-3">
<div class="am-input-group am-input-group-sm am-margin-bottom-sm" data-am-popover="{content: '音乐名称', trigger: 'hover'}">
<span class="am-input-group-label"><i class="am-icon-tag am-icon-fw"></i></span>
<input id="j-name" class="am-form-field" readonly>
</div>
</div>
<div class="am-u-lg-3">
<div class="am-input-group am-input-group-sm am-margin-bottom-sm" data-am-popover="{content: '音乐作者', trigger: 'hover'}">
<span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
<input id="j-author" class="am-form-field" readonly>
</div>
</div>
<div class="am-u-lg-3">
<div class="am-input-group am-input-group-sm am-margin-bottom-sm" data-am-popover="{content: '音乐图片', trigger: 'hover'}">
<span class="am-input-group-label"><i class="am-icon-tag am-icon-fw"></i></span>
<input id="j-pic" class="am-form-field" readonly>
</div>
</div>
<div class="am-u-lg-3">
<div class="am-input-group am-input-group-sm am-margin-bottom-sm" data-am-popover="{content: '音乐源', trigger: 'hover'}">
<span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
<input id="j-from" class="am-form-field" readonly>
</div>
</div>
</div>
<div class="am-g">
<div class="am-u-lg-12">
<section data-am-widget="accordion" class="am-accordion am-accordion-gapped" data-am-accordion='{ }'>
<dl class="am-accordion-item am-active">
<dt class="am-accordion-title">
Aplayer ：
</dt>
<dd class="am-accordion-bd am-collapse am-in">
<!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
<div class="am-accordion-content">
<textarea class="" rows="5" id="doc-ta-1"></textarea>
</div>
</dd>
</dl>
</section>
</div>
</div>
<div id="j-show" class="am-margin-vertical">
<div id="j-player" class="aplayer"></div>
</div>
</form>
修改
static.js文件，找到定义setValue函数的位置，在代码块中追加
【此处折叠】
$('#j-pic').val(data.pic);
$('#j-from').val(data.type);
$('#doc-ta-1').val(
'name: "'+ data.title +'",\n'+
'artist: "'+ data.author +'",\n'+
'url: "'+ data.url +'",\n'+
'cover: "'+ data.pic +'",\n'+
'lrc: "'+ data.lrc.replace(/\n|\r/g,"") +'",\n'
);五、 参考
GitHub-aplayer 简书 - Hexo添加Aplayer播放器 简书 - Hexo增加APlayer音乐播放功能 简书 - Hexo博客中插入音乐/视频/