十一（11ty）数据分页 - 来自数据的标题答案

【问题标题】：Eleventy (11ty) Data Pagination - Title from data十一（11ty）数据分页 - 来自数据的标题
【发布时间】：2020-07-21 05:39:40
【问题描述】：

尝试使用数据设置分页，其中<head><title>{{ title }}</title></head> 中的{{ title }} 是projects.json中定义的当前页面的标题

假设这是可以做到的：

# main.njk

<head>
 <title>{{ title }}</title>
</head>

# page.njk
---
layout: main.njk
pagination:
    data: projects
    size: 1
    alias: project
permalink: "work/{{ project.title | slug }}/"
title: {{ project.title }}

可能误解了一些基本原理，但{{ title }} 呈现为[object, object]。固定链接工作正常...

【问题讨论】：

标签： pagination nunjucks yaml-front-matter eleventy

【解决方案1】：

在njk 文件中，一般不能在frontmatter 中使用数据变量或模板语法。

永久链接变量是一个例外。

见official Eleventy documentation about permalink

要解决您的问题，您可以：

将您的title 硬编码到您的page.njk 中
使用 javascript .11ty.js 模板文件，替换 page.njk 或 main.njk，或作为 main.njk 的布局。

.11ty.js文件一般可以在frontmatter中使用数据变量。

例如.11ty.js 文件在 frontmatter 中有一个变量：

let thing = "whatever";

class Sample {
    data() {// data() is the .11ty.js equivalent of frontmatter
        return {
        myCustomFrontmatterVariable: thing,
        };
    }
    render(data){
        return data.content;
    }
}

module.exports = Sample;

【讨论】：

【解决方案2】：

项目标题实际上可以在主模板main.njk 中使用{{ project.title }} 访问，就像在projects.json 中为该项目定义的任何其他项目数据一样。

对于任何其他页面（未定义为projects.json中的对象），可以使用条件语句：

<title>{{ project.title if project.title else title}}</title>

这样：

# main.njk

<head>
 <title>{{ project.title if project.title else title}}</title>
</head>

# page.njk
---
layout: main.njk
pagination:
    data: projects
    size: 1
    alias: project
permalink: "work/{{ project.title | slug }}/"
---

# other_page.njk
---
layout: main.njk
title: Other Page
---

# projects.json
[
    {
        "title": "Project 1"
    },
    {
        "title": "Project 2"
    }
]

输出：

# work/project-1/
<head>
 <title>Project 1</title>
</head>

# work/project-2/
<head>
 <title>Project 2</title>
</head>

# other-page/
<head>
 <title>Other Page</title>
</head>

【讨论】：

【解决方案3】：

现在eleventyComputed可以使用了

# main.njk
<head>
 <title>{{ title }}</title>
</head>

# page.njk
---
layout: main.njk
pagination:
    data: projects
    size: 1
    alias: project
permalink: "work/{{ project.title | slug }}/"
eleventyComputed:
    title: "{{ project.title }}"

【讨论】：

renderData 而不是 eleventyComputed 为我工作，但这似乎是一个不推荐使用的功能：11ty.dev/docs/advanced-order。是时候升级了。