Eleventy、Nunjucks 和短代码 performance/syntax 任意多个项目
Eleventy, Nunjucks, and shortcode performance/syntax for arbitrarily many items
我正在创建一个 Eleventy 短代码(主要用于降价),它接受任意数量的参数,然后在吐出所有内容之前对它们应用格式。它隐约看起来像这样:
eleventyConfig.addShortcode("theShortcode", function(...args) {
let list = '';
args.forEach( function( listItem) {
list += '<li>' + listItem + '</li>';
});
return list;
});
然后你对任意数量的项目做这样的事情:
{% theShortcode "item1" "item2" "item3" %}
所以我不认为这是生成此内容的最用户友好的方式。至少,我怀疑在一般情况下,项目列表会很长并且在编辑器中变得难以阅读。有没有更聪明的方法来获得相同的结果,或者我可以在这里使用更好的语法?
如果你所有的短代码只是创建一个列表,为什么不把它们写在普通的 markdown 中呢? Markdown有个syntax for ordered and unordered lists,毕竟:
- unordered list item 1
- unordered list item 2
- unordered list item 3
1. ordered list item 1
2. ordered list item 2
3. ordered list item 3
如果您的示例被简化并且您实际上需要输出自定义 HTML,这在普通降价中是不可能的,您可以改用 paired shortcode。它可以做与常规短代码相同的事情,但成对的短代码允许您在开始和结束标记之间编写纯内容,这样更容易阅读。例如,这是您的列表简码作为配对简码:
eleventyConfig.addShortcode("makelist", content => {
const items = content.split(/\r\n|\r|\n/).filter(Boolean);
const list = items.map(item => `<li>${item}</li>`);
return `<ul>${"\n"}${list.join("\n")}${"\n"}</ul>`;
});
您可以在短代码的开始标记中向函数添加更多参数并传递参数(例如在有序列表和无序列表之间切换)。像这样使用它:
{% makelist %}
list item 1
list item 2
list item 3
{% endmakelist %}
我正在创建一个 Eleventy 短代码(主要用于降价),它接受任意数量的参数,然后在吐出所有内容之前对它们应用格式。它隐约看起来像这样:
eleventyConfig.addShortcode("theShortcode", function(...args) {
let list = '';
args.forEach( function( listItem) {
list += '<li>' + listItem + '</li>';
});
return list;
});
然后你对任意数量的项目做这样的事情:
{% theShortcode "item1" "item2" "item3" %}
所以我不认为这是生成此内容的最用户友好的方式。至少,我怀疑在一般情况下,项目列表会很长并且在编辑器中变得难以阅读。有没有更聪明的方法来获得相同的结果,或者我可以在这里使用更好的语法?
如果你所有的短代码只是创建一个列表,为什么不把它们写在普通的 markdown 中呢? Markdown有个syntax for ordered and unordered lists,毕竟:
- unordered list item 1
- unordered list item 2
- unordered list item 3
1. ordered list item 1
2. ordered list item 2
3. ordered list item 3
如果您的示例被简化并且您实际上需要输出自定义 HTML,这在普通降价中是不可能的,您可以改用 paired shortcode。它可以做与常规短代码相同的事情,但成对的短代码允许您在开始和结束标记之间编写纯内容,这样更容易阅读。例如,这是您的列表简码作为配对简码:
eleventyConfig.addShortcode("makelist", content => {
const items = content.split(/\r\n|\r|\n/).filter(Boolean);
const list = items.map(item => `<li>${item}</li>`);
return `<ul>${"\n"}${list.join("\n")}${"\n"}</ul>`;
});
您可以在短代码的开始标记中向函数添加更多参数并传递参数(例如在有序列表和无序列表之间切换)。像这样使用它:
{% makelist %}
list item 1
list item 2
list item 3
{% endmakelist %}