一种丰富而强大的JavaScript模板语言
使 JavaScript 函数可用于 Nunjucks 模板
使用 Eleventy 构建网站时，如何为我的 Nunjucks 模板提供 JavaScript 函数？ 假设我在 _includes 文件夹中有一个 Nunjucks 布局文件 my_layout.njk： 使用 Eleventy 构建网站时，如何为我的 Nunjucks 模板提供 JavaScript 函数？ 假设我在文件夹my_layout.njk中有一个Nunjucks布局文件_includes: <!doctype html> {% set targetItem = findItemById(items, itemId) %} <p>The value of the item with id {{ itemId }} is {{ targetItem.val }}.</p> 被调用的函数findItemById(items, id)在项目根文件夹的配置文件.eleventy.js中定义。我正在使用方法 addJavaScriptFunction()，如 Eleventy 的文档中有关 添加 JS 函数中所述。 module.exports = function(eleventyConfig) { eleventyConfig.addJavaScriptFunction("findItemById", function(items, id) { return items.find(item => item.id === id); }); }; 要处理的项目数组存储在文件夹items.json中的文件_data中： [ { "id": "a", "val": "foo" }, { "id": "b", "val": "bar" } ] 最后，我在项目的根文件夹中有一个液体模板文件item_b.liquid，用于使用 items 数组中的数据构建静态 html 页面。在构建网站时，我知道一个项目的 id 并且需要获取它的值。 --- layout: my_layout.njk itemId: b --- “_site”文件夹中所需的输出将是一个包含内容的 html 文件item_b/index.html <!doctype html> <p>The value of item with id b is bar.</p> 但是，Eleventy 找不到该函数findItemById。运行时 npx @11ty/eleventy 我收到错误消息： [11ty] Problem writing Eleventy templates: (more in DEBUG output) [11ty] 1. Having trouble writing to "_site/item_b/index.html" from "./item_b.liquid" (via EleventyTemplateError) [11ty] 2. (./_includes/my_layout.njk) [Line 1, Column 32] [11ty] Error: Unable to call `findItemById`, which is undefined or falsey (via Template render error) 我在 Fedora 38 Linux 上使用 Eleventy 版本 2.0.1。 据我所知，addJavaScriptFunction 不是 Eleventy 中的东西。但您可以创建一个过滤器来完成您想要的任务。假设 items 是一个数组，您可以创建一个过滤器，并在 Nunjucks 中调用它，如下所示： {% 设置 targetItem = 项目 | findItemById(itemId) %} 请参阅此页面了解更多信息： https://www.11ty.dev/docs/filters/ 此外，他们的 Discord 服务器上有大量 Eleventy 帮助，并且该网站上有 1,000 多篇关于 Eleventy 的博客文章。这里有一个专门关于过滤器的部分： https://11tybundle.dev/categories/filters/
在 Lume 中，使用 Nunjucks 是否可以避免渲染文档类型？ 我正在使用 Lume 创建 HTML 片段，用于另一个系统。 （我不会渲染整个 HTML 页面。） doctype
Eleventy 网站构建器：使 JavaScript 功能可用于 Nunjucks 模板
使用 Eleventy 构建网站时，如何为我的 Nunjucks 模板提供 JavaScript 函数？ 假设我在 _includes 文件夹中有一个 Nunjucks 布局文件 my_layout.njk： 使用 Eleventy 构建网站时，如何为我的 Nunjucks 模板提供 JavaScript 函数？ 假设我在文件夹my_layout.njk中有一个Nunjucks布局文件_includes: <!doctype html> {% set targetItem = findItemById(items, itemId) %} <p>The value of the item with id {{ itemId }} is {{ targetItem.val }}.</p> 被调用的函数findItemById(items, id)在项目根文件夹的配置文件.eleventy.js中定义： module.exports = function(eleventyConfig) { eleventyConfig.addJavaScriptFunction("findItemById", function(items, id) { return items.find(item => item.id === id); }); }; 要处理的项目数组存储在文件夹items.json中的文件_data中： [ { "id": "a", "val": "foo" }, { "id": "b", "val": "bar" } ] 最后，我在项目的根文件夹中有一个液体模板文件item_b.liquid，用于使用 items 数组中的数据构建静态 html 页面。在构建网站时，我知道一个项目的 id 并且需要获取它的值。 --- layout: my_layout.njk itemId: b --- “_site”文件夹中所需的输出将是一个包含内容的 html 文件item_b/index.html <!doctype html> <p>The value of item with id b is bar.</p> 但是，Eleventy 找不到该函数findItemById。运行时 npx @11ty/eleventy 我收到错误消息： [11ty] Problem writing Eleventy templates: (more in DEBUG output) [11ty] 1. Having trouble writing to "_site/item_b/index.html" from "./item_b.liquid" (via EleventyTemplateError) [11ty] 2. (./_includes/my_layout.njk) [Line 1, Column 32] [11ty] Error: Unable to call `findItemById`, which is undefined or falsey (via Template render error) 我在 Fedora 38 Linux 上使用 Eleventy 版本 2.0.1。 据我所知，addJavaScriptFunction 不是 Eleventy 中的东西。但您可以创建一个过滤器来完成您想要的任务。假设 items 是一个数组，您可以创建一个过滤器，并在 Nunjucks 中调用它，如下所示： {% 设置 targetItem = 项目 | findItemById(itemId) %} 请参阅此页面了解更多信息： https://www.11ty.dev/docs/filters/ 此外，他们的 Discord 服务器上有大量 Eleventy 帮助，并且该网站上有 1,000 多篇关于 Eleventy 的博客文章。这里有一个专门关于过滤器的部分： https://11tybundle.dev/categories/filters/
如何在 Eleventy + Nunjucks 中设置[未来、非当前]日期的格式？
我正在为当地乐队建立一个带有 CMS (Netlify) 的网站，他们将把未来的演出日期放在该网站上。到目前为止，日期显示为非常长的非格式化字符串，其中包括时间...
我是菜鸟。我正在使用 Prototype.KIT 框架使用 nunjucks 创建交互式 HTML 原型。 通常，我们使用以下方法将某些属性分配给 HTML 页面上的元素： 标签： { ...
如何防止eleventy/nunjucks在for循环中转义内容
当在 11ty 中包含的 nunjucks 模板（例如 {% include ... %}）中使用 {% for ... %} 循环时，循环生成的内容将在 ... 中呈现 当在 11ty 中包含的 nunjucks 模板（例如 {% for ... %}）内使用 {% include ... %} 循环时，循环生成的内容将呈现在 <pre><code>...</code></pre> 块内。 以下是包含的内容： src/includes/recipe-ingredients.html <aside id="ingredients" aria-label="ingredients"> <h3>Ingredients</h3> <ul> {% for ingredientData in recipe.ingredients %} <li><span class="measure">{{ ingredientData.displayQty }}</span> <span class="ingredient">{{ ingredientData.ingredient }}</span></li> {% endfor %} </ul> </aside> ...这就是生成的内容： <!-- Rest of generated HTML --> <aside id="ingredients" aria-label="ingredients"> <h3>Ingredients</h3> <ul> <pre><code><li><span class="measure">2</span> <span class="ingredient">cinnamon</span></li> <li><span class="measure">3/4</span> <span class="ingredient">sugar</span></li> </code></pre> </ul> </aside> <!-- Rest of generated HTML --> 为什么会发生这种情况以及如何预防？ <aside id="ingredients" aria-label="ingredients"> <h3>Ingredients</h3> <ul> {% for ingredientData in recipe.ingredients %} <li> <span class="measure">{{ ingredientData.displayQty | safe }}</span> <span class="ingredient">{{ ingredientData.ingredient | safe }}</span> </li> {% endfor %} </ul> </aside>
我编写了一个 Eleventy 短代码来获取图像的文件名（以及 alt 标签的文本等），并输出整个 srcset，使其成为响应式图像。 该网站是使用 Nunju 编写的...
我想将 Google for Jobs 添加到我的 11ty (11ty) 网站。我使用 Google Jobposting 架构作为参考，并将代码添加到 json 文件中。 json 文件： { “布局”：“jobpost.nj...
我正在使用 Eleventy 并使用 Posts。我已经使用以下格式在元数据中设置了日期 日期：2021年9月10日。 我可以使用显示完整日期 {{ 页面.日期 |可读日期 }} 但我想展示一下...
我正在使用 Eleventy 并在我的全局数据文件夹中创建了子文件夹 yummy，其中包含以下文件： \src\_data\yummy\drinks.json \src\_data\yummy ood.json 当我使用 {{ yummy | d...
你好:)我已经建立了一个基本的@11ty项目。我的模板是 .html，我的模板引擎是 njk。 虽然部分部分的 {% include %} 和布局的 {% Extend %} 按预期工作，但我无法得到 {% ...
如何根据用户是否提供了输入参数向步骤添加可选字段？我并不是在寻找要跳过的整个步骤，而只是在寻找一个参数。 在下面的例子中，我想要...
我是编程新手，我正在使用PHP作为后端并学习MVC，请问如果我们使用Twig，我们还需要像Nunjucks这样的前端模板引擎吗？据我所知，Nunjucks 是模板 e...
在反应中，我会将道具传递给模板。我该如何在 nunjucks 中做到这一点。例如，我想执行以下操作： 页： {% 设置幻灯片 = [ { "alt": "标记化可视化...
当我在此 nunjucks 宏的 set 语句中使用 collections.pages 时，以下代码有效。 collection_name 是/打印 collections.pages。如何在 las 中使用 collection_name 的值...
Nunjucks：带有多个“and”或“or”条件的“if”
今天我的队友正在努力解决如何在 Nunjucks 模板的 if 语句中添加带有“and”或“or”的多个条件。经过大量搜索后，他找到了答案，但在 Stackoverflow 上却找不到。我...
我有以下型号： 项目： { 一些Id1： { 属性1.... }, 一些Id2：{...}， 一些IdN：{...} } 我想在我的模板（nunjucks）中获得一个 for 循环...
我正在构建一个中等大小的 html/scss/ts 网站。由于它相当复杂，有很多重复元素（布局、重复块），我开始研究好的 SSG 选项（最终使用了 11ty...
在我的 gulpfile.js 中，我有以下两个函数，它们利用 gulp-nun-jucks 渲染 2 个不同的视图...... 函数 genNunJucks(cb) { 返回 src(paths.views.src) ...
我使用 vite 创建了一个项目，并在该项目上添加了 tailwind css。现在我想为模板添加 nunjucks。我在 vite.congig.js 文件上使用了 nunjucks 插件。这是这个。 导入 nunju...