杰奇 - 获取目录中的所有文件夹，并生成网页

Question

我有一个文件夹结构如下所示：

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

and so on.. 

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

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

我需要帮助的内容：

• 我怎么看在/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} 

您可以通过使用数据-SRC，而不是SRC的图像防止它们加载在首位，并交换使用javascript/jQuery的这些属性。

文档上的液体分流：https://shopify.github.io/liquid/filters/split/