你能在十一 (11ty) 插件中访问页面前端（或其他数据）吗
Can you get access to a pages front matter (or other data) in a eleventy (11ty) plugin
我正在创建（想要创建）一个 eleventy (11ty) 插件，它可以根据页面数据自动生成 Open Graph 图像。所以在模板中：
---
generate_og_image: true
image_text: "text which will be baked into the image"
og_image_filename: some_file_name.jpg
---
#some markdown
...
我可以通过插件处理我的 .eleventy.js 文件中的每个文件：
module.exports = function (eleventyConfig) {
eleventyConfig.addLinter("og-image-generator", function(content, inputPath, outputPath) {
title = HOW_TO_ACCESS_TEMPLATE_FRONT_MATTER
createImage(title)
});
}
但只能访问模板的内容、inputPath和outputPath
如何访问与模板关联的前题数据？或者有更好的方法来解决这个问题吗？
我也遇到过这个问题。我不认为你现在想做的是可能的。插件直接hook到构建步骤的方法不多：
- 变换
- Linters
- Events
我认为事件将是最好的解决方案。但是，事件也没有收到足够的信息来以结构化方式处理模板。 I've opened an issue regarding this on Github。对于您的用例，您还需要在此挂钩中获取结构化页面数据。或者 eleventy 需要为每个页面提供一个构建挂钩。我建议打开一个新的功能请求问题或在我上面的问题中添加你的用例的评论，以便可以实现这些挂钩。
其他解决方案
另一种需要为您的插件用户进行更多设置的解决方案是将您的功能添加为 filter 而不是应用于每个模板的自动脚本。这意味着您的插件的用户需要添加他们自己的模板，该模板将相关数据传递给您的过滤器。当然这也给了用户更多的精细控制，这可能是有益的。
我对我的网站使用了类似的方法processwire.dev:
- 一个特殊的模板遍历所有帖子并生成一个 HTML 文件，用作生成的预览图像的模板。此模板由 eleventy 处理。 (source)
- 构建步骤后：我在包含生成的 HTML 文件的目录中启动本地服务器，使用 puppeteer 打开它们并以编程方式截取与 [=46= 一起保存的屏幕截图] 模板。然后 HTML 模板被删除。
- 这已集成到带有 custom script that is executed after the eleventy build 的构建步骤中。
我已经发布了用于使用 Puppeteer 截取屏幕截图的脚本作为 NPM 包（generate-preview-images), though it's very much still in alpha. But you can check the source code on Github 看看它是如何工作的，也许它对你的插件有帮助。
回答我自己的问题。正如 @moritzlost 提到的那样，这是不可能的。我找到了这个解决方法。
eleventyComputed 允许您动态地为键分配值。它还允许您调用自定义 shortcode.
您可以将您喜欢的任何属性从模板传递到短代码中。在这种情况下，ogImageName 图像名称，ogImageTemplate 模板或背景图像，text 是要在该背景上写入的文本。
你甚至可以从你的 front matter 传入其他键并在你进行时处理它们。
---
layout: _main.njk
title: "Some title here"
eleventyComputed:
ogImageName: "{% ogCreateImage { ogImageName: title | slug, ogImageTemplate: 'page-blank.png', text: title } %}"
---
然后在.eleventy.js或插件中：
eleventyConfig.addShortcode("ogCreateImage", function(props) {
const imageName = props.ogImageName
const imageTemplate = props.ogImageTemplate
const imageText = props.text
console.log('-----------------ogCreateImage-----------------');
console.log(`filename: ${imageName}`);
console.log(`using template: ${imageTemplate}`);
console.log(`with the text : ${imageText}`);
// call the image creation code — return filename with extension
const imageNameWithExtension = createOGImage(imageName, imageTemplate, imageText)
return imageNameWithExtension
});
正在返回您可以在模板中使用的最终文件名。
我正在创建（想要创建）一个 eleventy (11ty) 插件，它可以根据页面数据自动生成 Open Graph 图像。所以在模板中：
---
generate_og_image: true
image_text: "text which will be baked into the image"
og_image_filename: some_file_name.jpg
---
#some markdown
...
我可以通过插件处理我的 .eleventy.js 文件中的每个文件：
module.exports = function (eleventyConfig) {
eleventyConfig.addLinter("og-image-generator", function(content, inputPath, outputPath) {
title = HOW_TO_ACCESS_TEMPLATE_FRONT_MATTER
createImage(title)
});
}
但只能访问模板的内容、inputPath和outputPath
如何访问与模板关联的前题数据？或者有更好的方法来解决这个问题吗？
我也遇到过这个问题。我不认为你现在想做的是可能的。插件直接hook到构建步骤的方法不多：
- 变换
- Linters
- Events
我认为事件将是最好的解决方案。但是，事件也没有收到足够的信息来以结构化方式处理模板。 I've opened an issue regarding this on Github。对于您的用例，您还需要在此挂钩中获取结构化页面数据。或者 eleventy 需要为每个页面提供一个构建挂钩。我建议打开一个新的功能请求问题或在我上面的问题中添加你的用例的评论，以便可以实现这些挂钩。
其他解决方案
另一种需要为您的插件用户进行更多设置的解决方案是将您的功能添加为 filter 而不是应用于每个模板的自动脚本。这意味着您的插件的用户需要添加他们自己的模板，该模板将相关数据传递给您的过滤器。当然这也给了用户更多的精细控制，这可能是有益的。
我对我的网站使用了类似的方法processwire.dev:
- 一个特殊的模板遍历所有帖子并生成一个 HTML 文件，用作生成的预览图像的模板。此模板由 eleventy 处理。 (source)
- 构建步骤后：我在包含生成的 HTML 文件的目录中启动本地服务器，使用 puppeteer 打开它们并以编程方式截取与 [=46= 一起保存的屏幕截图] 模板。然后 HTML 模板被删除。
- 这已集成到带有 custom script that is executed after the eleventy build 的构建步骤中。
我已经发布了用于使用 Puppeteer 截取屏幕截图的脚本作为 NPM 包（generate-preview-images), though it's very much still in alpha. But you can check the source code on Github 看看它是如何工作的，也许它对你的插件有帮助。
回答我自己的问题。正如 @moritzlost 提到的那样，这是不可能的。我找到了这个解决方法。
eleventyComputed 允许您动态地为键分配值。它还允许您调用自定义 shortcode.
您可以将您喜欢的任何属性从模板传递到短代码中。在这种情况下，ogImageName 图像名称，ogImageTemplate 模板或背景图像，text 是要在该背景上写入的文本。
你甚至可以从你的 front matter 传入其他键并在你进行时处理它们。
---
layout: _main.njk
title: "Some title here"
eleventyComputed:
ogImageName: "{% ogCreateImage { ogImageName: title | slug, ogImageTemplate: 'page-blank.png', text: title } %}"
---
然后在.eleventy.js或插件中：
eleventyConfig.addShortcode("ogCreateImage", function(props) {
const imageName = props.ogImageName
const imageTemplate = props.ogImageTemplate
const imageText = props.text
console.log('-----------------ogCreateImage-----------------');
console.log(`filename: ${imageName}`);
console.log(`using template: ${imageTemplate}`);
console.log(`with the text : ${imageText}`);
// call the image creation code — return filename with extension
const imageNameWithExtension = createOGImage(imageName, imageTemplate, imageText)
return imageNameWithExtension
});
正在返回您可以在模板中使用的最终文件名。