问题标签 [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.

0 投票
1 回答
587 浏览

javascript - 如何使用 Eleventy 的灰质节选?

目标:为 Eleventy 博客的帖子列表中的每个帖子显示帖子摘录

我正在将此入门项目改编为我自己的博客。我指的是这个 Eleventy 文档 来获取帖子摘录。

我的代码:

根据上述文档,我首先编辑我的.eleventy.js以启用灰质摘录,如下所示:

接下来,根据示例,我在一些博客文章的第一段之后添加了“---”。

最后,我更新了 /_includes/postslist.njk以包含对每个帖子摘录的引用,因此我的新文件现在显示为:

但没有出现摘录。

我试过的

我检查了输出 HTML 中的空段落标签,但它们不存在,因此if 条件本身失败。

我尝试将摘录分隔符设置为默认“---”以外的其他内容,结果相同。

重要的是,我尝试禁用.eleventy.js中的摘录,这会导致分隔符被读取为常规降价。这很重要,因为它表明灰质正确地将博客文章中的分隔符读取为分隔符,因此问题一定出在我的 /_includes/postslist.njk中。

结论

如何引用 Eleventy 从灰质生成的摘录?

(PS:我没有足够的声誉来为gray-matternpm 包创建 StackOverflow 标记,但恕我直言,如果有人想这样做也不错。我用 yaml-front-matter 标记了它,它并非完全不准确,但据我了解,我的问题非常具体到gray-matteryaml 前端问题的方言。)

0 投票
2 回答
397 浏览

eleventy - 11ty 为每个数据文件渲染单个帖子

我希望 11ty 为每个数据文件生成一个页面,而不是通过迭代数据文件中的数据来生成多个文件。这可能吗?

我的用例是我有多个yaml格式的职位描述:每个职位一个 yaml 页面。所以我想为每个数据文件生成一个页面。

我意识到我可以将所有的 yaml 数据作为前面的内容放在一个没有内容的页面中,但这感觉不对,因为我只有数据。

感谢您的任何指示。

0 投票
1 回答
468 浏览

storybook - 将 Storybook 与 Nunjucks (njk) 集成

我正在尝试在我的 nunjucks 项目中添加故事书。我的组件采用 njk 格式。我收到以下错误 -

您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders

这是我的故事书代码-

由于故事书根据他们的 Github 站点不支持 nunjucks,因此我也在为我的 nunjucks 组件寻找故事书的替代品。

谢谢您的帮助

0 投票
1 回答
1189 浏览

nunjucks - 如何使用 Eleventy 将多个 Markdown 文件合并到 Nunjucks 模板中?

语境:

  • Eleventy 和 Nunjucks(和 Markdown)
  • 大量长文本(使用 Markdown 更容易创建/编辑)。
  • 复杂的布局。
  • SSG 还是新手

目标:

  • 使用 markdown 管理大量文本内容。
  • 将这些降价文件与模板部分一起使用。
  • 将部分组装成一个页面。

预期结果

处理的html页面:


尝试的动作

这是我到目前为止尝试过的...

(注意:为了便于阅读,我已经排除了我的 base.njk(html doctype shell)。)

1. NJK MAIN 和 NJK PARTIAL 包括

输入

目录结构

主布局.njk

内容 1.md

_layout-A.njk

内容 2.md

_layout-B.njk

结果

  • 目录结构“拆分”。
  • Markdown 内容未传递到父页面。父项中的空子标记。

主布局/index.html


我不知道如何处理文件以及我可以做些什么来做我打算做的事情。

0 投票
1 回答
167 浏览

eleventy - 十一:输出集合中的数据子集

我有一个产品集合,我希望从中输出图像轮播。我的前事包括以下内容……</p>

然后我的部分调用轮播。

但是,结果输出有空的 src 和 alt 属性?我不明白为什么?我唯一的猜测是它与我如何尝试循环遍历前端物质的子集有关?

在同一个产品集合中,我在前面定义了一个主图像......</p>

使用以下模板...</p>

这会产生所需的输出。

因此,为什么我认为item.data.carousel.image会起作用?

0 投票
1 回答
110 浏览

static-site - 十一:在站点地图的永久链接中生成每个类别

我使用Skeleventy生成我的静态站点。

那里的 Njk 模板使用 collections.all 为所有可能的页面生成站点地图,就像这样

生成的站点地图中的输出之一是

这是所有可能页面的集合 - 有点乱。

例如,谷歌索引每个类别而不是“全部类别”会更好

但是我如何编辑该 njk 模板,以便它在站点地图中捕获和输出不同的类别?- 排除类别/全部 - 保留其他重要页面,如主页、每篇博客文章等。

0 投票
2 回答
451 浏览

eleventy - 如何设置 Eleventy (11ty) 以将工作静态站点输出到 _site 文件夹?

在过去的几年里,我一直在使用 Hexo.io 来生成我的静态网站。当我运行“hexo g”时,它会输出一个静态站点,我可以在没有服务器的情况下在本地打开。这就是我想要 11ty 做的事情。

将我的站点转换为 11ty 后,它在我使用本地开发服务器时效果很好。但是当我打开 _site > index.html 时,它无法正确呈现。所有样式、js 和图像都丢失了,因为它们都以“/”开头。

我觉得我错过了一些明显的东西。必须有一种方法可以设置 11ty 以输出工作的静态站点。

我一直在研究 11ty 文档和在线查看是否有其他人有这个问题。大多数情况下,我看到人们想要部署到子目录或使用 Netlify 之类的东西。我宁愿避免这种情况。

我尝试使用一个使用 pathPrefix 输出相对路径的 URL 过滤器。但似乎没有删除“/”的路径前缀。

任何建议将不胜感激。谢谢你。

0 投票
2 回答
366 浏览

nunjucks - 页