您可以访问十一（11ty）插件中的页面前端（或其他数据）吗

Question

我正在创建（希望创建）一个 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。

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

Answer 1

回答我自己的问题。正如@moritzlost 提到的那样，这是不可能的。我找到了这个解决方法。

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

您可以将模板中您喜欢的任何属性传递到简码中。在这种情况下，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", 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
     });

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

Answer 2

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

• 变换
• 短绒
• Events

我认为事件是最好的解决方案。但是，事件也没有收到足够的信息来以结构化的方式处理模板。 I've opened an issue regarding this on Github。对于您的用例，您还需要在此挂钩中获取结构化页面数据。或者 111 需要为每个页面提供一个构建钩子。我建议打开一个新的功能请求问题或在我上面的问题中添加您的用例的评论，以便可以实现这些钩子。

其他解决方案

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

我对我的网站 processwire.dev 使用了类似的方法：

1. 一个特殊的模板循环遍历所有帖子并生成一个 HTML 文件，该文件用作生成的预览图像的模板。此模板由十一处理。 (source)
2. 在构建步骤之后：我在包含生成的 HTML 文件的目录中启动一个本地服务器，使用 puppeteer 打开它们并以编程方式截取与 HTML 模板一起保存的屏幕截图。然后删除 HTML 模板。
3. 这通过custom script（即executed after the eleventy build）集成到构建步骤中。

我已将用于使用 Puppeteer 截屏的脚本作为 NPM 包 (generate-preview-images) 发布，尽管它仍处于 alpha 阶段。但是你可以查看source code on Github 看看它是如何工作的，也许它对你的插件有帮助。