使用Vue2.js框架复写Hexo的hexo-theme-matery主题

Web开发

发布日期: 2022-09-13

作者: wzm

文章字数: 907

阅读时长: 3 分

阅读次数:

一、前言

二、项目基本配置

[^主要包括框架、UI组件库的选型及相关插件的运用。]:

1、框架

1.1 Vue2.js

2、UI组件库

2.1 AT UI

2.2 iView UI

2.3 Element UI

3、插件

3.1 Axios

3.2 Vue-Router

3.3 Vue-lazyload

3.4 particles-bg-vue

3.5 Vue-wechat-title

3.6 mavon-editor

3.7 aplayer

参考Hexo中hexo-theme-matery的主题，引用了该插件（当然更多的是为了尽可能还原，哈哈哈）。

3.7.1 安装

npm install aplayer --save

3.7.2 引入

import APlayer from 'aplayer'
import 'aplayer/dist/APlayer.min.css'

3.7.3 初始化数据及页面

使用（这里使用了AT UI中的“at-card”组件，指定其id名为“aplayer”，即在这个组件上进行Aplayer的初始化）

<div class="col-md-21">
    <at-card id="aplayer"></at-card>
</div>

data中定义接收歌单的对象数组以及播放器的基本配置

data() {
    return {
        timer: null,
        audio: [],
        info: {
            fixed: false, // 不开启吸底模式
            listFolded: false, // 折叠歌曲列表
            autoplay: false, // 开启自动播放
            preload: "auto", // 自动预加载歌曲
            loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
            order: "list", //  播放模式，list列表播放, random随机播放
            lrcType: 1,
            mutex: "true",
            listMaxHeight: '197px'
        },
    }
},

相关参数

名称	默认值	描述
container	document.querySelector(‘.aplayer’)	播放器容器元素
fixed	false	开启吸底模式, 详情
mini	false	开启迷你模式, 详情
autoplay	false	音频自动播放
theme	‘#b7daff’	主题色
loop	‘all’	音频循环播放, 可选值: ‘all’, ‘one’, ‘none’
order	‘list’	音频循环顺序, 可选值: ‘list’, ‘random’
preload	‘auto’	预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	-	音频信息, 应该是一个对象或对象数组
audio.name	-	音频名称
audio.artist	-	音频艺术家
audio.url	-	音频链接
audio.cover	-	音频封面
audio.lrc	-	详情
audio.theme	-	切换到此音频时的主题色，比上面的 theme 优先级高
audio.type	‘auto’	可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情
customAudioType	-	自定义类型，详情
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType	0	详情
listFolded	false	列表默认折叠
listMaxHeight	-	列表最大高度
storageName	‘aplayer-setting’	存储播放器设置的 localStorage key

在methods中写入初始化以及获取歌单数据的方法，因为数据来源是动态的，页面需动态操作Dom，所以我们需在mounted中去触发initAudio()的方法

methods: {
      initAudio() {
    // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
    const ap = new APlayer({
    container: document.getElementById("aplayer"),
    audio: this.audio, // 音乐信息 
    ...this.info, // 其他配置信息
    });
    console.log(this.audio.length)
    window.clearInterval(this.timer)
    this.timer = null
    },
    // 获取歌单数据
    async getAudio() {
        const {
        data: res
        } = await this.$http.get('bgm/allList')
        console.log(res)
        this.audio = res.list
        console.log(this.audio)
    },
}

在created中，触发获取歌单数据的方法

created() {
    this.getAudio()
},

初始化播放器时，需将数据先准备好，上述两个方法一个在mounted中触发，一个在created中触发，前者先于后者，因此此处触发需做一个延时的判断，数据获取到后，我们再初始化

mounted() {
    this.timer = setInterval(() => {
        if (this.audio == undefined || this.audio == null || this.audio.length <= 0) {
            console.log('this.audio 为空！')
        } else {
            this.initAudio()
        }
    }, 1000)
}

中文参考文档