问题标签 [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.
javascript - 如何使用 Eleventy 的灰质节选?
目标:为 Eleventy 博客的帖子列表中的每个帖子显示帖子摘录
我正在将此入门项目改编为我自己的博客。我指的是这个 Eleventy 文档 来获取帖子摘录。
我的代码:
根据上述文档,我首先编辑我的.eleventy.js以启用灰质摘录,如下所示:
接下来,根据示例,我在一些博客文章的第一段之后添加了“---”。
最后,我更新了 /_includes/postslist.njk以包含对每个帖子摘录的引用,因此我的新文件现在显示为:
但没有出现摘录。
我试过的
我检查了输出 HTML 中的空段落标签,但它们不存在,因此if
条件本身失败。
我尝试将摘录分隔符设置为默认“---”以外的其他内容,结果相同。
重要的是,我尝试禁用.eleventy.js中的摘录,这会导致分隔符被读取为常规降价。这很重要,因为它表明灰质正确地将博客文章中的分隔符读取为分隔符,因此问题一定出在我的 /_includes/postslist.njk中。
结论
如何引用 Eleventy 从灰质生成的摘录?
(PS:我没有足够的声誉来为gray-matter
npm 包创建 StackOverflow 标记,但恕我直言,如果有人想这样做也不错。我用 yaml-front-matter 标记了它,它并非完全不准确,但据我了解,我的问题非常具体到gray-matter
yaml 前端问题的方言。)
eleventy - 11ty 为每个数据文件渲染单个帖子
我希望 11ty 为每个数据文件生成一个页面,而不是通过迭代数据文件中的数据来生成多个文件。这可能吗?
我的用例是我有多个yaml
格式的职位描述:每个职位一个 yaml 页面。所以我想为每个数据文件生成一个页面。
我意识到我可以将所有的 yaml 数据作为前面的内容放在一个没有内容的页面中,但这感觉不对,因为我只有数据。
感谢您的任何指示。
storybook - 将 Storybook 与 Nunjucks (njk) 集成
我正在尝试在我的 nunjucks 项目中添加故事书。我的组件采用 njk 格式。我收到以下错误 -
您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders
这是我的故事书代码-
由于故事书根据他们的 Github 站点不支持 nunjucks,因此我也在为我的 nunjucks 组件寻找故事书的替代品。
谢谢您的帮助
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
我不知道如何处理文件以及我可以做些什么来做我打算做的事情。
eleventy - 十一:输出集合中的数据子集
我有一个产品集合,我希望从中输出图像轮播。我的前事包括以下内容……</p>
然后我的部分调用轮播。
但是,结果输出有空的 src 和 alt 属性?我不明白为什么?我唯一的猜测是它与我如何尝试循环遍历前端物质的子集有关?
在同一个产品集合中,我在前面定义了一个主图像......</p>
使用以下模板...</p>
这会产生所需的输出。
因此,为什么我认为item.data.carousel.image
会起作用?
static-site - 十一:在站点地图的永久链接中生成每个类别
我使用Skeleventy生成我的静态站点。
那里的 Njk 模板使用 collections.all 为所有可能的页面生成站点地图,就像这样
生成的站点地图中的输出之一是
这是所有可能页面的集合 - 有点乱。
例如,谷歌索引每个类别而不是“全部类别”会更好
但是我如何编辑该 njk 模板,以便它在站点地图中捕获和输出不同的类别?- 排除类别/全部 - 保留其他重要页面,如主页、每篇博客文章等。
eleventy - 如何设置 Eleventy (11ty) 以将工作静态站点输出到 _site 文件夹?
在过去的几年里,我一直在使用 Hexo.io 来生成我的静态网站。当我运行“hexo g”时,它会输出一个静态站点,我可以在没有服务器的情况下在本地打开。这就是我想要 11ty 做的事情。
将我的站点转换为 11ty 后,它在我使用本地开发服务器时效果很好。但是当我打开 _site > index.html 时,它无法正确呈现。所有样式、js 和图像都丢失了,因为它们都以“/”开头。
我觉得我错过了一些明显的东西。必须有一种方法可以设置 11ty 以输出工作的静态站点。
我一直在研究 11ty 文档和在线查看是否有其他人有这个问题。大多数情况下,我看到人们想要部署到子目录或使用 Netlify 之类的东西。我宁愿避免这种情况。
我尝试使用一个使用 pathPrefix 输出相对路径的 URL 过滤器。但似乎没有删除“/”的路径前缀。
任何建议将不胜感激。谢谢你。