KZHomePage一款二次元风格个人网站引导页静态模板

已更名为：KZHomePage,QQ群：962303102

功能

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

预览

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

下载

Github下载
 本站下载

使用方式

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

修改图片

在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://meting.170601.xyz";// 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>

更新日志

# 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. 支持两种播放器位置