日期:2026年1月10日20时14分 摘要:将站点抽象为可复用的 header/sidebar/footer/content 构建组件,并加入 i18n 与 tracking 注入点,统一生成首页与 devlogs。
【question】 将网站分为header,sidebar,footer,content组件和部分,以便统一更新,例如多国语言,增加跟踪代码,同时需要很容易扩展语言支持。
【try to solve】
通过“构建时组件化渲染”落地:新增 scripts/site/ 下的布局与组件渲染模块(header/sidebar/footer/content),并提供 i18n(t(lang,key) 翻译字典 + 可配置语言列表)与 tracking 注入钩子(从环境变量注入 <head>/<body> 片段)。随后用统一构建入口 scripts/build-site.mjs 生成首页与 devlogs(索引页 + 每篇日志页),并将旧的 scripts/build-logs.mjs 变为薄封装以保持命令兼容。
多语言扩展:通过 SITE_LANGS=zh,en 启用多语言输出(默认仅 zh),页面支持生成 hreflang alternates,并在 header 中提供语言切换入口。
跟踪代码统一注入:通过 SITE_TRACKING_HEAD_HTML / SITE_TRACKING_BODY_HTML 配置后重新构建即可全站生效。
关键修复:避免 scripts/build-site.mjs 被 import 时执行入口逻辑(仅直接运行时执行 main),确保 npm run build:logs 只构建 devlogs,不会触发整站构建副作用。
【执行操作】
- 新增:
scripts/site/config.mjs、scripts/site/i18n.mjs、scripts/site/tracking.mjs、scripts/site/components.mjs、scripts/site/layout.mjs、scripts/site/pages/home.mjs - 新增:
scripts/build-site.mjs - 重构:
scripts/build-logs.mjs - 更新:
package.json(新增build:site)、README.md - 生成:
public/index.html、public/devlogs/index.html、public/devlogs/*.html