【免费开源】KZHomePage二次元卡片个人主页 功能音乐播放支持在线解析歌单（基于meting）Layer弹出层支持音乐播放器可选卡片模式和吸底模式接入一言API服务预览https://future.170601.xyz/KZHomePage/使用方式下载最新压缩包，解压后使用任意编辑器修改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=hi@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-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>源码下载{cloud title="迅雷云盘" type="xl" url="https://pan.xunlei.com/s/VOvKSFtgcUlwfl1CCDCCeEDFA1?pwd=ncgk#" password=""/}{cloud title="夸克网盘" type="qk" url="https://pan.quark.cn/s/7bc5d1096bb6" password=""/}{cloud title="百度网盘" type="bd" url="https://pan.baidu.com/s/1IT3EfSgPpeDs7747TuHY6w?pwd=wx1g" password=""/}{cloud title="Github" type="github" url="https://github.com/kaygb/KZHomePage/releases" password=""/}

【免费开源】NutssssIndex简约自适应主页 源码介绍Github@n0tssss这里是我个人主页的系列，我喜欢设计一下奇奇怪怪的东西练手，主打简约风格，并且独一无二，喜欢的欢迎点个 Star！有问题或者建议请留言 Issues！我的第一个个人主页，简约风格无 Js 自适应 示例站点https://www.szfx.top/intro源码下载{cloud title="迅雷云盘" type="xl" url="https://pan.xunlei.com/s/VOvKFnT4Nrg1WvlEZ9qfBk56A1?pwd=4rp4#" password=""/}{cloud title="夸克网盘" type="qk" url="https://pan.quark.cn/s/ad89a69b059e" password=""/}{cloud title="百度网盘" type="bd" url="https://pan.baidu.com/s/1-2sMDIFEKIY8VLjuR3Pgug?pwd=wx8i" password=""/}{cloud title="Github" type="github" url="https://github.com/n0tssss/NutssssIndex" password=""/}{cloud title="Gitee" type="gitee" url="https://gitee.com/n0ts/NutssssIndex/" password=""/}