Подтвердить что ты не робот

Как просмотреть файлы в каталоге с помощью Liquid?

Я пытаюсь научиться использовать Jekyll вместе с Bootstrap; изучая их, я решил, что хочу иметь карусель изображений на моей домашней странице.

Так как я действительно ленив, я не хочу жестко программировать пути, необходимые для отображения каждого изображения внутри макета, и я бы не стал использовать массив для хранения списка изображений.

Мне было интересно, есть ли какой-нибудь тег, который мог бы попросить Джекила сделать эти два шага:

  • Просмотр определенного каталога
  • Для каждого файла, который вы нашли в этом каталоге, повторите блок кода

В основном то, что я хотел бы написать, - это нечто похожее на этот фрагмент (воображаемого) кода:

{% for file in directory %}
    <img src="{{ file.url }}" />
{% endfor %}

Итак, если, например, у меня есть папка с тремя файлами с именем image01.jpg, image02.jpg, image03.jpg, мне бы хотелось, чтобы jekyll мог создать для меня этот HTML-код:

<img src="folder/image01.jpg" />
<img src="folder/image02.jpg" />
<img src="folder/image03.jpg" />

Итак, я просмотрел эту справочную страницу, но я не нашел ничего полезного для своей цели.

Пожалуйста, не могли бы вы дать мне какое-либо предложение и, если возможно, то, что не связано с использованием плагина?

Спасибо заранее.

4b9b3361

ОТВЕТЫ

Ответ 1

изменить (2015-11-09): С тех пор Jekyll получил некоторые обновления, особенно site.static_pages. Отметьте @raphael ответ на возможное решение.

Это невозможно без использования плагина. У вас нет возможностей ввода-вывода внутри Liquid Templates.

Если ваши изображения имеют передний размер, они могут обрабатываться Jekyll и сохраняться в массиве site.pages и, таким образом, быть доступными, но я бы не рекомендовал размещать Front Matter на изображениях (может иметь смысл для SVG, но не для чего-либо еще).

Лучше всего написать небольшую оболочку script, которая сканирует вашу папку для изображений и создает файл images.json. Затем этот файл можно загрузить через Ajax. Вам просто нужно воссоздать файл images.json каждый раз, когда вы загружаете новый файл (если вы используете Git, вы могли бы это сделать как крюк с предварительной фиксацией).

Ответ 2

Вы можете использовать этот плагин. Скопируйте и вставьте этот код в файл внутри каталога _plugins в корне вашего проекта Jekyll.

https://gist.github.com/jgatjens/8925165

Затем для его использования просто добавьте строки ниже

{% loop_directory directory:images iterator:image filter:*.jpg sort:descending %}
   <img src="{{ image }}" />
{% endloop_directory %}

Ответ 3

Это не совсем невозможно без плагина, но, конечно, вам нужно будет использовать некоторые kludges. Например, вы можете поместить пути изображения в свой фронт YAML, и они будут доступны, когда Jekyll обрабатывает вашу страницу.

---
carousel_images:
  - images/img01.png
  - images/img02.png
  - images/img03.png
---

# Lots of page-related code.

{% for img in page.carousel_images %}
  # Do something.
{% endfor %}

Для изображений на сайте вам нужен плагин. Но если вы хотите, чтобы ваши изображения находились на определенной странице или в столбце, это должно быть сделано.:)

Надеюсь, что это поможет!

Ответ 4

Использование Jekyll collections API, который с 2015-08-07 пришел с большим предупреждением

Поддержка коллекций нестабильна и может меняться

Определите коллекцию в _config.yml и создайте папку _images в корневом каталоге

collections:
- images

Без добавления к вашим изображениям лицевого элемента YAML Jekyll будет:

Файлы в коллекциях, которые не имеют фронтального элемента, рассматриваются как статические файлы и просто копируются в их местоположение вывода без обработки.

Статические файлы имеют следующие атрибуты:

  • file.path
  • file.extname

И тогда код на вашей странице будет чем-то вроде (untested):

{% for image in site.images %}
     {% if image.extname == 'jpg' %}
         <img src="{{ file.url }}" />
     {% endif %}
{% endfor %}

Ответ 5

На основе ответа @raphael вы можете использовать следующий код для отображения файлов jpg:

{% for file in site.static_files %}
  {% if file.extname == ".jpg" %}
     * [{{ file.path }}]({{ site.baseurl }}{{ file.path }})
  {% endif %}
{% endfor %}

Вам бы хотелось удалить некоторые символы новой строки, чтобы получить единственный список на выходе (вместо списков только с одним элементом).

Ответ 6

плагин Jekyll: DirectoryTag от SillyLogger

Этот тег позволяет вам перебирать файлы по определенному пути. В теге directory создается файл-объект и объект forloop. Если файлы соответствуют стандарту Jekyll, YYYY-MM-DD-file-title, то эти атрибуты будут заполнены в этом файловом объекте.

Например, с изображениями

<ul>
  {% directory path: images/vacation exclude: private %}
    <li>
      <img src="{{ file.url }}"
           alt="{{ file.name }}"
           datetime="{{ file.date | date_to_xmlschema }}" />
    </li>
  {% enddirectory %}
</ul>

Ответ 7

Если вы не хотите использовать плагин, другим способом получить имя файла является изменение непосредственно ruby ​​static_files в jekyll: Path ex: C:\Ruby22-x64\lib\ruby ​​\ gems\x.x.x\gems\jekyll-x.x.x\lib\jekyll

Измените static_files.rb и измените:

def to_liquid
  {
    "extname"       => extname,
    "modified_time" => modified_time,
    "path"          => File.join("", relative_path)
  }
end

в

def to_liquid
  {
    "extname"       => extname,
    "modified_time" => modified_time,
    "path"          => File.join("", relative_path),
    "name"          => @name
  }
end

Теперь вы можете перечислить каждый файл png и получить его имя в каталоге DIR_NAME, используя:

{% for file in site.static_files %}
  {% if file.extname == ".png" and file.path contains '/DIR_NAME/' %} 
   {{ file.name }}
  {% endif %}
{% endfor %}