如何从自定义标签简码的代码中访问 11ty 中的页面前端数据？

如何解决如何从自定义标签简码的代码中访问 11ty 中的页面前端数据？

在 Eleventy (11ty) 中，页面源可以在其前端定义自定义数据。例如：

---
title: this is front-matter data
---
Page content
{% myCustomTag valueOfArg1 %}

自定义标记（在 Eleventy 中也称为短代码）根据配置的函数处理程序生成额外内容的地方：

eleventyConfig.addShortcode('myCustomTag',function(arg1) {
    // how can I access here the page front-matter data? E.g. "title"
    return `<div>...${ arg1 }...</div>`;
});

如何访问自定义标记（简码）代码中的页面前端数据？

我想要实现的是定义一个具有可选参数的自定义标记（简码）。如果未提供参数，则在最前面搜索参数：

---
arg1: my value
---
Page content
{% myCustomTag %}

和 myCustomTag 处理函数：

eleventyConfig.addShortcode('myCustomTag',function(arg1) {
    // if arg1 missing,search page front-matter for arg1
    // arg1 = arg1 || this.page.data.arg1 || 'default';
    return `<div>...${ arg1 }...</div>`;
});

解决方法

如果您使用带有 function 语法的短代码（又名不是箭头函数），该函数将可以访问 page data values 到 this (docs ).

不幸的是，无法访问前端内容，但您可以阅读文件并自己解析前端内容。 Eleventy 在内部使用 gray-matter，所以应该已经安装了。

const fs = require('fs')
const matter = require('gray-matter')

module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode('myCustomTag',function(arg1) {
    const str = fs.readFileSync(this.page.inputPath,'utf8')
    const data = matter(str).data
    console.log(data.arg1)
    // use data however you want
    return
  });
}

如果您要生成大量页面，可能使用 async shortcode（也可用于 Liquid）有帮助，但在我（非常有限的）测试中它没有产生太大的不同（尽管您必须自己尝试）。