Eleventy Nunjucks扩展模板中Block渲染为空问题求助

问题根源 #

你遇到的block内容为空问题，核心是布局文件目录拼写错误及模板继承路径不匹配：

1. 子布局文件所在目录拼写错误（layous应为layouts），导致Eleventy无法正确识别模板继承关系；
2. 子布局的{% extends %}路径未对应父布局的实际位置。

具体修复步骤 #

1. 修正目录名称
   将_includes/layous/重命名为_includes/layouts/，确保子布局文件路径为_includes/layouts/page-blog.html。

2. 调整子布局的继承路径
   父布局base.html位于_includes/layouts/目录下，子布局需正确指向该路径，修改page-blog.html代码：

   {% extends "layouts/base.html" %}
   {% block test %}
   <a href="#">Test Link</a>
   {% endblock %}
   

3. 验证页面的layout设置
   确保页面文件（如blog/index.html）的frontmatter配置正确：

   ---
   layout: "layouts/page-blog.html"
   title: "Blog Page"
   ---
   <!-- 页面自定义内容 -->
   

原理说明 #

Eleventy默认从_includes目录加载模板，Nunjucks的{% extends %}路径基于该目录解析。目录拼写错误会导致子布局无法继承父布局的block定义，修正路径后，Nunjucks可正确解析模板继承关系，渲染出你定义的block内容。

内容的提问来源于stack exchange，提问作者wcDogg