如何在11ty分页模板中从WordPress API动态设置tags？

问题背景 #

我用11ty结合WordPress API搭建静态博客，已通过_data/posts.js获取文章数据，代码如下：

const EleventyFetch = require("@11ty/eleventy-fetch");

module.exports = async function() {
  const url = "http://www.some-url.com/wp-json/wp/v2/posts?per_page=100";
  const maxPages = 100;
  let page = 1;

  let responses = [];

  while (page <= maxPages) {
    const urlWithPage = `${url}&page=${page}`
    try {
      data = await EleventyFetch(urlWithPage, {
        duration: "1d",
        type: "json"
      })
    } catch(e) {
      break
    }

    responses.push(data);

    page++
  }

  responses = responses.flat(2);
  return responses;
};

每篇文章数据包含标签数组，示例：

tags: [ 'my_tag' ]

问题描述 #

我使用如下模板渲染文章，frontmatter配置如下：

---
layout: layouts/post.njk
title: Index
description: Starter pack for site.
pagination:
  data: readyPosts
  size: 1
  alias: tag
tags: tag.tags
permalink: "/{{ tag.slug | slug }}/"
---

{{ tags | log }}

但tag.tags被解析为纯字符串，日志输出为：

[ 'posts', 'tag.tags' ]

我需要的正确输出是：

[ 'posts', 'my_tag' ]

解决方案 #

YAML frontmatter会把tag.tags识别为纯字符串，无法解析成动态分页变量。推荐使用11ty官方提供的eleventyComputed字段来动态计算标签数组：

推荐方案 #

修改模板的frontmatter部分，用eleventyComputed替代直接设置tags：

---
layout: layouts/post.njk
title: Index
description: Starter pack for site.
pagination:
  data: readyPosts
  size: 1
  alias: tag
# 动态计算标签数组，合并固定标签与文章标签
eleventyComputed:
  tags: "{{ ['posts'].concat(tag.tags) }}"
permalink: "/{{ tag.slug | slug }}/"
---

{{ tags | log }}

其他可选方案 #

1. 仅使用文章自身标签：如果不需要固定添加posts标签，直接返回文章自带的标签数组

eleventyComputed:
  tags: "{{ tag.tags }}"

2. 正文手动合并标签：保留frontmatter的基础标签，在模板正文里手动合并数组

---
layout: layouts/post.njk
title: Index
description: Starter pack for site.
pagination:
  data: readyPosts
  size: 1
  alias: tag
tags: [posts]
permalink: "/{{ tag.slug | slug }}/"
---

{% set tags = tags.concat(tag.tags) %}
{{ tags | log }}

内容的提问来源于stack exchange，提问作者Oleksii Binetskyi