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. 外部接口失效可自行替换同类型免费API

2. 图片路径错误会导致资源不显示，部署时注意目录结构

3. 右键菜单仅PC端生效，移动端自动屏蔽原生右键

4. 可根据需求删减多余站点模块、资讯模块 

下载方式：