Блоки

Подвал

Оранжевый подвал с колонками ссылок и нижней строкой (копирайт с годом, стаж). Вариант: компактный — одна нижняя строка.

Примеры

<footer class="ft">
  <div class="ft__in">
    <div>
      <h4>Блог</h4>
      <p><a href="#">Статьи</a><br><a href="#">Теги</a><br><a href="#">Винил</a></p>
    </div>
    <div>
      <h4>Проекты</h4>
      <p><a href="#" target="_blank" rel="noopener">Курс DevOps-инженера</a><br><a href="#" target="_blank" rel="noopener">Дежурства</a><br><a href="#" target="_blank" rel="noopener">Видеоконференции</a></p>
    </div>
    <div>
      <h4>Подписка</h4>
      <p><a href="#">RSS</a><br><a href="#" target="_blank" rel="noopener">Телеграм</a></p>
    </div>
    <div>
      <h4>Связаться</h4>
      <p>По всем вопросам пишите на e-mail: <a href="mailto:mail@example.org">mail@example.org</a></p>
    </div>
  </div>
  <div class="ft__bottom">
    <span>© 2026 Олег Букатчук</span>
    <span>19 лет в эксплуатации нагруженных систем</span>
  </div>
</footer>

<footer class="ft ft--compact">
  <div class="ft__bottom">
    <span>© 2026 Олег Букатчук</span>
    <span>19 лет в эксплуатации нагруженных систем</span>
  </div>
</footer>

Установка

bukatchuk-ui add footer

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Подвал. Нижняя строка: слева копирайт с годом, справа стаж; год и стаж считаются от site.time.
  Параметры: since (год начала стажа, например site.career.ops_since), name (по умолчанию site.author.name),
  suffix (текст после числа лет), variant (compact), columns (список {title, links: [{text, href, external}]}),
  contact_title и email (последняя колонка с адресом почты; без email не выводится).
  У варианта compact колонок нет.
{%- endcomment -%}
{%- assign year = site.time | date: "%Y" -%}
{%- assign years = year | minus: include.since -%}
{%- assign d10 = years | modulo: 10 -%}
{%- assign d100 = years | modulo: 100 -%}
{%- if d10 == 1 and d100 != 11 -%}{%- assign noun = 'год' -%}
{%- elsif d10 >= 2 and d10 <= 4 and d100 < 12 or d10 >= 2 and d10 <= 4 and d100 > 14 -%}{%- assign noun = 'года' -%}
{%- else -%}{%- assign noun = 'лет' -%}{%- endif -%}
<footer class="ft{% if include.variant %} ft--{{ include.variant }}{% endif %}">
  {%- unless include.variant == 'compact' %}
  <div class="ft__in">
    {%- for col in include.columns %}
    <div>
      <h4>{{ col.title }}</h4>
      <p>
        {%- for l in col.links %}
        <a href="{{ l.href }}"{% if l.external %} target="_blank" rel="noopener"{% endif %}>{{ l.text }}</a>{% unless forloop.last %}<br>{% endunless %}
        {%- endfor %}
      </p>
    </div>
    {%- endfor %}
    {%- if include.email %}
    <div>
      <h4>{{ include.contact_title | default: 'Связаться' }}</h4>
      <p>По всем вопросам пишите на e-mail: <a href="mailto:{{ include.email }}">{{ include.email }}</a></p>
    </div>
    {%- endif %}
  </div>
  {%- endunless %}
  <div class="ft__bottom">
    <span>© {{ year }} {{ include.name | default: site.author.name }}</span>
    <span>{{ years }} {{ noun }} {{ include.suffix | default: 'в эксплуатации нагруженных систем' }}</span>
  </div>
</footer>

Макрос для Jinja

{#- Подвал. year — текущий год (передаётся из приложения), since — год начала стажа; стаж считается сам.
    variant: None | 'compact'; columns — список словарей {title, links: [{text, href, external}]};
    email — адрес в последней колонке. У варианта compact колонок нет. -#}
{% macro footer(name, year, since, variant=None, columns=[], email=None, contact_title='Связаться', suffix='в эксплуатации нагруженных систем') -%}
{%- set years = year - since -%}
{%- set d10 = years % 10 -%}
{%- set d100 = years % 100 -%}
{%- set noun = 'год' if (d10 == 1 and d100 != 11) else ('года' if (2 <= d10 <= 4 and not 12 <= d100 <= 14) else 'лет') -%}
<footer class="ft{% if variant %} ft--{{ variant }}{% endif %}">
  {%- if variant != 'compact' %}
  <div class="ft__in">
    {%- for col in columns %}
    <div>
      <h4>{{ col.title }}</h4>
      <p>
        {%- for l in col.links %}
        <a href="{{ l.href }}"{% if l.external %} target="_blank" rel="noopener"{% endif %}>{{ l.text }}</a>{% if not loop.last %}<br>{% endif %}
        {%- endfor %}
      </p>
    </div>
    {%- endfor %}
    {%- if email %}
    <div>
      <h4>{{ contact_title }}</h4>
      <p>По всем вопросам пишите на e-mail: <a href="mailto:{{ email }}">{{ email }}</a></p>
    </div>
    {%- endif %}
  </div>
  {%- endif %}
  <div class="ft__bottom">
    <span>© {{ year }} {{ name }}</span>
    <span>{{ years }} {{ noun }} {{ suffix }}</span>
  </div>
</footer>
{%- endmacro %}