Jekyll - 获取目录中的所有文件夹并生成页面

Question

我有一个像这样的文件夹结构:

/gallery/images/category1/
/gallery/images/category2/
/gallery/images/category3/
/gallery/images/category4/
/gallery/images/category5/

and so on..

在每个文件夹中，都有一堆图像。但是，这些类别文件夹总是在变化，名称也在变化。

我的目标是让 jekyll 自动为这些类别中的每一个生成一个单独的页面。然后在此页面中，循环浏览该文件夹中的每个图像并将其显示在页面上。

我需要什么帮助:

我怎么看/gallery/images文件夹并抓取所有文件夹

一旦我知道了所有的文件夹，你如何生成一个页面，例如/gallery/[FOLDER_NAME].html每一个

一旦我能够做到这一点，我知道我可以将关注作为页面内容并且很好。

{% for image in site.static_files %}
    {% if image.path contains 'gallery/{{ FOLDER_NAME }}' %}
        <img src="{{ site.baseurl }}{{ image.path }}" />
    {% endif %}
{% endfor %}

任何帮助或指导将不胜感激。

Answer 1

您可以使用 javascript 执行此操作，无需扩展。

步骤 1. 使用页面或布局将它们放在屏幕上。

<div id="cats"></div>
<div class="imagecontainer">
{% for image in site.static_files %}
    {% if image.path contains 'gallery/' %}
        {% assign imagepath = image.path | split: "/" %}
        <img src="{{ site.baseurl }}{{ image.path }}" class="
          {% for subpath in imagepath %}
            {% if forloop.index0 == 3 %}{{ subpath }}{% endif %}
          {% endfor %}
        " />
    {% endif %}
{% endfor %}
</div>

步骤 2. 让 javascript 一一显示/隐藏它们。

/* hide all images */
$('.imagecontainer img').hide();

/* define an array for the categories */
var cats = new Array();

/* fill the array with the categories */
$('.imagecontainer img').each(function() {
  cats[$(this).attr('class')] = 1;
});

/* create a link for each category */
$.each(cats, function(cat, value) {
  $('#cats').append('<a href="#" class="showcat" cat="'+cat+'">'+cat+'</a>');
});

/* make the links toggle the right images */
$('.showcat').click(function() {
  /* hide all images */
  $('.imagecontainer img').hide();
  /* show images in the clicked category */
  $('.imagecontainer img.'+$(this).attr('cat')).show();
});

/* make images rotate */
$('.imagecontainer img').click(function() {
  /* append the clicked image to its container */
  $('.imagecontainer').append($(this));
});

使用这个 CSS:

div#cats {}
div.imagecontainer {}
img {position: absolute}

您可以首先通过对图像使用 data-src 而不是 src 来阻止它们加载，并使用 javascript/jQuery 交换这些属性。

关于液体拆分的文档: https://shopify.github.io/liquid/filters/split/