个人博客模板

纯静态个人博客模板，适合记录 AI 产品思考与技术教程。无需构建工具，直接用浏览器打开即可运行。

---

技术栈

技术	用途
HTML + CSS + JavaScript	纯静态，无框架依赖
Tailwind CSS (Play CDN)	样式系统，通过 CDN 引入
Lucide Icons	图标库，通过 CDN 引入
Google Fonts	Cormorant Garamond（标题）+ Outfit（正文）

---

文件结构

Blog/
├── index.html                # 首页（关于 + 最新文章预览 + 最新教程预览）
├── articles.html             # 全部文章列表页
├── tutorials.html            # 全部教程列表页
├── article_template.html     # 文章中文模板
├── article_template_en.html  # 文章英文模板
└── README.md

文章按日期存放在子目录中：

Blog/
└── YYYYMMDD/
    ├── YYYYMMDD_zh.html      # 文章中文版
    └── YYYYMMDD_en.html      # 文章英文版

---

页面说明

index.html · 首页

• 个人介绍，支持中英文一键切换
• 最新 3 篇文章预览，点击「查看全部」跳转 articles.html
• 最新 3 个教程预览，点击「查看全部」跳转 tutorials.html
• 切换语言后，所有页面跳转链接自动携带 ?lang=en 参数，保持英文状态

articles.html · 文章列表

• 展示全部文章，按时间倒序排列
• 每篇文章显示：分类标签、日期、标题、摘要
• 支持中英文切换；英文模式下文章链接跳转至英文版文章页
• 读取 URL ?lang=en 参数自动切换语言

tutorials.html · 教程列表

• 顶部精选系列卡片 + 教程列表
• 每条教程显示：难度标签（入门 / 进阶 / 高级）、时长、标题、简介
• 支持中英文切换；读取 URL ?lang=en 参数自动切换语言

article_template.html · 文章中文模板

新建中文文章时复制使用，包含以下组件：

组件	说明
顶部标签（chip）	文章分类标签
返回按钮	history.back() 返回上一页
文章标题 + 日期 + 阅读时长	Header 区域
引言段落	正文开头
section-num + h2	带大号数字的章节标题（01 / 02 / 03）
h3 子章节	章节内小标题
img-placeholder	图片占位框（虚线边框）
无序列表	带 teal 圆点的列表项
code-block	代码或系统提示词展示块
highlight-box	核心结论高亮引用块
section-divider	章节分割线
参考资料	底部引用链接列表

article_template_en.html · 文章英文模板

与中文模板结构完全一致，文案为英文。返回按钮使用 history.back() 返回上一页。

---

双语支持

语言切换机制

列表页（index.html、articles.html、tutorials.html）通过 data-i18n 属性 + JavaScript strings 对象实现全页文案切换：

function setLang(l) {
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const k = el.getAttribute('data-i18n');
    if (strings[l][k] !== undefined) el.textContent = strings[l][k];
  });
}

跨页面语言保持

切换为英文后，页面内所有跳转链接自动附加 ?lang=en，目标页面加载时读取参数并切换语言：

链接	中文	英文
查看全部文章	articles.html	articles.html?lang=en
查看全部教程	tutorials.html	tutorials.html?lang=en
返回首页	index.html	index.html?lang=en
文章详情	YYYYMMDD_zh.html	YYYYMMDD_en.html

文章详情页

中英文各自独立的 HTML 文件（_zh.html / _en.html），直接写对应语言内容，不依赖 data-i18n 机制。

---

发布文章流程

1. 按文章日期建立子目录，复制对应模板：

   YYYYMMDD/
   ├── YYYYMMDD_zh.html   # 复制自 article_template.html
   └── YYYYMMDD_en.html   # 复制自 article_template_en.html
   

2. 替换模板中的占位内容：

   • <title> 中的文章标题
   • 顶部 chip 分类标签（产品思维 / AI 洞察 / 技术观察 / 思考随笔）
   • header 中的标题、日期、阅读时长
   • 各节正文、图片、代码块、列表、参考资料

3. 在 articles.html 列表顶部添加一条文章行，填写标签、日期、标题、摘要，href 指向对应文章文件。

4. 在 index.html 首页「最新文章」区域更新第一条预览行（标题、日期、zh/en 链接）。

5. 英文版翻译：使用 /translate-docs skill，指定源文件和目标文件路径即可自动完成翻译。