在 jekyll 中为图像文件添加布局

Question

我想用 Jekyll 制作一个照片库，其中每个图像都有自己的页面。理想情况下，我不想手动为每个图像制作 .md 页面，因为有 700 多个图像。 每个图像应使用我创建的“photo.html”布局。

我尝试过以下解决方案

# _config.yml
defaults:
  -
    scope:
      path: "photos"
    values:
      layout: photo

但这不起作用，打开照片仍然只显示图像，而不显示周围的 HTML。我该如何解决这个问题？

Answer 1

Jekyll 是一个静态站点生成器，因此所有页面都必须在站点生成过程中创建。但您可以自动为每个文件创建 .md 页面。

具体：

1. 有一个脚本在 /photo_pages 目录中为

   {photo_name}.md

   中的每张照片创建

   /photos

   文件。添加/删除任何照片后运行脚本。

photos_dir = 'photos'
output_dir = 'photo_pages'

FileUtils.mkdir_p(output_dir)

Dir.foreach(photos_dir) do |photo_path|
  next if photo_path == '.' or photo_path == '..'

  photo_name = File.basename(photo_path, '.*')
  photo_page_content = <<~MARKDOWN
    ---
    layout: photo
    title: #{photo_name}
    photo_url: /#{photos_dir}/#{File.basename(photo_path)}
    ---
  MARKDOWN

  output_file = File.join(output_dir, "#{photo_name}.md")
  File.write(output_file, photo_page_content)
end

2. 将收藏添加到

   _config.yml

   :

collections:
  photo_pages:
    output: true

3. 然后您可以拥有一个图库页面，其中包含每个照片页面的链接：

{% for photo in site.photo_pages %}
  <a href={{ photo.url }}> Link to page with the photo</a>
{% endfor %}