Статьи

Некоторые передовые технологии Jekyll / Liquid Template

Июль 10, 2017

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

На домашней странице было несколько повторяющихся разделов, в которых перечислялся контент для каждой категории контента. Если контента не было, раздел не должен отображаться. Что еще более важно, каждый раздел был по сути одинаковым, за исключением некоторых категорий метаданных и стилей. Вместо того, чтобы повторять один и тот же код для каждого раздела, я решил использовать include — но это потребовало некоторых творческих обходных путей для демонстрации стиля.

В этом посте я покажу некоторые методы, которые я использовал. Я не совсем уверен, что это обязательно «лучшие практики», но, поскольку в Интернете было не так много информации, которую я мог найти, я подумал, что стоит поделиться. (И если у вас есть лучшие способы решения этих проблем, пожалуйста, поделитесь.)

Определение, есть ли у категории сообщения (и сколько)

Это на самом деле довольно просто. Каждая категория имеет свойство размера, которое вы можете использовать.

{% if site.categories.categoryname.size%}
 <!-- do something -->
{% endif%}

Очевидно, замените categorynameна фактическую категорию, которую вы использовали для своих сообщений. Не волнуйтесь, это не будет ошибкой, если категория не существует. Теперь, я полагаю, вы могли .sizeбы отказаться, предполагая, что если категория не существует, то это потому, что она не содержит постов, но это работает так же хорошо (и, возможно, читается легче).

Присвойте значение переменной

В этом сценарии у меня была переменная, которая будет иметь текущую категорию. Назначить переменную легко. У жидкости есть assignключевое слово для этой цели.

{% assign categoryname = 'foobar'%}

В некоторых примерах утверждается, что вы не можете переназначить значение переменной после первоначального присвоения. Я не обнаружил, что это так. Однако вы также можете назначить переменную с помощью capture.

{% capture categoryname %}foobar{% endcapture %}

Использование переменной с включенным

Здесь действительно нечего делать. Если переменная назначена, вы можете просто использовать ее в любом последующем включении. (Примечание. Я пытался использовать withключевое слово для передачи переменной в include, а не назначать ее каждый раз, но не смог заставить ее работать должным образом.)

Самое интересное в том, что include всегда был одинаковым, просто менялось значение переменной. Давайте посмотрим на небольшую часть.

{% if site.categories.foobar.size %}
  {% assign categoryname = "foobar" %}
  <section>
    {% include index_article.html %}
  </section>
{% endif %}

{% if site.categories.barbar.size %}
  {% assign categoryname = "barbar" %}
  <section>
    {% include index_article.html %}
  </section>
{% endif %}

В рамках этого включения (которое я плохо назвал index_article.html) я могу перебирать сообщения в этой категории, используя переменную.

{% include banner.html %}
<ul class="ArticleList">
  {% for post in site.categories[categoryname] %}
<li>
        <h4><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h4>
        <p>{{ post.description }}</p>
        <p><span class="Author">{{ post.author }}</span>
        <span class="PublishDate">{{ post.date | date: "%b %-d, %Y" }}</span></p>
    </li>
  {% endfor %}
</ul>

Динамически загружать данные

Итак, помните, я сказал, что баннер изменился в зависимости от метаданных какой-либо категории? Что ж, для этого я решил поместить необходимые элементы метаданных в файл данных YAML _data. У каждой категории было то же ключевое имя, что и у фактической категории постов, так что я легко мог ее найти. (Да, это, вероятно, немного хрупко, но помните, что мы говорим о статическом сайте — я не собираюсь выдвигать что-то сломанное вживую.)

Давайте посмотрим на образец YAML.

foobar:
  name: "Foo Bar"
  description: "Foo is the best kind of bar around"
  logo: "foobar.png"
  color: "Purple"
barbar:
  name: "Bar Bar"
  description: "There's no doubt that bar is the original kind of bar"
  color: "Orange"

Обратите внимание, что они не содержат одинаковые метаданные — у первого есть логотип, а у второго нет. В приведенном index_article.htmlвыше примере кода я включил banner.html. Давайте посмотрим на это.

<div class="SectionHead {{ site.data.categories[categoryname].color }}Box }}">
<div class="LogoSpot">
  {% if site.data.categories[categoryname].logo %}
    <img src="{{ site.baseurl }}/images/{{ site.data.categories[categoryname].logo }}"
      alt="{{ site.data.categories[categoryname].name }}"/>
  {% elsif site.data.categories[categoryname].subtitle %}
    {{ site.data.categories[categoryname].subtitle }}
  {% else %}
    {{ site.data.categories[categoryname].name }}
  {% endif %}
</div>
<h2>{{ site.data.categories[categoryname].name }}</h2>
<h3>{{ site.data.categories[categoryname].description }}</h3>
</div>

Обратите внимание, что я могу динамически извлекать имя категории через переменную (и даже при том, что это включение во включении после того, как переменная была установлена). Также обратите внимание, что я могу проверить, существуют ли определенные свойства в категории — например, я показываю логотип, если он существует, если не подзаголовок (если он существует), а просто только название категории.

Вывод

Надеюсь, эти примеры полезны — я знаю, что они помогли бы мне. Если у кого-то есть предложения о том, как я мог бы добиться таких же результатов лучше, поделитесь.

Также обязательно ознакомьтесь с моей бесплатной электронной книгой от O’Reilly — Генераторы статических сайтов — Современные инструменты для разработки статических сайтов.

42
Share: