一个以阅读为核心的博客，绝大部分内容没有必要等到 JavaScript 执行完才出现。这个示例项目把文章生成成 HTML，再用少量脚本补充交互。
主题切换
主题切换只需要三个步骤：
- 给根元素设置
data-theme。 - 使用 CSS 变量定义两套颜色。
- 用
localStorage保存读者的选择。
const root = document.documentElement;
root.dataset.theme = 'dark';
try {
localStorage.setItem('blog-theme', 'dark');
} catch {
// 隐私设置可能禁用存储，主题仍可以在当前页面切换。
}初始化脚本放在页面头部，可以减少深色主题的闪烁。如果没有手动选择，就跟随系统偏好。
静态搜索索引
在构建时，把已发布文章的标题、摘要、标签和地址输出为 JSON。读者真正发起搜索时，浏览器才加载这个索引。
搜索结果使用 DOM API 和 textContent 渲染，不把搜索关键词或文章元数据当成 HTML 注入。
当前搜索范围
这个博客的搜索匹配标题、摘要和标签，不是正文全文搜索。对于大量文章，可以后续接入 Pagefind 等静态全文搜索工具。
渐进增强
关闭 JavaScript，读者依然可以浏览文章、标签、归档和 RSS。只有搜索与手动主题切换需要脚本。
优先保证内容可读，再增加体验上的便利，通常比给每个页面装上复杂运行时更适合博客。