【AI 分享月】H5自适应双风格个人主页/引导页源码

六娃

这是一款高颜值、双风格切换、自适应的个人主页/引导页静态网站，支持电脑端与手机端完美适配，集成加载动画、自定义右键菜单、背景音乐、随机一言、每日资讯、摸鱼日历、站点运行时长、社交链接、友情链接等多种实用功能，可直接部署使用，适合个人建站、引导页、导航主页、技术主页。 主要功能特性 1. 界面风格 - 双模式风格一键切换，支持简洁版主页跳转- 深色科技风UI，霓虹渐变文字、毛玻璃效果- 完美自适应，兼容PC端、平板、手机移动端- 移动端专属导航按钮，适配手机浏览 2. 交互特效 - 页面加载动画 Loading- 自定义右键菜单（返回、刷新、全屏、赞赏、关闭）- 图片弹窗预览功能（微信/公众号二维码）- 站点公告滚动栏- 侧边个人信息栏、个性签名、标签展示 3. 内置工具组件 - 网易云音乐播放器（MetingJS+APlayer）- 随机一言（Hitokoto）接口- 每日60秒读懂世界资讯接口- 摸鱼日历图片接口- 实时本地时钟+问候语- 网站运行天数、时分秒统计- 顶部滚动公告栏 4. 内容模块 - 旗下站点展示- 关联站点- 友情链接- 合作群组（TG/QQ群）- 更多工具站点/在线工具合集- 底部运行时长统计、时间展示 5. 社交入口 - GitHub、赞助、Twitter、个人博客、微信、公众号、TG频道 项目结构 plaintext ├── index.html # 主页面源码├── static/│ ├── css/ # 样式文件│ │ ├── style.css│ │ ├── root.css│ │ ├── Right.css│ │ ├── loading.css│ │ └── APlayer.min.css│ ├── js/ # JavaScript脚本│ │ ├── script.js│ │ ├── Right.js│ │ ├── loading.js│ │ ├── Meting.min.js│ │ ├── APlayer.min.js│ │ └── jquery.min.js│ └── img/ # 图片资源（logo、图标、背景、二维码、GIF动图）└── jianjie/ └── index.html # 简洁风格页面 使用说明 1. 部署方式 1. 将所有文件上传至服务器/静态网站托管（Nginx、Apache、Vercel、Netlify、Cloudflare Pages、宝塔面板等）2. 直接访问 index.html 即可打开主页3. 简洁风格页面访问： jianjie/index.html 2. 自定义修改教程 1. 基础信息修改- 标题、描述、关键词：修改 index.html 中 ＜title＞ 、 meta 标签内容- 个人名称、个性签名、坐标、标签：修改左侧个人信息区域- 网站域名、运行起始时间：修改底部运行天数脚本 08/08/2024 2. 链接修改- GitHub、TG、Twitter、博客、赞助地址、QQ群、友情链接等：直接替换 href 地址- 公告内容：修改顶部 marquee 滚动文字- 站点列表：修改 projectItem 内的标题、简介、跳转地址3. 图片资源替换- Logo、二维码、站点图标、背景图：替换 static/img/ 对应图片即可，保持文件名一致4. 音乐配置- 修改网易云歌单ID：找到 meting-js 标签 id=“2926227857“ ，替换为自己歌单ID 3. 接口说明（无需配置，自动请求） - 随机一言： https://v1.hitokoto.cn - 每日资讯： https://www.wudada.online/Api/ScD - 摸鱼日历： https://api.vvhan.com/api/moyu 环境依赖 - 纯静态HTML，无需后端，无需数据库- 浏览器原生支持，无需额外依赖- 依赖外部CDN：Font Awesome图标、MetingJS、jQuery 注意事项 1. 外部接口失效可自行替换同类型免费API2. 图片路径错误会导致资源不显示，部署时注意目录结构3. 右键菜单仅PC端生效，移动端自动屏蔽原生右键4. 可根据需求删减多余站点模块、资讯模块 下载地址https://pan.baidu.com/s/1WvNuloqoOaD1y82ZPLbKVw?pwd=6666