2

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

我想要实现的目标类似于您在 React 或 Vue 中使用props.childrenor执行的操作<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 解决此问题，但是这两种模板语言似乎都受到严重限制，例如您甚至无法创建数据对象。

4

1 回答 1

-1

你可以用Javascript Template Functions这个。

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

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

然后，您可以在 js 模板中使用该功能，方法是通过以下方式访问它this：

module.exports = function(data) {
  return `
    <div>
      ${this.componentName(props)}
    </div>
  `;
于 2020-08-24T13:52:50.637 回答