HTML模块化继承：利用Nunjucks的block与extends维护主页的方法-html教程-PHP中文网

nunjucks 的 extends 和 block 是主页结构频繁变动时唯一可控的维护手段，通过提取 header、footer、sidebar 等公共区域为 layout.njk 中的语义化 block（如 head、header、main、footer），并让所有页面模板继承该布局，可实现一处修改、全局生效，避免硬编码导致的重复维护与不可追溯问题。

html模块化继承：利用nunjucks的block与extends维护主页的方法

直接说结论：Nunjucks 的 extends 和 block 不是“锦上添花”，而是主页结构频繁变动时唯一可控的维护手段——只要你不把 header、footer、sidebar 这些重复区域硬编码进每个页面。

主页结构改了，为什么改一个地方却要动十几个文件？

常见错误是把导航栏、页脚写死在 index.njk、about.njk、post.njk 里。一旦设计调整（比如加个新菜单项或换版权年份），就得逐个打开、逐个替换、逐个测试。

实际场景：Hexo 主题升级后，layout.njk 里新增了 data-skip="true" 属性，但你所有页面模板都没继承它 → 页面加载异常
根本原因：没有提取公共骨架，导致逻辑分散、修改不可追溯
正确做法：只保留一个 layout.njk 定义 HTML 骨架和公共区块，其他页面用 {% extends "layout.njk" %} 继承

怎么写一个真正可复用的 layout.njk？

关键不是“写得全”，而是“留得准”——只暴露必要且稳定的 block，不把具体样式或 JS 初始化塞进去。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

block 命名要有语义：用 head、header、main、footer，别用 content1 或 sectionA
给 block 设默认内容（比如 {% block head %}{% endblock %} 留空，{% block footer %}© {{ now | date('YYYY') }}{% endblock %} 提供兜底）
避免在 layout.njk 中写业务逻辑：不要放 {% if isPost %} 这类判断，那是子模板该干的事

示例片段：



  <title>{{ title or 'My Site' }}</title>
  {% block head %}{% endblock %}


  {% block header %}<header><nav>...</nav></header>{% endblock %}
  <main>{% block main %}{% endblock %}</main>
  {% block footer %}© {{ now | date('YYYY') }}{% endblock %}

子模板里 extends 路径写错，为什么报错信息不提示真实位置？

Nunjucks 默认报错只显示 Template render error: Template not found: ./layout.njk，但实际可能是路径、大小写、扩展名或目录权限问题。

路径必须相对于 views 目录（Koa）或 source/_layouts（Hexo），不是相对于当前文件 —— 比如 post.njk 和 layout.njk 同级，仍需写 {% extends "_layouts/layout.njk" %}
Hexo 用户注意：layout.njk 默认应在 themes/your-theme/layouts/layout.njk，而不是项目根目录
Windows 下大小写不敏感，Linux/macOS 敏感 —— LAYOUT.NJK 在服务器上会 404
确认 Nunjucks 配置中 autoescape 和 watch 开关不影响路径解析，它们只影响渲染行为

想让首页用特殊布局，但又不想复制整个 layout？

可以用动态 extends，但得小心上下文污染和编译缓存。

在路由层传入变量：await ctx.render('index', { layout: 'home-layout.njk' })
子模板里写：{% extends layout or 'layout.njk' %}
风险点：如果 home-layout.njk 里没定义某个 block（比如 sidebar），而父模板调用了 {{ super() }}，就会报错
更稳妥的做法：保持 layout.njk 为基座，在其内部用 {% if isHome %}...{% endif %} 控制局部差异，而非拆出新 layout 文件