Jekyll - 组装模型答案

【问题标题】：Jekyll - Assembing a modelJekyll - 组装模型
【发布时间】：2020-07-24 08:38:04
【问题描述】：

我有一些来自 yaml 和 markdown 的正常 Jekyll 模式的内容。

我还从通过 Jekyll 数据访问的 API 中提取了各种内容。例如，我可以使用以下内容将页面链接到其相关数据文件。

sita.data.API[page.api-id]

这工作得很好。但是，如果前面没有可用的图像，我只会使用来自 site.data 的图像。我已经实现了这一点，但我的模板中有各种 if 语句来控制图像 URL 的输出。

我尝试添加一个包含，但这会导致在循环访问 site.pages 时出现问题，例如，输出一组帖子的缩略图。

我真的很想将 site.data 中的数据提取到页面的 Jekyll 模型中。这样就可以从模板中隐藏所有默认值和其他逻辑。我可以在 site.pages 上进行迭代，而无需在网站上散布大量复制和粘贴代码，也无需尝试将 include 标签推到超出其设计用途的范围内。

这是可以通过插件完成的吗？

如果做不到这一点，我可以使用 gulp 或其他构建步骤将 markdown 文件和 site.data 中的数据合并到第三组文件中 - 可能是 markdown？这个解决方案感觉像是从 Jekyll 向使用 gatsby 之类的东西迈出了一步。

【问题讨论】：

看起来像生成器插件扩展页面，因此可以从这里将多个数据源输出到布局。
此外，标签插件可以比包含更好地封装重复代码，后者与从传递给包含的变量中分配变量混淆，并且只能以序列化形式输出对象作为闪避。

标签： jekyll

【解决方案1】：

根据Jekyll docs

...生成器 [插件] 可以注入在构建时为模板变量计算的值。

链接页面上有一些非常有用的示例。

module Composite-model
    class Generator < Jekyll::Generator
      priority :lowest
      def generate(site)

        # get the target from collections.
        # you could also target site.page or site.post with various filters.
        customCollection = site.collections['my-collection']

        
        customCollection.each do |item|

          # Get data from another source and link on id.
          apiId = item["api-id"].to_s
          apiData = site.data["api"][apiId]

          # attach data to collection item
          item.data['api-data'] = apiData

          # please forgive the messy logic, first bit of ruby. 
          # Will refactor and update
          if apiData  && apiData["images"]
              singleImage = apiData["images"].length == 1
              item.data['single-image'] = singleImage

              if item["custom-image"].to_s.strip.empty?
                imageUri = apiData['images'][0]['uri'].split('/').last
                image = File.join("/assets/images/", apiId, imageUri)
                item.data['image'] = image
              else
                item.data['image'] = item["custom-image"]
              end
          else
            item.data['image'] = item["custom-image"]
          end    
        end
      end
    end
  end

注意看起来您无法从生成器插件中覆盖页面变量。例如，我首先尝试直接从 front-matter 转换 item.image。但是，这不起作用，因此页面前端使用自定义图像，然后此生成器首先使用图像。可能值得提出不同的问题。

【讨论】：