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. 可根据需求删减多余站点模块、资讯模块

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。