Plugins 你能在eleventy（11ty）插件中访问首页（或其他数据）吗

我正在创建（想创建）一个插件，可以根据页面数据自动生成开放图形图像。因此，在模板中：

---
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=函数（eleventyConfig）{
eleventyConfig.addLinter（“og图像生成器”，函数（内容、输入路径、输出路径）{
title=如何访问模板前端
createImage（标题）
});
}

但只能访问模板的内容、inputPath和outputPath

---

如何访问与模板关联的前端数据？还是有更好的方法来解决这个问题？

我也遇到了这个问题。我认为你现在想做的是不可能的。插件直接连接到构建步骤的方法不多：

• 转变
• 短绒

我认为事件将是最好的解决办法。但是，事件也没有收到足够的信息以结构化方式处理模板。对于您的用例，您还需要在这个钩子中获取结构化页面数据。或者eleventy需要为每个页面提供一个构建钩子。我建议打开一个新的特性请求问题，或者在上面我的问题中添加一个带有用例的注释，这样这些钩子就可以实现了

其他解决方案 另一个需要为插件用户进行更多设置的解决方案是将功能添加为一个模板，而不是应用于每个模板的自动脚本。这意味着插件的用户需要添加他们自己的模板，将相关数据传递到过滤器。当然，这也为用户提供了更精细的控制，这可能是有益的

我对我的网站使用类似的方法：

一个特殊的模板在所有帖子上循环并生成一个HTML文件，该文件用作生成的预览图像的模板。此模板由eleventy处理。（）

在构建步骤之后：我使用生成的HTML文件在目录中启动一个本地服务器，使用打开它们，并以编程方式拍摄一个与HTML模板一起保存的屏幕截图。然后删除HTML模板

这是集成到构建步骤中的，即

---

我已经将用于拍摄Puppeter屏幕截图的脚本发布为NPM包（），尽管它仍然是alpha版本。但是你可以查看它是如何工作的，也许它对你的插件有帮助。

回答我自己的问题。如前所述，这是不可能直接实现的。我找到了这个解决办法

eleventyComputed

允许您为键动态分配值。它还允许您调用自定义

可以将模板中的任何属性传递到短代码中。在本例中，

ogImageName

图像名称，ogImageTemplate是一个模板或背景图像，

text

是要在该背景上写入的文本

你甚至可以从你的前台传递其他的钥匙，并在你走的时候处理它们

---
layout: _main.njk
title: "Some title here"
eleventyComputed:
    ogImageName: "{% ogCreateImage { ogImageName: title | slug,  ogImageTemplate: 'page-blank.png', text: title } %}"
---

然后在

.eleventy.js

或插件中：

eleventyConfig.addShortcode（“ogCreateImage”，函数（道具）{
const imageName=props.ogImageName
const imageTemplate=props.ogImageTemplate
const imageText=props.text
console.log（'--------------ogCreateImage---------）；
log（`filename:${imageName}`）；
log（`using template:${imageTemplate}`）；
log（`with the text:${imageText}`）；
//调用图像创建代码-返回扩展名为的文件名
常量imageNameWithExtension=createOGImage（imageName、imageTemplate、imageText）
返回带有扩展名的ImageName
});

---

返回可在模板中使用的最终文件名。

Yeah发现这是不可能的。获得了一个使用短代码而不是过滤器的解决方案（见下文）。我用木偶代替木偶，所以不需要额外的构建步骤。