Как сделать состав компонентов (включает в себя включает в себя) с EJS и одиннадцати?

Question

Я использую Eleventy, генератор статического сайта для создания сайта. Он поддерживает множество языков шаблонов, но EJS выглядит лучше всего в том смысле, что это "просто JavaScript", за исключением того, что я не могу понять, как составлять компоненты или вообще возможно ли это. Документы EJS, скажем так, сильно отсутствуют.

То, чего я хочу достичь, похоже на то, что вы делаете в React или Vue с props.children или же <slot> где вы составляете компоненты, но это, очевидно, будет сделано с частями здесь.

Например, скажем, у меня был частичный элемент grid, который принимал размеры, в которых он мог отображать, его имя тега и "children", что-то вроде:

<%- 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, но оба этих языка шаблонов кажутся строго ограниченными, например, вы даже не можете создать объект данных.

Answer 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>
  `;