源码系统概览
文章正文
ZYYO 主页 1.0 是一套开源的多风格个人主页源码，作者 ZYYO 基于 GitHub 上 xhofe 的主页改写。
整套源码是纯前端，不依赖任何框架，也不用后端，下载解压后双击 index.html 就能跑。
想拥有自定义首页或引导页的开发者可以直接拿去用，当练手项目也合适。
源码简介
ZYYO 主页 1.0 多风格简约低调个人主页源码，就是一套 HTML、CSS、JavaScript 写的静态引导页。
作者 ZYYO，灵感来自 GitHub 上 xhofe 与 ddiu 两位开源作者的个人主页。
代码开源在 GitHub 仓库 ZYYO666/homepage，本次同步分发没动源码，只是整理了文件结构。
页面提供三套主题：Blue 渐变、Light 白底、Dark 黑底，每套主题通过 CSS 变量切换配色。
主题状态会写入 cookie，刷新或下次访问时自动恢复上次的选择。
整套源码共 21 个文件，含 8 张项目图标、4 个 SVG 技能图与贪吃蛇动画资源。
没有后端、数据库、构建工具，适合直接扔到 GitHub Pages、Netlify、Vercel 这类静态托管上。
适用场景
个人主页：作为开发者的对外名片页，汇总博客、GitHub、邮箱、QQ 等联系方式。
项目导航：把常用项目、笔记、云盘、实验室放进首页，跳转集中。
引导页模板：二次开发改成产品引导页或工作室主页。
前端练手项目：阅读源码能学到 CSS 变量主题切换、SVG 路径遍历与 cookie 状态保存。
移动端轻展示：响应式布局支持手机端访问，技能图自动切换为移动版。
功能亮点
三主题切换：Blue 渐变背景、Light 白底、Dark 黑底，对应不同的 CSS 变量配色。
主题开关在右上角，点击循环切换 Light 到 Blue 到 Dark，状态写 cookie 保一年。
贪吃蛇动画：页面顶部跑动的绿色像素蛇，SVG 绘制，主题切换时同步换浅色或深色两版。
图标按钮：头部集成 GitHub、邮箱、捐赠、微信、B 站、主题切换六个 SVG 图标按钮。
微信与捐赠弹窗：点击对应图标弹出二维码图片层，关闭按钮在右上角。
WebSite 与 Projects 双区域：分别展示日常站点和开源项目，每项配独立图标卡片。
技能图自动切换：根据视口大小显示 PC 端一行多图标或移动端单列 SVG。
滚动渐显：项目卡片随滚动进入视口时加上 fade-in-visible 类，做出现动画。
F12 屏蔽：document.onkeydown 拦截 F12 键，oncontextmenu 阻止右键菜单。
备案号 footer：底部显示 ICP 备案号。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：HTML5、CSS3、JavaScript（原生 ES5），共 2 个 HTML、1 个 CSS、1 个 JS、4 | 依具体方案选型，需自行搭建与维护 |
| 部署方式 | 下载压缩包后解压到任意目录，例如 zyyo-homepage。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 三主题切换：Blue 渐变背景、Light 白底、Dark 黑底，对应不同的 CSS 变量配色。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：HTML5、CSS3、JavaScript（原生 ES5），共 2 个 HTML、1 个 CSS、1 个 JS、4 个 SVG、8 张 PNG、3 张 JPG
后端：无
数据库：无
运行环境：任意静态文件服务器（Nginx、Apache、IIS、CDN 均可）
其他依赖：无第三方 npm 包、无 jQuery、无 Vue/React，加载一个 51.la 统计脚本
安装与部署提示
下载压缩包后解压到任意目录，例如 zyyo-homepage。
本地预览：双击 index.html 即可在浏览器打开，无需启动服务。
远程部署：把整个目录上传到服务器 /var/www/html 或静态托管平台。
Nginx 配置示例：把 root 指向解压目录，监听 80 或 443，关闭目录索引即可。
修改个人信息：编辑 index.html 里的 favicon.ico、meta description、各项目链接与文字。
修改技能图标：替换 /static/svg/skillPc.svg 与 skillWap.svg，或前往 skillicons.dev 重新生成。
更换主题默认色：编辑 /static/script.js 里的 blueStyles、lightStyles、dackStyles 对象。
关闭统计：删除 index.html 底部的 51.la 脚本即可。
改备案号：编辑 footer 里的豫ICP备2023015852号-1 文字。
截图与演示说明
下图展示 ZYYO 主页 Blue 主题下的完整效果：
页面顶部是欢迎语 Hello, I am Zyyo 和 Full Stack Developer Studying at Sias 介绍行。
第二行是 The only way to do great is to love what you do 名言装饰。
图标栏从左到右依次是 GitHub、邮箱、捐赠、微信、B 站、主题切换开关。
下方是绿色贪吃蛇像素动画，主题为 Dark 时变白色像素版。
WebSite 区域展示四个常用站点：ZYYO 笔记、ZYYO 云盘、ZYYO 实验室、夏天网络工作室。
Projects 区域展示三个开源项目：ZYYO（Typecho 主题）、Homepage（当前主页本身）、Yang（多功能插件）。
底部是 skills 技能图，桌面端一行排列多图标，移动端换另一版单列展示。
想换主题，点右上角开关：Light 到 Blue 到 Dark 循环切换，颜色和贪吃蛇同步换。
常见问题
问：部署后访问显示 404？
检查路径是否在根目录，静态托管默认访问 index.html。若放在子目录，把 root 指到该子目录。
问：图标显示成方块或乱码？
SVG 是内联写在 index.html 里的，不依赖外部字体，但部分老浏览器对 SVG path 的 viewBox 解析不一致，建议用最新版 Chrome、Edge、Firefox 访问。
问：主题切换不生效？
浏览器禁用了 cookie 会导致状态丢失，主题会重置回默认值。检查浏览器隐私设置，允许本站写入 cookie。
问：怎么改二维码图片？
替换 /static/img/wx.jpg 和 /static/img/wxzsm.jpg 为自己的微信收款码和赞赏码，文件名保持不变。
问：能改成带 PHP 后台的版本吗？
本源码仅含前端，作者另提供收费的 PHP 后台版本。本源码包不含后台。
问：移动端访问布局乱？
检查 viewport meta 标签是否保留，index.html 已包含 width=device-width 等响应式设置。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
本资源来自开源作者 ZYYO 的 GitHub 仓库 ZYYO666/homepage，本次同步分发仅做格式整理，未改动源码。
演示站：https://zyyo.net
开源地址：https://github.com/ZYYO666/homepage
