Элементы

Оглавление

Оглавление страницы с подсветкой текущего раздела при прокрутке; прилипает под шапкой.

Примеры

<div class="toc-layout">
  <article class="toc-scope">
    <h2 id="toc-ex-1-a">Зачем нужен журнал дежурств</h2>
    <p>Журнал хранит контекст между сменами: что случилось, что проверено и что осталось в работе.</p>
    <h2 id="toc-ex-1-b">Что записывать</h2>
    <p>Время, симптом, действие и результат. Предположения отмечаются отдельно.</p>
    <h3 id="toc-ex-1-b1">Инциденты</h3>
    <p>Ссылка на карточку и текущий статус.</p>
    <h3 id="toc-ex-1-b2">Плановые работы</h3>
    <p>Окно работ и ответственный.</p>
    <h2 id="toc-ex-1-c">Передача смены</h2>
    <p>Перед уходом дежурный читает записи вслух следующему.</p>
  </article>
  <nav class="toc" aria-label="Содержание статьи" data-ui-toc>
    <p class="toc__title">На странице</p>
    <ol class="toc__list">
      <li><a class="toc__link" href="#toc-ex-1-a">Зачем нужен журнал дежурств</a></li>
      <li><a class="toc__link" href="#toc-ex-1-b">Что записывать</a>
        <ol class="toc__list toc__list--nested">
          <li><a class="toc__link" href="#toc-ex-1-b1">Инциденты</a></li>
          <li><a class="toc__link" href="#toc-ex-1-b2">Плановые работы</a></li>
        </ol>
      </li>
      <li><a class="toc__link" href="#toc-ex-1-c">Передача смены</a></li>
    </ol>
  </nav>
</div>

<div class="toc-layout">
  <article class="toc-scope" id="toc-ex-2-doc">
    <h2>Установка</h2>
    <p>Сервер видеоконференций ставится одной командой из каталога проекта.</p>
    <h2>Настройка доменов</h2>
    <p>Для комнат нужен wildcard-сертификат.</p>
    <h2>Обновление</h2>
    <p>Перед обновлением снимите резервную копию базы.</p>
  </article>
  <nav class="toc" aria-label="Содержание страницы" data-ui-toc data-ui-toc-from="#toc-ex-2-doc">
    <p class="toc__title">На странице</p>
  </nav>
</div>

Установка

bukatchuk-ui add toc

Файлы

Переменные

Клавиши

Вставка для Jekyll

{%- comment -%}
  Оглавление страницы. Параметры: items — список объектов (text, href, children), title, label.
  Без items задайте from="#статья": список построит скрипт по заголовкам h2 и h3 внутри этого элемента.
{%- endcomment -%}
<nav class="toc" aria-label="{{ include.label | default: 'Содержание страницы' }}" data-ui-toc{% if include.from %} data-ui-toc-from="{{ include.from }}"{% endif %}>
  <p class="toc__title">{{ include.title | default: 'На странице' }}</p>
  {%- if include.items %}
  <ol class="toc__list">
    {%- for it in include.items %}
    <li><a class="toc__link" href="{{ it.href }}">{{ it.text }}</a>
      {%- if it.children %}
      <ol class="toc__list toc__list--nested">
        {%- for c in it.children %}
        <li><a class="toc__link" href="{{ c.href }}">{{ c.text }}</a></li>
        {%- endfor %}
      </ol>
      {%- endif %}
    </li>
    {%- endfor %}
  </ol>
  {%- endif %}
</nav>

Макрос для Jinja

{#- Оглавление страницы. items — список (text, href, children); подсветку текущего раздела делает скрипт.
    Если items не передан, а задан from_selector, список строится скриптом по заголовкам. -#}
{% macro toc(items=None, title='На странице', label='Содержание страницы', from_selector=None) -%}
<nav class="toc" aria-label="{{ label }}" data-ui-toc{% if from_selector %} data-ui-toc-from="{{ from_selector }}"{% endif %}>
  <p class="toc__title">{{ title }}</p>
  {%- if items %}
  <ol class="toc__list">
    {%- for it in items %}
    <li><a class="toc__link" href="{{ it.href }}">{{ it.text }}</a>
      {%- if it.children %}
      <ol class="toc__list toc__list--nested">
        {%- for c in it.children %}
        <li><a class="toc__link" href="{{ c.href }}">{{ c.text }}</a></li>
        {%- endfor %}
      </ol>
      {%- endif %}
    </li>
    {%- endfor %}
  </ol>
  {%- endif %}
</nav>
{%- endmacro %}