源码系统概览
文章正文
整套源码以单页 HTML 形式承载个人介绍、技能标签与社交入口，加载流畅、改动简单。
既适合前端工程师作为作品集门面，也适合普通用户搭建个人导航门户。
源码简介
本源码采用纯 HTML 加 CSS 加 JavaScript 构建，无后端、双击即可在浏览器预览。
PC 端通过 index.html 渲染主舞台，包含模拟 MacBook Air 装饰、个人姓名主标题、个人定位副标题、个人简介文本、头像轮廓等模块。
右侧集成 CSS 触发器面板，悬停姓名、定位、音乐、简介、头像五个分区会显示对应 position 样式说明，科技感十足。
底部社交图标支持微信二维码悬停、邮箱一键复制与 GitHub、QQ、Telegram、微博跳转。
内置 canvas 粒子背景动效，背景音乐独立放置在 music 目录。
移动端通过 uaredirect.js 自动跳转到 m 子目录的精简提示页。
所有 SVG 图标、Web 字体、jQuery 动效与 SuperSlide 滑动插件均可按需替换。
适用场景
适用于希望快速搭建个人门面页的前端工程师、独立开发者和设计师。
可作为个人作品集、博客导航页、自媒体联系方式聚合页。
也适合作为酷黑风设计风格的页面模板参考，复刻类似的科技感主舞台与社交图标矩阵。
功能亮点
1. 酷黑风全屏主舞台：纯黑底色搭配 OPPOSans 与庞门正道字体。
2. CSS 触发器面板：悬停姓名、定位、音乐、简介、头像时显示对应 position 样式说明。
3. 社交图标一键聚合：微信二维码悬停、邮箱复制、GitHub/QQ/Telegram/微博外链。
4. canvas 粒子动效：背景自动生成 250 个点位的漂浮动画。
5. PC 与移动双端适配：uaredirect.js 自动识别移动端 UA 并跳转。
6. 背景音乐独立配置：music 目录替换音频即可换曲。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：HTML5 加 CSS3 加 原生 JavaScript 加 jQuery 1.10.2 加 jQuery.Sup | 依具体方案选型，需自行搭建与维护 |
| 部署方式 | 下载并解压后无需复杂安装：本地可直接双击 index.html 预览。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 1. 酷黑风全屏主舞台：纯黑底色搭配 OPPOSans 与庞门正道字体。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：HTML5 加 CSS3 加 原生 JavaScript 加 jQuery 1.10.2 加 jQuery.SuperSlide 2.1.1 加 clipboard.min.js 加 respond.min.js 加 uaredirect.js
后端：无
数据库：无
运行环境：任意静态 Web 服务器或本地直接打开 index.html
其他依赖：Font Awesome 4.7.0 CDN、OPPOSans-B/M/R.woff2、PangMenZhengDao.woff2、pf.m4a
安装与部署提示
下载并解压后无需复杂安装：本地可直接双击 index.html 预览。
对外提供服务可将文件夹上传至任意静态主机（Nginx、Apache、CDN、对象存储均可）。
修改个人信息请编辑 index.html 内对应注释。
替换头像或微信二维码请将新图片放入 images 目录后同步修改 src。
替换背景音乐请将新音频放入 music 目录并修改 audio 标签的 src。
移动端文案请编辑 m/index.html。
自定义颜色主题请修改 css/style.css 主色变量。
截图与演示说明
下方为 PC 端酷黑风主舞台全貌预览，左上角 Logo 与站名、右侧关于我/朋友们导航滑块、居中姓名与定位、三枚 GIF 技能图标、右侧 CSS 触发器、底部社交图标矩阵一应俱全；
移动端 UA 跳转后会显示深色背景上居中“请使用 PC 端访问本站”的精简提示页。
常见问题
问：替换头像或微信二维码后不显示？
答：确认新图片已放入 images 目录并保持文件名与 src 一致。
扩展名要与实际格式匹配，PNG 用 png、JPG 用 jpg。
避免使用中文文件名以免部分浏览器编码异常。
问：背景音乐无法自动播放？
答：现代浏览器默认禁止音频自动播放，需用户点击页面上的“点我听音乐”按钮触发。
请确认 music/pf.m4a 存在，若替换为 mp3 请同步修改 audio 标签的 src 与 type 属性。
问：移动端打开显示了完整 PC 页面？
答：确认 js/uaredirect.js 已加载且未被注释。
该脚本通过 navigator.userAgent 判断移动端 UA 并跳转 m 目录，关闭 JS 或 UA 被改写都会导致直接渲染 PC 页面。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
本源码为开源个人模板，仅用于前端学习与个人主页搭建，请勿用于违法违规用途，下载后请在 24 小时内评估并保留必要的版权信息。