如何在Eleventy的标签列表中添加描述、图片、日期等额外信息

算力阿峰

2026-6-12

实现Eleventy标签页展示文章额外数据

完全可行，你可以直接通过post.data访问文章front matter里的所有字段，包括desc、date和预览图片路径。只需要修改标签页面模板中的循环部分，把这些数据渲染出来即可。

以下是修改后的完整模板代码：

---
pagination:
  data: collections
  size: 1
  alias: tag
  addAllPagesToCollections: true
layout: blog
permalink: /blog/tag/{{tag | slugify }}/index.html
eleventyComputed:
  title: "{{ tag }}"
---

<br>
<p style="font-size:22px">Entradas con la etiqueta: <strong>{{ tag }}</strong></p><br>

<ul>
{% for post in collections[tag] %}
  <li style="margin-bottom: 2rem; list-style: none;">
    {% if post.data.previewImage %}
      <img src="{{ post.data.previewImage }}" alt="{{ post.data.title }} 预览图" style="max-width: 100%; height: auto;">
    {% endif %}
    <h3><a href="{{ post.url }}" style="color:blue">{{ post.data.title }}</a></h3>
    <p style="color: #666;">{{ post.data.date | date: "%Y年%m月%d日" }}</p>
    <p>{{ post.data.desc }}</p>
  </li>
{% endfor %}
</ul>

关键说明：

预览图片：假设你在文章front matter中用previewImage字段存储图片路径（比如/images/post-1-thumb.jpg），直接通过post.data.previewImage调用即可，用img标签渲染。
日期格式化：使用Eleventy内置的date过滤器将日期转为易读格式，你可以根据需求调整格式字符串（比如"%Y-%m-%d"对应2024-05-20）。
描述文本：直接输出post.data.desc即可展示front matter中定义的描述内容。