Фрейм docs

Фрейм страниц документации: левое дерево разделов, мобильная шторка, заголовок с разделом-родителем, кнопка Copy, текст, пейджер и оглавление.

Разметка

<!-- onpress/docs-nav {"shell":"drawer"} /-->
<header class="opdoc__navbar"> … <!-- onpress/frame {"name":"site__header"} /--> … <!-- onpress/docs-nav {"shell":"toggle"} /--></header>
<div class="opdoc__shell">
  <!-- onpress/docs-nav {"shell":"sidebar"} /-->
  <div class="opdoc__main">
    <header class="opdoc__header">
      <a class="opdoc__eyebrow" data-op-bind='{"text":"page.parent_title","href":"page.parent_url"}'></a>
      <h1 class="opdoc__title" data-op-bind='{"text":"page.title"}'></h1>
      <p class="opdoc__lead" data-op-bind='{"text":"page.description"}'></p>
      <!-- onpress/share-ai {"view":"docs"} /-->
    </header>
    <div class="opdoc__body …"><!-- onpress/content /--></div>
    <!-- onpress/pager /-->
    <div class="opdoc__aside"><!-- onpress/outline /--></div>
  </div>
</div>
<!-- onpress/frame {"name":"site__footer"} /-->

Пункты дерева — все страницы на этом фрейме, вложенность — по родителям, подписи — nav_label (см. сайдбар документации). Лид под заголовком — выдержка страницы (excerpt).

Несколько разделов на одном сайте

Если на сайте несколько независимых разделов (версии, языки), дайте дереву и пейджеру корни атрибутом root — пути или id через запятую:

<!-- onpress/docs-nav {"shell":"sidebar","root":"/docs/v2/ru/,/docs/v1/ru/"} /-->
<!-- onpress/pager {"root":"/docs/v2/ru/,/docs/v1/ru/"} /-->

Корень выбирается по странице: тот, в ветке которого она стоит. Меню начинается с его детей, сам корень и всё выше в меню не попадают, пейджер ходит только внутри ветки. Так устроена эта документация.