源码系统概览
文章正文
新拟态个人主页网站源码是一套采用新拟态设计风格的静态个人站点模板。
新拟态风格以柔和的阴影、微凸的卡片和统一的圆角呈现出类似真实材质的视觉效果，适合用来展示个人简介、社交链接与时间历程。
整套源码不依赖任何后端框架，打开即用，方便没有服务器开发经验的用户快速搭建属于自己的个人主页。
对于想要一个干净简洁网络空间的同学来说，这类 HTML 模板系统既能满足展示需求，又保留了二次修改的灵活性。
源码简介
本套新拟态个人主页网站源码由作者景昇开发并基于 GPL-3.0 协议开源发布。
项目最早版本是作者在高三时期写下的，后续经过多次重构，在 2024 年完成了目录结构、样式与脚本的全面优化。
源码采用纯前端实现，不使用任何框架，页面数据通过 data.json 文件进行集中维护，包含社交图标列表 iconList、个人历程时间线 lineList 以及常用站点导航 siteList 三部分。
前端通过 assets/index.js 读取 JSON 数据并动态渲染到页面，新增链接或调整顺序只需要修改数据文件即可，无需改动页面结构。
整体视觉以新拟态为核心，配合可选的深色模式与背景音乐，提供了一个轻量而且有辨识度的个人主页方案。
适用场景
这套源码适合个人作品集展示、学生个人主页、博主关于页面以及小型团队的介绍页。
需要把社交账号、个人简介和常用站点集中在一个页面时，新拟态个人主页网站源码可以提供现成的布局与交互，省去从零设计的时间。
功能亮点
核心亮点包括新拟态视觉风格、顶部导航在首页、关于、历程、站点之间切换、基于 localStorage 的深色模式记忆、可选背景音乐、社交图标墙以及时间线展示。
所有内容由 data.json 驱动，改数据即可改页面，二次开发门槛很低。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 技术栈为 HTML5、CSS3 与原生 JavaScript，没有引入 Vue、React 等前端框架，也没有后端语言和 | 依具体方案选型，需自行搭建与维护 |
| 部署方式 | 部署时把源码目录整体上传到网站根目录或子目录即可，无需执行安装脚本或导入数据库。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 核心亮点包括新拟态视觉风格、顶部导航在首页、关于、历程、站点之间切换、基于 localStorage 的深色模式记忆、可 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
技术栈为 HTML5、CSS3 与原生 JavaScript，没有引入 Vue、React 等前端框架，也没有后端语言和数据库。
运行环境只需任意支持静态文件的 Web 服务器，例如 Nginx、Apache 或对象存储的静态托管。
浏览器需支持现代 CSS 变量与 ES6 语法，主流的 Chrome、Edge、Safari 均可正常访问。
安装与部署提示
部署时把源码目录整体上传到网站根目录或子目录即可，无需执行安装脚本或导入数据库。
修改 data.json 中的图标、历程与站点信息就能完成内容定制。
若使用本地预览，建议通过本地静态服务器打开，直接双击 index.html 也可能因浏览器的本地文件限制影响部分脚本加载。
截图与演示说明
首页截图展示了一张带新拟态边框的头像与昵称信息区，右上角分别放置了音乐开关与深色模式切换图标，整体底色柔和，卡片以浅色阴影浮起。
关于页面截图呈现作者自我介绍与个人标签，采用缩进段落与勾选清单排版。
历程页面截图是一条竖向时间线，按时间倒序列出了域名注册、备案成功等关键节点。
站点页面截图则是常用网址导航卡片墙，点击即可在新窗口打开对应站点。
深色模式开启后，页面底色转为深灰，阴影与高光反向，辨识度依然清晰。
常见问题
问：如何更换自己的头像与昵称？答：替换 assets/images 下的头像图片并修改 index.html 中的对应文本即可。
问：深色模式为什么没有记忆？答：该状态保存在浏览器 localStorage 中，清缓存或更换设备后会恢复默认。
问：能否增加更多导航栏目？答：可以，扩展 index.html 的导航与 section 结构，并在 index.js 中补充渲染逻辑。
安全风险提示
本源码以 GPL-3.0 协议发布，二次分发与修改时须保留原作者版权声明，并以相同协议开放。
天气等增强功能若接入第三方接口，请注意相关密钥与隐私政策。
源码本身为静态文件，不上传服务器执行权限相关代码，整体风险较低，但仍建议从可信来源获取并在上线前核查外部资源链接。
下载说明
本页面提供的新拟态个人主页网站源码仅用于学习与个人展示用途，请在遵守 GPL-3.0 协议的前提下使用。
下载后请保留源码内的版权与许可信息，不要将作者署名移除。
本说明不包含任何下载链接，请以站内提供的下载入口为准，使用过程中如涉及第三方图标或字体，请遵循各自开源许可。