Eleventy + PairShortcodes 中的 Liquid 对象

Question

我正在使用 liquid 和 eleventy — 我想将一个对象传递给我的简码，但出现错误。

有了 nunjunks 你可以做类似的事情...

// .eleventy.js

config.addPairedShortcode('alert', function(content, options = {}) {
  const { variant = 'primary' } = options;
  return `<div class="alert alert-${variant}" role="alert">${content}</div>
});

然后我可以在我的模板中将警报传递为

{# index.njk #}

{% alert { variant: 'danger' } %}
  A danger alert
{% endalert %}

使用此简码可与我的液体模板一起使用，但我无法像使用 njk 模板那样将对象传递给简码。

我不确定我是否需要做类似的事情：

function(content, variant)

然后在我的液体模板中传递 {% alert "danger" %} — 我希望有一个对象，因为我计划有很多选项，这会让我很难看到我的模板中设置了哪些选项。

这是我在 liquid 模板中使用短代码时遇到的错误：

[dev:11ty  ] `TemplateContentRenderError` was thrown
[dev:11ty  ] > invalid syntax at line 1 col 1:
[dev:11ty  ]
[dev:11ty  ]   { variant: 'danger' }
[dev:11ty  ]   ^, file:./src/index.liquid, line:2
[dev:11ty  ]
[dev:11ty  ] `RenderError` was thrown
[dev:11ty  ] > invalid syntax at line 1 col 1:
[dev:11ty  ]
[dev:11ty  ]   { variant: 'danger' }
[dev:11ty  ]   ^
[dev:11ty  ]
[dev:11ty  ] `Error` was thrown:
[dev:11ty  ]     Error: invalid syntax at line 1 col 1:
[dev:11ty  ]
[dev:11ty  ]       { variant: 'danger' }
[dev:11ty  ]       ^
[dev:11ty  ]         at Lexer._token (/Users/Workspace/app/node_modules/moo/moo.js:533:13)
[dev:11ty  ]         at Lexer.next (/Users/Workspace/app/node_modules/moo/moo.js:480:19)
[dev:11ty  ]         at Function.parseArguments (/Users/Workspace/app/node_modules/@11ty/eleventy/src/Engines/Liquid.js:107:23)
[dev:11ty  ]         at Object.render (/Users/Workspace/app/node_modules/@11ty/eleventy/src/Engines/Liquid.js:177:33)
[dev:11ty  ]         at Object._callee$ (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:1851:55)
[dev:11ty  ]         at tryCatch (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:108:40)
[dev:11ty  ]         at Generator.invoke [as _invoke] (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:319:22)
[dev:11ty  ]         at Generator.prototype.<computed> [as next] (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:156:21)
[dev:11ty  ]         at step (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:25:30)
[dev:11ty  ]         at /Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:43:14

Answer 1

我明白了。在我的 _data 文件夹中，我添加了包含以下内容的 options.js 文件：

{
  "alert1": {
    "variant": "danger"
  }
}

然后在我的液体模板中我通过了：

{% alert options.alert1 %}
   danger alert
{% endalert %}

Eleventy + PairShortcodes 中的 Liquid 对象

Eleventy + Liquid object in PairShortcodes

object

liquid

shortcode

eleventy