问题标签 [eleventy]

我有一个使用十一、tailwindcss 和 nunjucks 的静态站点。这是我的第一次，总的来说真的很喜欢它，但我仍然觉得布局有点混乱。

我想创建一个可重用组件的页面，每个组件有两个部分。组件的示例显示，然后在其下方包含要复制和粘贴的组件代码的 div。

在我的/src/utils/目录中，我添加了一个简单的切换功能来添加和删除类'block'（tailwindcss）

我不明白如何在我的/src/site/components.njk文件代码中访问该功能以将功能添加到我的页面。

大量冗长的谷歌和鸭鸭去查询没有返回太多信息，所以任何和所有的帮助表示赞赏

我有一个页面，我想使用日期作为标题。我看到永久链接允许您使用该数据，但是，我不能这样做以使用我的标题中的日期。有没有办法在 Eleventy 中做到这一点？

这{{date}}会在标题中返回。

我已经克隆了这 110 个：https ://github.com/anborg/eleventy-netlify-boilerplate

我正在尝试使用本地 git repo 启用 netlify CMS。

我希望在下面的屏幕截图中看到工作流部分（在内容和媒体之间）。我应该更改什么设置才能启用 Workflow ？

http://localhost:3000/admin/#/collections/blog

管理员\config.yml

.env

package.json 有代理

我正在使用带有 Nunjucks 的 Eleventy (11ty)。我有一些我正在尝试排序的 JSON 数据。Jinja 文档说您可以使用点符号按属性排序，但是当我尝试按 排序时address.city，没有任何反应：

如果我不使用点符号/按顶级字段 ( ) 进行排序，它确实name有效：

我的测试数据（testData.json）：

我正在使用 11ty 和 Nunjucks 开发一个静态站点。这是一家为认证考试（AWS 等）提供培训的公司，他们有大约 25 个认证培训课程，每个课程都有自己的数据。

我已经让它工作了，但我有一种强烈的感觉，那就是有一种更简单、更方便的方式来组织这些数据。每门课程的数据是这样的：

到目前为止，一切都很好。棘手的部分是课程大纲。它的组织方式如下：

每门课程大约 4-8 个主题。我目前用它们的独立名称来表示这些变量中的每一个，这使得这变得非常混乱。

请帮助我更好地组织这些数据（可能通过使用此处的对象或 JSON 文件？）。我本质上是在寻找一种将这些嵌套为对象的方法，以便以后更容易访问。任何帮助将不胜感激。谢谢！

所以我有一些来自 JSON API 的书籍数据。对于API中的一些项目，我在11ty创建了一个页面。我正在尝试列出 API 中的项目，并检查每个项目的slug字段是否与fileSlug我的本地页面集合中的 a 匹配。如果是这样，那么我可以输出到内容页面的链接；否则，只需从 API 输出书名。

这是我在 Nunjucks 中所拥有的：

我不明白的是，这对于 API 中的每个项目都会返回两次......对于 11ty 中没有相应页面的项目，它会返回Item only exists on API. Item only exists on API.. 对于确实有相应页面的项目，它返回Item exists locally. Item only exists on API..

任何想法为什么它总是为else声明返回 true？

在中创建自定义过滤器.eleventy.js：

我成功地运行了 Jekyll 和 Gatsby 站点，但是当我尝试 Eleventy 时，我遇到了问题。当我执行 中描述的快速启动过程时https://www.11ty.dev/docs/getting-started/，它成功地给了我这个输出：

但是，当我导航到此处列出的任何访问 URL 时，浏览器选项卡只会旋转几分钟，然后显示“此页面无法正常工作。本地主机没有发送任何数据。ERR_EMPTY_RESPONSE”。

我打开了编写的两个文件，并确认它们是正确的。

我试过 Chrome 和 Firefox。

我尝试使用npx @11ty/eleventy --serve --port=80818081 端口和其他几个端口更改端口并导航到该端口。

我已经在使用 iTerm2 的 2019 MacBook Pro 和 2013 MacBook Pro 上尝试了所有这些，并得到了相同的结果。

更多信息。我尝试了另一个我以前从未尝试过的静态站点框架的快速入门说明：Wintersmith。当我使用浏览器在 localhost 上预览生成的站点时，也会发生同样的事情。浏览器选项卡只是旋转，直到它获得 ERR_EMPTY_RESPONSE。

然后我回到我现有的 Jekyll 站点之一，以防万一它在 localhost 上也有 ERR_EMPTY_RESPONSE。但是，当我运行bundle exec jekyll serve它时，它会很好地显示在浏览器中。

我有 javascript 函数，我想同时运行服务器端和客户端。服务器端使用node.js并且可以很好地处理导入。

但是，客户端我想要一个带有内联 javascript 的脚本标签。为了实现这个目标，我知道我需要一个捆绑器来将模块拉入主脚本文件。我选择汇总来完成这项工作。

这是我尝试过的一个例子。我做了一个模块test.js。这是一个返回字符串的简单函数：

这是主要的 javascript 文件，main.js. 我要将test.js函数拉入的文件：

main.js这是捆绑后我想要的样子：

我想简单地将函数拉入文件中。

相反，汇总会产生以下结果：

代码比以前大得多，关键是模块没有合并到主文件中。它仍然是一个模块，但具有不同的语法。Rollup 有许多输出选项，都产生相似的结果。

这是我的rollup.config.js文件：

当然，对于了解正在发生的事情的人来说，这是预期的输出。但我不明白。

如何在构建时将 javascript 合并到一个文件中？

我忽略了一个更简单的解决方案吗？

编辑：使用commonjs模块并将输出格式设置为iife以下结果：

它有所不同，但结果仍然不包含测试功能。

在 Eleventy (11ty) 中，页面源可以在其前端定义自定义数据。例如：

其中自定义标签（在 Eleventy 中也称为短代码）正在根据配置的函数处理程序生成额外的内容：

如何在自定义标签（简码）的代码中访问页面前端数据？

我想要实现的是定义一个具有可选参数的自定义标签（短代码）。如果没有提供参数，则在 front-matter 中搜索参数：

和myCustomTag处理函数：

大家好， 我创建了一个小的 SVG 图标集，并希望使用Eleventy在一个页面上的一个文件夹中显示它们全部呈现。但同时，我需要 SVG 代码，因为用户应该能够快速将 SVG 代码复制到剪贴板。有一些用于 SVG 内容放置的插件，但我不能将它们与 110 个集合结合使用。

我能够将 SVG 代码放入带有110-plugin-svg-contents的 110 页中。但由于图标集将包含 200 多个图标，我真的不想单独复制和粘贴它们。

此外，我已经设法将文件夹中的所有 SVG 文件添加到集合中，但由于它应该是矢量图标集，我无法使用图像文件。

我想实现以下目标：

• 将所有 SVG 图标文件放在一个文件夹中
• 在该文件夹中创建所有 SVG 文件的集合
• 显示渲染的 SVG 内容（无<img>标签）
• 显示名称（不带扩展名的文件名）和 SVG 代码

出于测试目的，我将提供三个图标作为 SVG 代码示例：

我希望我的问题足够清楚，如果您有任何问题，请在评论中告诉我。提前感谢大家。