如何在 Eleventy 中使用 LiquidJS 布局块？

Posted 2023-03-06

【中文标题】如何在 Eleventy 中使用 LiquidJS 布局块？

【英文标题】：How do I use LiquidJS Layout Blocks in Eleventy?

【发布时间】：2021-10-20 08:46:18

【问题描述】：

根据https://liquidjs.com/tags/layout.html#Blocks LiquidJS 支持我可以从我的布局模板调用的布局块。

我的默认模板包含content 块。

当我尝试使用 % % 或 添加另一个名为“sidebar”的块并在我的 .md 文件中定义它时，它不会呈现。

11ty 是否支持开箱即用的布局块？

【参考方案1】：

所以我得到了这个工作，但我认为它有点乱。在谷歌搜索时，我发现人们说使用 Nunjucks，他们只有在不使用布局前端但明确告诉 Nunjucks 加载布局时才能使其工作（https://github.com/11ty/eleventy/issues/1467）。所以我在 Markdown 中尝试了类似的东西（记住 Liquid 是默认处理器）。

这里是 test2.md：

---
title: Test
---

% layout main %

% block content %
## this is test
<p>
 title 
</p>
% endblock %

% block sidebar %
my sidebar is awesome
% endblock %

请注意，我还必须包装我的主要内容。然后在我的布局中，我注意到： content 不再起作用。相反，我不得不使用这个：

% block content %% endblock %
 content 

这似乎在我的快速测试中是安全的，因为其他不使用定义的内容块的模板似乎工作正常。只是……小心点。

【讨论】：

作为后续，我写了一篇关于“附加”捕获的博文。能够将 2 个或更多块捕获到一个变量中的想法。事实证明，这也使它可用于布局。这可能更容易，也许？ raymondcamden.com/2021/07/12/…我打算根据这个用例写一个后续。

不错的解决方案。当我使用 .liquid 文件作为内容时有效，但是当我使用 .md 文件时，一些模板 html 被转义并呈现在代码和预标记块中。

更新：当我使用调用我的 .liquid 模板的 .md 文件时，所有内容（包括打开的 doctype 声明和标题内容）都会在自动生成的 html 正文标签中呈现。

我无法在我的测试中重现这一点。自动生成的正文标签？

好吧，我明白你的意思了 - 布局液体文件中的任何选项卡也会通过降价处理，并且内容会被转义。我通过删除标签“修复”了这个问题。