如何使用 Eleventy 灰质的摘录?
How do I use an excerpt from Eleventy's gray-matter?
目标:为 Eleventy 博客的 post 列表中的每个 post 显示 post 摘录
我正在将 this starter project 改编成我自己的博客。
我指的是 this Eleventy document
获取 post 摘录。
我的代码:
我首先编辑我的 .eleventy.js 以根据上述文档启用灰质摘录,如下所示:
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.setDataDeepMerge(true);
eleventyConfig.setFrontMatterParsingOptions({ excerpt: true
});
/* file continues below */
接下来,根据示例,我在某些博客 posts 的第一段之后添加了“---”。
最后,我更新了 /_includes/postslist.njk 以包含对每个 post 的摘录的引用,因此我的新文件现在显示为:
<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
{% for post in postslist | reverse %}
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
<a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | htmlDateString }}</time>
{% for tag in post.data.tags %}
{%- if collections.tagList.indexOf(tag) != -1 -%}
{% set tagUrl %}/tags/{{ tag }}/{% endset %}
<a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a>
{%- endif -%}
{% endfor %}
{%- if post.excerpt -%}
<p>{{ post.excerpt }}</p>
{%- endif -%}
</li>
{% endfor %}
</ol>
但没有出现摘录。
我尝试过的
我检查了输出中的空段落标记 HTML,但它们不存在,所以 if
条件本身失败。
我试过将摘录分隔符设置为默认值以外的值
"---",结果相同。
重要的是,我尝试禁用 .eleventy.js 中的摘录,这会导致分隔符
被阅读为常规降价。这很重要,因为它表明灰质是正确的
在博客 posts 中读取我的分隔符作为分隔符, 因此问题一定出在我的
/_includes/postslist.njk.
结论
如何引用 Eleventy 从灰质生成的摘录?
(注:我没有足够的声誉为 gray-matter
npm 包创建 Whosebug 标签,但恕我直言,如果有人想这样做也不是一个坏主意。我已经用它标记
yaml-front-matter,这并非完全不准确,但据我了解,我的问题很严重
具体到 yaml front matter 的 gray-matter
方言。 )
根据文档,eleventy 在 page
变量下提供摘录(参见 Eleventy supplied data),而不是 [=25] 属性 的 'top-level' 属性 =] 项。 page
变量是 collection 项的 data
object 的一部分。如果您使用 post.data.page.excerpt
而不是 post.excerpt
它将按预期工作:
{%- if post.data.page.excerpt -%}
<p>{{ post.data.page.excerpt }}</p>
{%- endif -%}
或者,您可以使用 excerpt_alias option 将摘录作为 top-level 属性 提供。使用此配置,您的模板将按原样工作:
eleventyConfig.setFrontMatterParsingOptions({
excerpt: true,
excerpt_alias: 'excerpt',
});
目标:为 Eleventy 博客的 post 列表中的每个 post 显示 post 摘录
我正在将 this starter project 改编成我自己的博客。 我指的是 this Eleventy document 获取 post 摘录。
我的代码:
我首先编辑我的 .eleventy.js 以根据上述文档启用灰质摘录,如下所示:
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.setDataDeepMerge(true);
eleventyConfig.setFrontMatterParsingOptions({ excerpt: true
});
/* file continues below */
接下来,根据示例,我在某些博客 posts 的第一段之后添加了“---”。
最后,我更新了 /_includes/postslist.njk 以包含对每个 post 的摘录的引用,因此我的新文件现在显示为:
<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
{% for post in postslist | reverse %}
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
<a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | htmlDateString }}</time>
{% for tag in post.data.tags %}
{%- if collections.tagList.indexOf(tag) != -1 -%}
{% set tagUrl %}/tags/{{ tag }}/{% endset %}
<a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a>
{%- endif -%}
{% endfor %}
{%- if post.excerpt -%}
<p>{{ post.excerpt }}</p>
{%- endif -%}
</li>
{% endfor %}
</ol>
但没有出现摘录。
我尝试过的
我检查了输出中的空段落标记 HTML,但它们不存在,所以 if
条件本身失败。
我试过将摘录分隔符设置为默认值以外的值 "---",结果相同。
重要的是,我尝试禁用 .eleventy.js 中的摘录,这会导致分隔符 被阅读为常规降价。这很重要,因为它表明灰质是正确的 在博客 posts 中读取我的分隔符作为分隔符, 因此问题一定出在我的 /_includes/postslist.njk.
结论
如何引用 Eleventy 从灰质生成的摘录?
(注:我没有足够的声誉为 gray-matter
npm 包创建 Whosebug 标签,但恕我直言,如果有人想这样做也不是一个坏主意。我已经用它标记
yaml-front-matter,这并非完全不准确,但据我了解,我的问题很严重
具体到 yaml front matter 的 gray-matter
方言。 )
根据文档,eleventy 在 page
变量下提供摘录(参见 Eleventy supplied data),而不是 [=25] 属性 的 'top-level' 属性 =] 项。 page
变量是 collection 项的 data
object 的一部分。如果您使用 post.data.page.excerpt
而不是 post.excerpt
它将按预期工作:
{%- if post.data.page.excerpt -%}
<p>{{ post.data.page.excerpt }}</p>
{%- endif -%}
或者,您可以使用 excerpt_alias option 将摘录作为 top-level 属性 提供。使用此配置,您的模板将按原样工作:
eleventyConfig.setFrontMatterParsingOptions({
excerpt: true,
excerpt_alias: 'excerpt',
});