Jekyll: виды представления информации

Jekyll — генератор статики, написанный на ruby. Те, кто ещё не знаком с ним, могут найти вводное руководство на русском, написанное достаточно давно, но актуальное и ныне. Либо полное — на английском. Для всех остальных: тема различных видов представления информации.

Для статических страниц можно и нужно писать шаблон в обычном markdown-файле archive.md или posts.md. Главное, указать адрес, по которому этот файл будет открываться как веб-документ. Об остальном позаботиться сам jekyll.

Вывод статей по дате создания

Привычно видеть архивы, упорядоченные по дате создания. Так мы можем ориентироваться во времени, когда ищем наиболее свежие статьи. Первый пример выводит упорядоченный по годам список материалов. Используется шаблон страницы page, заголовок «Archive» и ссылка вида /archive/.

---
layout: page
title: Archive
permalink: /archive/
---

<ul class="year">
  {% for post in site.posts %}
    {% unless post.next %}
      <h2>{{ post.date | date: '%Y' }}</h2>
    {% else %}
      {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
      {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
      {% if year != nyear %}
        <h2>{{ post.date | date: '%Y' }}</h2>
      {% endif %}
    {% endunless %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      <time datetime="{{ post.date | date: "%Y-%m-%d" }}" class="date">
        {{ post.date | date: "%d %B %Y" }}
      </time>
    </li>
  {% endfor %}
</ul>

Вывод статей по тегам

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

Отображение списка всех тегов на одной странице:

<ul class="tags">
{% for tag in site.tags %}
  {% assign t = tag | first %}
  {% assign posts = tag | last %}
  <li>{{t | downcase | replace:" ","-" }} has {{ posts | size }} posts</li>
{% endfor %}
</ul>

Отображение всех тегов и сгруппированных по ним записей.

<div class="container">
{% for tag in site.tags %}
  {% assign t = tag | first %}
  {% assign posts = tag | last %}

<h2 class="tag-key" id="{{ t | downcase }}">{{ t | capitalize }}</h2>

{% for post in posts %}
  {% if post.tags contains t %}
    <a class="post-index-item" href="{{ post.url }}">
      <span class="date">{{ post.date | localize: "%d %b, %Y" }}</span>
      <span class="article">{{ post.title }}</span>
    </a>
  {% endif %}
{% endfor %}

{% endfor %}
</div>

Сколько времени прошло?

Порой можно заметить даты, указанные в не совсем привычном формате. Имеется ввиду подобный отсчёт: 2 дня назад или больше года назад.

Нельзя сказать, чтобы это как-то влияло на удобство поиска или визуальное восприятие, но забавы ради и такое можно провернуть на странице публикации поста. Для этого уже есть готовое решение в виде плагина jekyll-timeago.