0

我正在创建（希望创建）一个可以根据页面数据自动生成 Open Graph 图像的十一（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 = function (eleventyConfig) {
  eleventyConfig.addLinter("og-image-generator", function(content, inputPath, outputPath) {
    title = HOW_TO_ACCESS_TEMPLATE_FRONT_MATTER
    createImage(title)
  });
}

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

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

4

2 回答 2

2

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

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", 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
     });

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

于 2021-03-31T17:27:41.657 回答
1

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

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

其他解决方案

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

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

  1. 一个特殊的模板循环遍历所有帖子并生成一个 HTML 文件，该文件用作生成的预览图像的模板。此模板由十一处理。（来源）
  2. 在构建步骤之后：我使用生成的 HTML 文件在目录中启动本地服务器，使用puppeteer打开它们并以编程方式截取与 HTML 模板一起保存的屏幕截图。然后删除 HTML 模板。
  3. 这与在 110 次构建后执行的自定义脚本集成到构建步骤中。

我已经发布了用于使用 Puppeteer 截取屏幕截图的脚本作为 NPM 包 ( generate-preview-images )，尽管它仍然处于 alpha 阶段。但是你可以查看Github 上的源代码，看看它是如何工作的，也许它对你的插件有帮助。

于 2021-03-31T12:08:47.637 回答