html静态站点生成器（如eleventy、hugo）需在构建阶段通过模板变量（如{{ title }}或{{ .title }}）和front matter注入页面标题与描述，避免硬编码导致seo重复；同时应启用html压缩、正确配置标签及相对路径，并清理冗余data属性以优化体积与语义。
HTML构建时和<meta name="description">怎么动态注入
静态站点生成器（如 Eleventy、Hugo）本身不执行 JS，所以不能靠 document.title 运行时改标题。必须在构建阶段就把每个页面的 <title></title> 和 <meta name="description"> 写进 HTML 模板里。
常见错误现象：index.html 里硬编码了 <title>My Blog</title>，结果所有页面标题都一样，SEO 抓取时全变成重复内容。
- Eleventy：在模板中用
{{ title or page.fileSlug }}，再配合 front matter 为每篇 Markdown 设置title:和description: - Hugo：用
{{ .Title }}和{{ .Description }}，它们自动读取 markdown 文件头部的title和description字段 - 别漏掉 fallback：比如
{{ title or "首页" }}，避免某页没写title导致标题为空
如何让生成的 HTML 不带多余空格和换行
默认模板引擎（如 Nunjucks、Liquid）渲染时会保留源码里的换行和缩进，导致生成的 HTML 文件体积偏大、FMP（首次有意义绘制）略慢——尤其对首屏关键 HTML 来说，多几 KB 的空白字符会影响解析速度。
容易踩的坑：以为压缩 JS/CSS 就够了，但没处理 HTML 本身；或者开了“HTML 压缩”插件，却和语法高亮插件冲突，把 <pre class="brush:php;toolbar:false;"><code></code> 里的换行也干掉了。</pre>
- Eleventy：启用
htmlmin插件，并配置removeComments: true, collapseWhitespace: true, conservativeCollapse: false - Hugo：设置
minify = true在config.toml的[minify]区块下，它默认保留<pre class="brush:php;toolbar:false;"></pre>和<code>内容 - 手动验证：生成后打开
dist/index.html，用浏览器“查看页面源代码”，确认关键区块（如<header></header>开头）没有意外换行或空格
base 标签和相对路径在 GitHub Pages 子目录部署时怎么配
GitHub Pages 如果部署到 https://user.github.io/repo-name/（非根域名），所有 CSS、JS、图片路径都会以 /repo-name/ 为前缀。不处理好，就会出现 Failed to load resource: the server responded with a status of 404 ()。
典型错误：本地 file:// 打开一切正常，一推到 GitHub Pages 就 404；或者只修复了 CSS 路径，忘了 <link rel="icon"> 或 <img src>。
- 必须加
<base href="/repo-name/">到中（注意结尾斜杠） - 所有资源路径改用相对路径：
href="css/main.css"、src="img/logo.png"，而非/css/main.css - Eleventy 用户：在
.eleventy.js中设dir.output = "dist"，并确保模板里没写死https://绝对地址
为什么生成的 HTML 里还带着 data-* 属性或 class="js-xxx"
这些属性通常来自你引入的 JS 库（如 Alpine.js、Swiper）或构建时的开发辅助逻辑（比如调试用的 data-page-id）。它们不会影响功能，但会增大 HTML 体积、暴露内部结构、干扰 Lighthouse 评分。
容易被忽略的地方：以为“生成静态页就完了”，其实很多模板系统默认保留开发期注入的标记，尤其是当你用了第三方插件或自定义短代码时。
- 检查
_includes/或layouts/里的通用模板，删掉类似data-template="{{ page.templateKey }}"这类无实际用途的属性 - Hugo 用户注意
relURL和absLangURL函数生成的链接是否带了冗余参数 - Eleventy 可用
addTransform注册一个 HTML 清洗函数，在输出前移除特定data-属性
最麻烦的不是生成 HTML，而是让每个页面的语义、路径、体积都刚好落在“既轻又准”的临界点上——差一行 <base>，整个子目录部署就崩；少一个 fallback，SEO 就丢半页流量。动手前先跑一遍 curl -sI 看响应头，再开 DevTools 的 Network 面板盯住首屏资源加载链，比光看文档管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
