我构建了一个零依赖的作品集模板——以下是我的收获

Source: Dev.to

为什么选择零依赖模板？

• 设计师友好 – 没有 JSX、没有组件、没有状态管理。只需普通的 HTML 文件，直接在浏览器打开。
• 无需构建步骤 – 编辑文件，刷新浏览器。完成。
• 面向未来 – 没有废弃的包，没有破坏性更新，没有 npm audit 警告。
• 体积小 – 总计 300 KB（整个模板，而非仅 JavaScript 包）。
• 双语支持 – 俄语和英语，配有语言切换器，易于适配任意两种语言。
• 暗模式 – 切换按钮 + 自动系统偏好，存储在 localStorage 中。
• 案例研究布局 – 编号章节、统计网格、带缩放的图片灯箱、前后导航。
• 终端彩蛋 – 按 ~ 打开一个带设计语录的秘密终端。
• 设计系统叠加层 – 按 Shift+G 查看 12 列网格。
• 一键安装 – ./setup.sh 会询问你的姓名，生成 favicon，替换所有占位符。
• SEO 就绪 – Open Graph、JSON‑LD、站点地图、规范标签、hreflang。
• 可访问性 – ARIA、键盘导航、focus-visible、减少动画支持。

快速开始

git clone https://github.com/diyoriko/portfolio-template.git my-portfolio
cd my-portfolio
./setup.sh

脚本会提示输入：

• 你的姓名
• 域名
• 邮箱
• 社交链接

随后它会：

1. 将所有出现的 “Jane Smith” 替换为你的姓名。
2. 使用你的首字母生成 SVG favicon。
3. 更新 CNAME、sitemap 和 config.json。

设置完成后，提交更改并推送到 GitHub Pages。

暗模式架构

我最初只使用 prefers-color-scheme，但很快发现用户需要手动切换。最终的方案采用了双系统：

/* 自动模式 */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    /* 暗色主题变量 */
  }
}

/* 手动切换 */
html.dark {
  /* 暗色主题变量 */
}

经验教训： CSS 最终出现了重复。下次我会从一开始就使用 CSS layers 或单一基于类的方案。

处理硬编码颜色

我的第一遍实现到处散布 rgba(0, 0, 0, 0.08) 用于边框和阴影。暗模式下这些值会变得不可见，于是我改用 CSS 自定义属性：

:root {
  --border-color: rgba(0, 0, 0, 0.08);
}

/* 暗模式覆盖 */
html.dark {
  --border-color: rgba(255, 255, 255, 0.12);
}

经验教训： 从第一天起就定义变量，即使是看似“显而易见”的值。

演示与资源

• 在线演示： diyor.design（使用相同代码构建）
• GitHub 仓库： – fork、clone，或使用 “Use this template” 按钮
• 一键部署： GitHub 模板，可直接在 GitHub Pages 上使用

许可证

该模板采用 MIT 许可证 发布。如果你使用它构建了作品，欢迎分享你的成果！