问题标签 [eleventy]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
sass - 十一：改变Sass输出层次
我正在使用11ty构建一个静态网站，我想使用 Sass。为此，我使用了 110-plugin-sass。它确实将 Sass 代码编译成 CSS 文件，但它会将输入层次结构复制到输出。
例如，在我的输入文件夹中，我有以下层次结构：
当我运行npx @11ty/eleventy它编译成这个：
我想要类似的东西
这可以使用eleventy-plugin-sass吗？如果不是，那么实现这一目标的另一种方法是什么？
html - 切换到模板后，身体大小对高度变化没有反应
已解决：通过包含<!DOCTYPE html>在生成文件的开头。
不知道为什么，但我可以将它包含在基本模板中，但它不会显示在生成的 html 文件中。然而，如果我在浏览器中检查，它就在那里并解决了问题。
我正在将一个静态网站移植到一个使用模板的静态网站生成器。静态站点生成器是 Eleventy，我使用的是 Nunjucks 模板引擎。对于开发，我将 Visual Studio 实时服务器用于原始版本，并将 Browsersync 用于 Eleventy 端口。
在最初的实现中，我的样式工作正常。这张照片显示了我尝试实现模板后的问题：
. 我还添加了一个现场版本。在导航栏中启用暗模式以查看相同的内容（或检查以查看 html/body 元素未跨越整个高度并且主元素溢出）。
深色背景是<html>,<body>和<div id="theme-body">元素的高度。它应该扩展页面的整个长度（并且在我的原始实现中），但它仅在我将其插入我的基本模板后占用屏幕的高度，而<main>元素（包括我的卡片）超出身体。css 与工作版本相同。
我预计问题是因为我没有完全理解如何订购 css 声明和模板。高度似乎是在插入内容之前设置的，但我看不到解决方法。即便如此，我认为它仍然应该响应变化。
我已经设置了一个基本模板，其中包括我所有的元数据、导航、样式和页脚。然后我将我的索引页（带卡片的登录页）插入到导航和页脚之间的基本模板中。这是我的基本模板的缩短版本：
基地.njk
内容（在本例中是我的主页 - 硬编码 HTML）填充在该{{ content | safe }}部分中。生成的页面中的 HTML 结构与原始页面相同。
我试图在每个可能的位置将 html 和 body 的高度设置为 100%，最小高度为 100%，并且它始终将 100% 视为屏幕高度。这个 SO 答案中的任何建议都没有帮助，他们无法解释为什么他们以前会工作，但现在不行。
此外，这是 pastebin 中的一些 css。我也在使用 bootstrap，这个 pastebin 不包括。
javascript - 为什么 111 试图解析传递副本中的文件？
我添加了一个“脚本”文件夹作为传递副本到我的 Eleventy 站点，并在其中安装了一些 npm 依赖项，以便在页面加载时运行脚本。
所以我的 .eleventy.js 有一些这样的行：
但是当我运行时npx eleventy，我得到一个构建错误，上面写着，
为什么它试图在直通副本中“渲染液体”？（我认为传递副本的全部意义在于它不会尝试解析它们。）我如何让它停止？
shortcode - 数据内容中的 11 个简码未呈现
我需要能够在使用分页从全局数据返回的内容中使用自定义简码。
为了说明我正在尝试做的事情，请考虑以下数据源：
./site/data/article.js
** 注意 ** 注意{% jumpto %}上面代码中的使用
这是文章数据的模板...
./site/articles.njk
渲染时，它不会处理{% jumpto %}从article.content.
有没有办法将它注入article.content到模板中，以便将其视为模板代码？
nunjucks - 如何防止 11/nunjucks 在 for 循环中转义内容
当{% for ... %}在包含的 nunjucks 模板（例如{% include ... %}）中使用循环时，循环的生成内容将呈现在<pre><code>...</code></pre>块内。
这是包含的内容：
src/includes/recipe-ingredients.html
...这就是生成的内容：
为什么会发生这种情况，我该如何预防？
markdown - 11 个降价链接中相对路径的路径前缀
当我运行十一以从我的降价和模板构建静态页面时，如何为降价文档中定义的相对链接添加前缀。
我使用 ./docs 作为输出目录，从我的项目的 ./eleventy 目录中的 markdown 文档和 html 模板构建文档页面。
npx eleventy --input ./eleventy --output ./docs --formats=md
我怎么能在所有相对链接前面加上 /foo ？
我查看了构建命令的 url 过滤器和 pathprefix 选项，但我不明白。
我将在哪里设置 url 过滤器？在降价？在十一配置？
eleventy - 如何使用 11ty 在 _data 子文件夹中为每个 json 文件生成一页？
我正在尝试使用 11ty 为电影评论网站生成页面。我的 _data 文件夹的结构如下。
我希望有这样的输出。
我会满足于这样的输出。
但我不知道如何接近任何东西！有任何想法吗？这是我的 nunjucks 模板。TitleWithYear是每个 .json 文件中的一个属性。
编辑：这是一个显示问题的回购。
https://github.com/edmondbramhall/11ty-test1
如果没有永久链接行，它确实可以工作，尽管输出中没有我想要的文件夹结构。
编辑：在卢克的帮助下，这是我最终得到的分页属性。
我还为 slugify 创建了一个全局过滤器，通过.eleventy.js在我的项目的根文件夹中创建一个文件来提供一些设置，其中包含以下内容。
static-site - 使用 Eleventy 获取要在主页上显示的最新帖子
我正在深入研究静态站点生成器并尝试使用基本的 110 博客构建一个博客： https ://github.com/11ty/eleventy-base-blog
到目前为止，一切都很好，但我想知道如何让它在主页/索引页面上显示最新的帖子。
开箱即用，它将显示 3 个使用 nunjucks 的帖子的最新链接：
但是我想知道如何从posts目录中获取最新的降价帖子，看看它是否可以拉出来渲染。
我认为必须有一种方法可以像这样检查 nunjucks 中的日期（我知道这是错误的，但试图得到一个想法）：
无论如何，我知道这是可能的，但我仍在努力学习并寻求指向正确的方向。
javascript - 有没有办法在 Netlify 部署之间更新文件？
我有一个使用 11ty 构建的 Netlify 网站，其中某些数据存储在 Airtable 中。使用 Airtable，我的客户可以修改该网站上的某些信息（照片和其他一些信息），然后，在仍然在 Airtable 中时，按下一个按钮，该按钮发送一个 webhook 以供 Netlify 使用来自的最新信息来重建网站空气桌。
对于图像，我有一个 Gulp 任务，在每个构建中：
- 查看“Images”Airtable 表中的所有记录（他们的 API 给了我文件名和 URL）并以 JSON 格式将它们列在一个变量中
- 然后它将这个列表与它在上次构建期间创建的列表进行比较，存储在一个文件中
(portfoliocache.json) - 如果这些列表相同，则意味着 Airtable 中的图像自上次构建以来没有更改，所以什么都不做，节省带宽。
- 但是，如果这些列表不同，它会删除我的“图像”文件夹中的所有文件，从 Airtable 下载它们然后优化它们，将新图像放在我的“图像”文件夹中。
portfoliocache.json被新列表覆盖。这需要一些时间并消耗一些 Netlify 构建时间，所以我只在 Airtable 图像已更改时才这样做。
这在我的本地 Node.js 环境中效果很好，但是由于 Netlify 使用 Git 存储库作为其源，它每次都需要相同的portfolioCache.json 和相同的“图像”文件夹，因此我的所有图像都会在每次 Netlify 构建时重新下载.
有没有办法portfoliocache在 Netlify 构建期间更新和保存我和我的“图像”文件夹，以便下一个构建具有最新的图像列表？也许有一种方法可以在构建期间更新我的 Git 存储库中的文件？
不确定在这里显示我的代码是否相关，但如果需要，我会很乐意。
eleventy - 十一中的嵌套导航
我的数据正在创建许多分页帖子。我的前面的事情如下：
我希望我的导航 HTML 结构能够阅读
提前致谢。