Online Free Tools
  • Home
  • Dev Logs
Navigation
HomeDev Logs

将站点抽象为可复用的 header/sidebar/footer/content 构建组件,并加入 i18n 与 tracking 注入点,统一生成首页与 devlogs。 | Dev Logs

Back to Logs

日期: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
Online Free Tools · Learning project · Iterating