作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
目标:为 Eleventy 博客的帖子列表中的每个帖子显示帖子摘录
我正在适应 this starter project作为我自己的博客。
我指的是this Eleventy document
获取帖子摘录。
我的代码:
根据上述文档,我首先编辑我的 .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 */
接下来,根据示例,我在一些博客文章的第一段之后添加了“---”。
<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>
但没有出现摘录。
if
条件本身是失败的。
gray-matter
npm 包创建 StackOverflow 标记,但恕我直言,如果有人想这样做也不错。我已将其标记为
gray-matter
yaml 前端的方言。 )
最佳答案
根据文档,十一使摘录在 page
下可用。变量(参见 Eleventy supplied data ),而不是作为集合项的“顶级”属性。 page
变量是 data
的一部分集合项的对象。如果您使用 post.data.page.excerpt
而不是 post.excerpt
它将按预期工作:
{%- if post.data.page.excerpt -%}
<p>{{ post.data.page.excerpt }}</p>
{%- endif -%}
或者,您可以使用
excerpt_alias option使摘录可作为顶级属性使用。使用此配置,您的模板将按原样工作:
eleventyConfig.setFrontMatterParsingOptions({
excerpt: true,
excerpt_alias: 'excerpt',
});
关于javascript - 如何使用 Eleventy 的灰质节选?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63199630/
我是一名优秀的程序员,十分优秀!