■■Loading：《hugo装修日志05》■■

aplayer

突然很想在博客里放点喜欢的ost，遂选择了之前在友友博客里看到的aplayer，相关介绍和使用方法可以看aplayer的github项目仓库与相关的MetingJS，安装方式非常简单，只需要在layouts\partials\head.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的css，用格式转换网站转换格式后，复制到了static/css下进行了样式魔改，主要修改了颜色和动画效果，魔改好后，将之前引入的代码第一行的href后面改成你的css文件路径就可以生效了。我在博客中引用的基本是网易云音乐，代码如下。参数可以参考aplayer官方文档，和MetingJS傻瓜教程。

<meting-js
	server="netease"
    theme="#8aa2d3"
	type="song"
	id="4932570">
</meting-js>

为了显示歌词又放了一首。

全局歌单

通过开启aplayer的fixed参数，可以实现左下角全局音乐播放器，因为我想要设置自定义封面，所以先在网易云上下载好曲目，和需要的封面图片一起放在static/aplayer路径下。

之后在layouts\partials下新建music.html。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="music">
    <div id="player">
    </div>
</div>
<script>
    var ap = new APlayer
        ({
            element: document.getElementById('player'),
            fixed: true,
            autoplay: false,
            fixed: true,
            theme: '#8aa2d3',
            loop: 'all',
            order: 'list',
            preload: 'auto',
            volume: 0.7,
            mutex: true,
            listFolded: true,
            listMaxHeight: 50,
            lrcType: 0,
            music:[
            {
            name:'moment',
            url:'/aplayer/moment.mp3',
            artist:'dream',
            cover:'/aplayer/moment.png'},
            {
            name:'数式に囚われた者',
            url:'/aplayer/数式に囚われた者.mp3',
            artist:'dream',
            cover:'/aplayer/moment.png'},
            {
            name:'冥き水底 ～テンペスト：深部',
            url:'/aplayer/冥き水底 ～テンペスト：深部.mp3',
            artist:'dream',
            cover:'/aplayer/moment.png'},
            {
            name:'转瞬即逝',
            url:'/aplayer/转瞬即逝.mp3',
            artist:'dream',
            cover:'/aplayer/moment.png'},
            {
            name:'侦探事务所',
            url:'/aplayer/侦探事务所.mp3',
            artist:'dream',
            cover:'/aplayer/moment.png'},
            {
            name:'Musa',
            url:'/aplayer/Musa.mp3',
            artist:'dream',
            cover:'/aplayer/moment.png'},
            ]
    });
    //ap.init();
</script>
</body>

然后在head.html文件里渲染。

{{ partial "music" . }}

然后你就可以在博客左下角看到一只可爱的小熊玩偶带来的音乐啦！歌单不定期更新——