组件提取与局部模板

随着 HTML 代码库不断增大，相同的标记片段会出现在许多页面中——网站页眉、页脚、导航、产品卡片、表单字段。复制粘贴会造成维护噩梦；修改页脚意味着必须编辑每个页面。

大多数服务器端模板语言（Jinja、Liquid、ERB、EJS、Handlebars、Twig）都支持包含指令：{% include "header.html" %} 或 <%- include("header") %>。构建过程或服务器会将部分模板内联到每个包含它的页面中。

JSX/TSX（React）、Vue 单文件组件、Svelte 组件和 Astro 组件以更强的语义表达了同一理念：组件封装了结构、样式和行为。它们会在构建时（SSG）或运行时（SSR/CSR）编译为 HTML。

请按用途对部分模板或组件分组：partials/layout/ 用于页眉/页脚/导航，partials/blocks/ 用于主视觉区块/功能区块/行动号召区块，partials/forms/ 用于字段/按钮/选择框。保持一致的组织方式，可以让部分模板库随着增长仍然易于浏览。

使用参数后，部分模板会变得更强大：{% include "button.html" with label="Save", variant="primary" %}。在部分模板内部，按名称引用这些参数。同一个模板可以在整个网站中渲染出不同的按钮。

对于包裹任意内容的部分模板（卡片、对话框），请使用插槽模式：Jinja 的 {% block content %}{% endblock %}、Twig 的 {% block %}、JSX 的 {children} 属性。外层部分模板提供外壳，使用者提供内部内容。

静态网站生成器（11ty、Astro、Hugo、Jekyll）会在构建时解析包含内容——部署后的 HTML 中没有模板语法。动态模板（PHP、Rails、Express+EJS）会在请求时解析——灵活但速度较慢。请根据内容是否需要针对每个请求动态变化来进行选择。

部分模板应携带自己的 CSS。页脚部分模板拥有 footer.css；按钮部分模板拥有 button.css。再结合一个只拼接页面实际使用的部分模板所对应 CSS 的构建步骤，就可以避免在所有页面加载每个组件的 CSS。

每个部分模板都应能够独立测试：使用不同数据进行渲染，并断言输出。Cypress 组件测试或 Jest 快照测试等工具同样适用于 HTML 部分模板。经过测试的部分模板可以安全修改，无需手动检查每个使用它的页面。

部分模板就是一个接口。更改参数名称、插槽约定或必需属性，会对每个使用者造成破坏性变更。请记录部分模板的接口，逐步弃用旧接口，并在重构前使用搜索工具找出每一处用法。

通过组合部分模板来构建页面：页眉 + 侧边栏 + 内容 + 页脚 + 分析部分模板。每个部分模板都小巧且专注；页面本身会变成一个负责将它们连接起来的轻量组装脚本。这样比 800 行的单文件 HTML 更容易理解。

要提取部分模板：找出各页面中重复的标记，将其复制到 partials/X.html，用包含指令替换每一处重复内容，并将调用方之间不同的值参数化。一次处理一个部分模板；代码库会逐步得到改善。

将重复的 HTML 片段（如网站页脚）提取为部分模板，主要好处是什么？

通过服务器端包含（Jinja、Twig、EJS）或框架组件（React、Vue、Svelte、Astro），将重复的 HTML 提取为部分模板或组件。通过参数传递数据，通过插槽进行组合。按用途分组，独立测试，并将部分模板的签名视为接口。逐步迁移——每次提取都会减少重复并提升可维护性。