如何使用EJS和eleventy进行组件组合(包含在includes中)？

Question

我正在使用Eleventy，一个静态站点生成器来构建一个网站。它支持很多模板语言，但EJS看起来是最好的，因为它“仅仅是JavaScript"，除了我不知道如何进行组件组合，或者它是否可能。我们可以说，EJS文档严重缺乏。

我想要实现的类似于你在React或Vue中使用props.children或<slot>所做的事情，在那里你可以组合组件，但这里显然是用分式来完成的。

例如，假设我有一个网格项部分，它接受它可以呈现的大小，它的标记名和“孩子”，类似于：

<%- include('../grid-item', {
  size: '50',
  tag: 'li',
  children: ANOTHER-INCLUDE,
}); %>

然而，即使是上面的例子也有一些限制，所以我真正想要实现的是：

<%- include('../grid', {
  tag: 'ul',
}, () => { %>
  <%- include('../grid-item', {
    size: '50',
    tag: 'li',
  }, () => { %>
    <div>ANY MARKUP</div>
  <% }); %>
<% }); %>

这个是可能的吗？我是不是从错误的角度来处理这个问题？

Eleventy支持使用Nunjucks和Liquid的Paired Shortcodes解决这个问题，但这两种模板语言似乎都有严重的局限性，比如你甚至不能创建数据对象。

Answer 1

您可以使用Javascript Template Functions来实现这一点。

我设置了一个在我的.eleventy.js配置文件中导入的components.js文件。该组件文件被传递给eleventyConfig对象，然后定义如下组件：

eleventyConfig.addJavaScriptFunction("componentName", function(props) { … });

然后，您可以通过this访问js模板中的该函数。

module.exports = function(data) {
  return `
    <div>
      ${this.componentName(props)}
    </div>
  `;