ジキル - ディレクトリ内のすべてのフォルダを取得し、ページ

Question

私はそうのようなフォルダ構造を持つ生成します。これらのフォルダのそれぞれの内側

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

and so on.. 

を、画像の束があります。ただし、これらのカテゴリフォルダは常に変更されています。名前も同様です。

私の目標は、jekyllがこれらのカテゴリのそれぞれに対して別々のページを自動生成させることです。次に、このページで、そのフォルダ内の各イメージを繰り返してページに表示します。私は上のヘルプが必要何

：

• どのように私はすべてのフォルダを知ったら、どのようにあなたは、このようなそれぞれの/gallery/[FOLDER_NAME].htmlとしてページを生成するのです/gallery/imagesフォルダ内に見て、すべてのフォルダ
• をつかむんそのうちの1つ

私がそれを行うことができたら、私はページの内容としてフォローすることができ、うまくいくことがわかります。

{% 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/