没有插件的 Jekyll 照片库

Question

有没有办法不用插件就可以生成Jekyll相册？我尝试了一些，但 GitHub 页面不友好。

现在我正在使用 markdown，我在其中指定应显示哪些图片，但我想找到一些通用的方法来执行此操作。

Answer 1

您可以在您的 yml 中（在您的 .md 文件中）执行类似的操作：

images:
  - image: /uploads/image5.jpg
  - image: /uploads/image6.jpg
  - image: /uploads/image7.jpg

在您的布局文件中：

{% for item in page.images %}
<div class="lightbox" id="lightbox{{ forloop.index }}">
  <div class="table">
    <div class="table-cell">
      <img class="close" src="/img/close.svg" />
      <img class="next" src="/img/next.svg" />
      <img class="prev" src="/img/prev.svg" />
      <div class="item" style="background: url('{{ item.image }}') center center no-repeat; background-size: cover;">
      </div>
    </div>
  </div>
</div>
{% endfor %}

连同一些 CSS 和 jQuery 这可以是您自己的自定义灯箱。 jQuery 应该切换（下一个）灯箱。像这样：

$('.next').click(function(){
  $(this).closest('.lightbox').hide().next().show();
});

更新：我创建了一个 simple lightbox for Jekyll，任何人都可以在不理解 javascript、HTML 或 CSS（甚至 Jekyll）的情况下使用。

没有插件的 Jekyll 照片库

Jekyll photo gallery without plugins

html

javascript

gallery

jekyll