一直想拥有一个真正属于自己的「数字名片」——既要有干干净净的技术感，又能塞进一点二次元的小心思。看过很多个人主页模板后，我决定自己动手，于是就有了 indexpage：一个支持中英双语、明暗主题切换、纯静态零依赖的个人主页 / 链接聚合页。它原本只是我的自用页面，但迭代了几版之后觉得还挺通用，就把它开源了出来。

你可以在我的主页 lclty.cn 看到实际效果（当然，部署之后你会有自己的版本）。

indexpage 桌面端展示

✨ 它有什么特别的？

  • 🌗 三种主题模式：日间 / 夜间 / 跟随系统，一键切换，偏好自动保存到本地。
  • 🌐 完整双语支持：中文 / English 实时切换，所有文案通过一个 international.json 文件管理，添加新语言也很容易。
  • 📱 完全响应式：桌面、平板、手机全适配。移动端侧边栏会自动折叠，不遮挡内容。
  • ⏰ 实时时钟：左上角的小时钟显示当前时间，并且会告诉你本地的 UTC 偏移量。
  • 🛠️ 动态项目列表：你可以在 projects.txt 里随意增减按钮（博客、GitHub、状态页等等），支持 Font Awesome 图标和双语描述。
  • 💻 设备配置展示：用三个小表格分别展示台式机、便携设备、NAS 的硬件配置，结构清晰，适合喜欢折腾硬件的朋友。
  • 🔗 社交链接集成：Bilibili、GitHub、知乎、Steam、Telegram、X、YouTube、Wikipedia 等常见平台都已经留好位置，改个链接就能用。
  • 🎨 零依赖、纯静态：只用原生 HTML + CSS + JavaScript，不依赖任何框架或构建工具，下载下来就能跑。

移动端与深色模式

💡 为什么又做轮子？

市面上已经有很多好看的个人主页模板，但很难找到同时满足我这些需求的：

  • 简洁，好用，现在市面上的个人主页模板都太复杂了，光看个 readme 都要很长时间；
  • 轻量化且支持响应式，很多个人主页都用 PHP 去写了，那样太复杂了；
  • 所有资源本地化，包括图标库（Font Awesome 的字体文件我都打包进去了），避免因为 CDN 抽风导致图标全挂；
  • 维护成本低，不用去改 HTML。

于是花了一点时间，配合 Vibe Coding 辅助，从零搭了这套页面。CSS 变量做主题切换、data-i18n 属性配合 JSON 做国际化、fetch 拉取按钮列表……这些方法本身并不复杂，但组合起来之后，整个页面变得非常灵活，也很适合别人拿去二次修改。

🧱 技术实现小记

主题切换：CSS 变量 + 一点点 JS

所有颜色、阴影、圆角都定义在 :root、[data-theme="dark"] 和 [data-theme="light"] 里。切换按钮实际上只是修改了 <html> 标签的 data-theme 属性，浏览器会自动应用对应的变量。当前主题会被存进 localStorage，刷新也不会丢失。而且页面会先读取系统偏好（prefers-color-scheme），如果没有手动设置过，就跟着系统走。

1
2
3
4
5
6
7
8
:root {
  --bg: #f5f5f5;
  --text: #333;
}
[data-theme="dark"] {
  --bg: #1e1e2f;
  --text: #eee;
}

双语支持：一个 JSON 驱动所有文案

international.json 里按语言存放所有文本，每个需要翻译的元素加上 data-i18n="key"，JavaScript 会根据当前语言切换文本内容。这样不但维护方便，而且添加新语言只需要补上对应 JSON，不需要改 HTML 结构。

1
2
3
4
5
6
7
8
9
10
{
  "zh": {
    "profile-name": "洛辰",
    "profile-bio": "在校大学生，锦依卫一枚……"
  },
  "en": {
    "profile-name": "lclty",
    "profile-bio": "A college student and a VOCALOID fan..."
  }
}

动态项目按钮：像配置清单一样简单

projects.txt 的每一行定义了一个按钮，格式如下：

1
图标类$cut$链接$cut$中文描述$cut$英文描述

例如：

1
2
fa-solid fa-blog$cut$https://blog.lclty.cn$cut$个人博客$cut$Blog
fa-brands fa-github$cut$https://github.com/lclty$cut$GitHub$cut$GitHub

页面加载时会自动解析这个文件并生成按钮，语言切换时按钮文字也会跟着变。想临时隐藏某个链接？直接注释掉对应行就行。

编辑 projects.txt 添加按钮

🚀 怎么部署？

因为是纯静态，你可以把它扔到任何能托管 HTML 的地方。

GitHub Pages（推荐）

  1. Fork 仓库并推送到 main 分支。
  2. 在仓库 Settings → Pages 中，把 Source 设置为 main，文件夹选 / (root)。
  3. 稍等片刻，就可以通过 https://你的用户名.github.io/indexpage/ 访问了。

本地预览

直接双击 index.html 可能会因为浏览器的 fetch 跨域限制导致 projects.txt 加载失败，建议用本地服务器：

1
2
3
# Python 3
python -m http.server 8080
# 或者用 VS Code 的 Live Server 插件

🛠️ 二次自定义，改这几处就够了

我特意把容易变动的部分集中了起来，拿到手之后你只需要关注这几个地方：

  1. 个人信息 & 社交链接
    替换 myself.png 头像，编辑 international.json 里的 profile-name、profile-bio、location-text，以及在 index.html 中修改社交链接的 href。要增减平台，直接操作 <div class="social-links"> 里面的 <a> 标签就好。

  2. 右侧模块
    在 index.html 中找到 <section class="card"> ，想增删模块只需要增加/删除 card.

  3. 项目按钮
    上面已经说过，编辑 projects.txt，一行一个按钮。图标名可以去 Font Awesome 查找，免费图标足够用。

  4. 整体换肤
    打开 styles.css，修改 :root 和主题专属块里的 CSS 变量，就能一键改变配色、圆角、阴影，完全不用碰组件代码。

🌸 写在最后

这个项目最初只是为了满足我自己的「技术感+二次元」主页幻想，没想到打磨之后还挺顺手。如果你也是一个喜欢折腾、希望有个清爽个人页面的开发者或创作者，不妨试试看。有任何想法或改进，欢迎提 Issue / PR，一起来让这个小页面变得更好。

如果这个项目对你有一点点帮助，去 GitHub 点个 ⭐ Star 就是对我最大的鼓励啦。

感谢 Font Awesome 提供的优秀图标库，感谢 VOCALOID 社区带来的无限创意，也感谢 DeepSeek、ChatGPT、Gemini 等 LLM 提供的帮助。

Enjoy building your own homepage! 🌸