Jekyll — получить все папки в каталоге и создать страницы

У меня есть такая структура папок:

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

Любая помощь или руководство будет принята с благодарностью.


jekyll jekyll-extensions
person bryan    schedule 13.07.2017    source источник
comment
Какова конкретная причина необходимости папок?   -  person kawnah    schedule 14.07.2017
comment
@kawnah Я обновил свой вопрос, чтобы он был более конкретным   -  person bryan    schedule 14.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это с помощью 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.

Документация по разделению Liquid: https://shopify.github.io/liquid/filters/split/

person JoostS    schedule 20.07.2017
comment
Привет, JoostS, хотя это отличный ответ, и я ценю время — я искал плагин для Jekyll, так как думаю, что он может помочь с гораздо более широким набором вариантов использования. - person bryan; 21.07.2017
comment
Без проблем. Я думаю, вы правы. Однако многие люди хотят размещать страницы на Github (бесплатно). Они будут искать решение без плагинов, поскольку поддержка плагинов на хостинге Github ограничена. - person JoostS; 22.07.2017
comment
да, я чувствую, что мой вопрос больше касается основ создания плагинов и страниц и использования этого в качестве варианта использования. - person bryan; 24.07.2017