Блоки

Списки статей

Лента карточек статей (.post) с закреплённой, компактные строки (.row) для архива и страниц тегов.

Примеры

<div class="feed-head">
  <h2>Техника</h2>
  <a href="#" class="btn btn--ghost">Весь архив →</a>
</div>
<div class="feed">
  <article class="post post--pin">
    <div class="post__date"><b>12 окт</b>2026</div>
    <div>
      <h3 class="post__t"><a class="post__link" href="#">Почему реплика PostgreSQL отстаёт на ровном месте</a></h3>
      <p class="post__d">Разбираем три причины отставания, о которых не пишут в руководствах: долгие запросы на реплике, конфликты восстановления и сетевые паузы.</p>
      <div class="post__f">
        <span class="tag tag--safety">Закреплено</span>
        <a class="tag" href="#">postgresql</a>
        <a class="tag" href="#">репликация</a>
        <span class="post__time">9 мин чтения</span>
      </div>
    </div>
  </article>
  <article class="post">
    <div class="post__date"><b>3 окт</b>2026</div>
    <div>
      <h3 class="post__t"><a class="post__link" href="#">Алерты, которые будят зря</a></h3>
      <p class="post__d">Как отделить сигнал от шума: пороги по скорости изменения, группировка и правило «каждый алерт — это действие».</p>
      <div class="post__f">
        <a class="tag" href="#">мониторинг</a>
        <span class="post__time">6 мин чтения</span>
      </div>
    </div>
  </article>
</div>

<div class="rows">
  <a class="row" href="#"><span class="row__d">12.10</span><span class="row__t"><span class="row__star">★ </span>Почему реплика PostgreSQL отстаёт на ровном месте</span><span class="row__meta">9 мин</span></a>
  <a class="row" href="#"><span class="row__d">03.10</span><span class="row__t">Алерты, которые будят зря</span><span class="row__meta">6 мин</span></a>
  <a class="row" href="#"><span class="row__d">21.09</span><span class="row__t">Восстановление проверяют, а не надеются</span><span class="row__meta">4 мин</span></a>
</div>

Установка

bukatchuk-ui add post-list

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Статья в списке. Параметры: post (пост), pin=true — закреплённая карточка,
  row=true — компактная строка вместо карточки (для архива и страниц тегов).
  Карточки оборачиваются в <div class="feed">, строки — в <div class="rows">.
{%- endcomment -%}
{%- assign p = include.post -%}
{%- assign words = p.content | strip_html | number_of_words -%}
{%- if include.row -%}
<a class="row" href="{{ p.url | relative_url }}">
  <span class="row__d">{{ p.date | date: "%d.%m" }}</span>
  <span class="row__t">{% if words > 500 %}<span class="row__star">★ </span>{% endif %}{{ p.title | escape }}</span>
  <span class="row__meta">{{ words | divided_by: 180 | plus: 1 }} мин</span>
</a>
{%- else -%}
<article class="post{% if include.pin %} post--pin{% endif %}">
  <div class="post__date"><b>{{ p.date | date: "%-d" }} {{ p.date | date: "%b" | replace: "Jan","янв" | replace: "Feb","фев" | replace: "Mar","мар" | replace: "Apr","апр" | replace: "May","мая" | replace: "Jun","июн" | replace: "Jul","июл" | replace: "Aug","авг" | replace: "Sep","сен" | replace: "Oct","окт" | replace: "Nov","ноя" | replace: "Dec","дек" }}</b>{{ p.date | date: "%Y" }}</div>
  <div>
    <h3 class="post__t"><a class="post__link" href="{{ p.url | relative_url }}">{{ p.title | escape }}</a></h3>
    <p class="post__d">{{ p.description | default: p.excerpt | strip_html | normalize_whitespace | truncate: 220 }}</p>
    <div class="post__f">
      {%- if include.pin %}<span class="tag tag--safety">Закреплено</span>{% endif %}
      {%- for t in p.tags %}<a class="tag" href="{{ '/tags/' | relative_url }}#{{ t | slugify }}">{{ t }}</a>{% endfor %}
      <span class="post__time">{{ words | divided_by: 180 | plus: 1 }} мин чтения</span>
    </div>
  </div>
</article>
{%- endif -%}