已更名为:KZHomePage,QQ群:962303102

功能

  • 音乐播放支持在线解析歌单(基于meting)
  • Layer弹出层支持
  • 音乐播放器可选卡片模式和吸底模式
  • 接入一言API服务

预览

最新开发版本
最新稳定版本

下载

Github下载
本站下载

使用方式

  1. 下载最新压缩包,解压后使用任意编辑器修改index.html
  2. 修改配置信息
  3. 上传至服务器

修改图片

在index.html中找到以下代码,替换其中的图片链接即可。

    <style>
        body{
            /*背景图片URL 可使用随机图片API */
            background-image: url("https://bu.dusays.com/2022/06/04/629b0a2a89425.png"); 
        }
        .photo-bg {
            /* 卡片左侧图片 */
            background-image: url("https://bu.dusays.com/2022/06/04/629b0a2750921.jpg");
        }
    </style>

修改歌单

在index.html中找到以下代码,进行修改。


    <script>
        // 音乐设置
        let meting_music_api = "https://api.mizore.cn/meting/api.php";// meting api
        let music_server = "netease"; // 音乐服务:网易云 netease 参见 meting api支持的服务
        let music_type = "playlist"; // 歌曲类型:歌单playlist 单首歌曲 song  专辑 album
        let music_id = "20173709"; // 歌单ID或歌曲ID或者专辑ID 20173709 29732992
        let music_order = "random"; // 音频循环顺序, 顺序播放: 'list', 随机播放:'random'
        let music_mini = false; // mini模式 吸底模式开启后此选项实效 true / false
        let music_fixed = false; // 吸底模式
        let music_volume = 0.7; // 默认音量
        let music_autoplay = false; // 自动播放
        let music_loop = "all"; // 音频循环播放, 可选值: 'all', 'one', 'none' ,分别为全部循环,单曲循环,不循环
    </script>

配置导航按钮

导航按钮依赖kz-nav-btn类,删除后按钮功能将会失效

导航按钮支持在标签中修改相应的属性,可以实现弹窗显示、当前标签页打开或者新标签页打开
找到index.html中的导航按钮组区块

<!-- 导航按钮组 -->
<button data-href="//www.kezez.com" data-title="Blog" data-window="pop" data-anim="4"
    data-area-w="80%" data-area-h="90%" data-shade="false"
    class="kz-nav-btn btn btn-primary col-lg-4">Blog</button>

<button data-href="https://github.com/kaygb/KZHomePage" data-title="GitHub" data-window="newtab"
    data-anim="4" data-area-w="80%" data-area-h="90%" data-shade="false"
    class="kz-nav-btn btn btn-secondary col-lg-4">GitHub</button>

<button data-href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected]"
    data-title="Blog" data-window="pop" data-anim="4" data-area-w="80%" data-area-h="90%"
    data-shade="false" class="kz-nav-btn btn btn-success col-lg-4">Send a Mail</button>

<!-- end 导航按钮组 -->

修改按钮的以下配置即可

data-href="//www.kezez.com"  // 要打开的链接
data-title="Blog"            // 标题
data-window="pop"            // 窗口模式,可选:pop(弹窗显示) current(当前页打开) newtab(新标签页打开)
data-anim="4"                // 窗口动画效果,可选值:1 2 3 4 5 6 具体效果可以手动尝试
data-area-w="80%"             // 窗口打开后所占的宽度
data-area-h="90%"            // 窗口打开后所占的高度
data-shade="false"           // 是否显示遮罩

修改导航按钮颜色

按钮颜色使用bootstraap4的颜色格式,只需要修改按钮对应的class类即可改变按钮颜色
https://v4.bootcss.com/docs/components/buttons/
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

image.png
image.png

更新日志

# 2022-09-17 v1.2.0
1. 导航按钮可以自定义配置了

# 2022-06-12 v1.1.1
1. 全新的Layer皮肤
2. 修改弹窗动画

# 2022-06-12 v1.1.0
1. 替换已经无法稳定服务的jsdelivr为本地和七牛静态CDN库
2. 调整细节样式
3. 支持背景图和卡片图的修改,现在无需修改css文件了

# 2022-03-29 v1.0
1. 新增歌单自定义设置
2. 支持两种播放器位置

依赖项目

https://github.com/metowolf/MetingJS

https://aplayer.js.org/

版权声明

原始模板来源:http://www.cssmoban.com/cssthemes/9357.shtml

版权声明
本文作者 珂泽
本文链接 https://www.kezez.com/archives/25.html
共享协议 CC BY-NC-SA 4.0
引用规则 非商业转载及引用请注明出处(作者、原文链接),商业转载请联系作者获得授权。
QQ 群组 962303102