bukatchuk ui

Блоки

Архив по годам

Крупный год с числом публикаций слева и список статей справа.

archive с версии 0.1.0

Примеры

Архив за два года
<div class="archive">
  <div>
    <div class="archive__year">2026</div>
    <div class="archive__count">3 публикации</div>
  </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>
</div>
<div class="archive">
  <div>
    <div class="archive__year">2025</div>
    <div class="archive__count">1 публикация</div>
  </div>
  <div class="rows">
    <a class="row" href="#"><span class="row__d">18.12</span><span class="row__t">Итоги года: что сломалось и почему</span><span class="row__meta">7 мин</span></a>
  </div>
</div>

Установка

bukatchuk-ui add archive

Вместе с компонентом установятся: tokens, fonts, base, tag, button, post-list.

Файлы

ФайлНазначение
archive.cssстили
example.htmlобразец разметки, в проект не копируется
archive.jekyll.htmlвставка для Jekyll

Вставка для Jekyll

{%- comment -%}
  Архив по годам. Параметр posts — список постов. Строки выводятся компонентом post-list (row=true).
{%- endcomment -%}
{%- assign by_year = include.posts | group_by_exp: "p", "p.date | date: '%Y'" -%}
{%- for year in by_year %}
<div class="archive">
  <div>
    <div class="archive__year">{{ year.name }}</div>
    <div class="archive__count">{{ year.items.size }} {% if year.items.size == 1 %}публикация{% elsif year.items.size >= 2 and year.items.size <= 4 %}публикации{% else %}публикаций{% endif %}</div>
  </div>
  <div class="rows">
    {%- for post in year.items %}
    {% include ui/post-list.html post=post row=true %}
    {%- endfor %}
  </div>
</div>
{%- endfor %}