From ff1dcc941347020b5b2aa4996189dfca4ca32061 Mon Sep 17 00:00:00 2001 From: 3y3 <3y3@ya.ru> Date: Thu, 28 Dec 2023 17:58:27 +0300 Subject: [PATCH] Document PC Navigation --- en/toc.yaml | 18 ++++++++++++++ ru/project/navigation.md | 53 ++++++++++++++++++++++++++++++++++++++++ ru/toc.yaml | 23 +++++++++++++++++ 3 files changed, 94 insertions(+) create mode 100644 ru/project/navigation.md diff --git a/en/toc.yaml b/en/toc.yaml index 1231232..4831752 100644 --- a/en/toc.yaml +++ b/en/toc.yaml @@ -1,5 +1,23 @@ title: Diplodoc href: index.yaml +navigation: + logo: + url: 'https://diplodoc.com' + dark: + icon: 'https://storage.yandexcloud.net/diplodoc-www-assets/logo/ddos-logo-dark.svg' + light: + icon: 'https://storage.yandexcloud.net/diplodoc-www-assets/navigation/diplodoc-logo.svg' + header: + leftItems: + - text: 'How it works' + type: 'link' + url: 'https://diplodoc.com/how-to/' + - text: 'Documentation' + type: 'link' + url: 'https://diplodoc.com/docs/en/' + - text: 'Github' + type: 'link' + url: 'https://github.com/diplodoc-platform/' items: - name: Overview href: about.md diff --git a/ru/project/navigation.md b/ru/project/navigation.md new file mode 100644 index 0000000..3068934 --- /dev/null +++ b/ru/project/navigation.md @@ -0,0 +1,53 @@ +# Расширенная навигация + +Платформа поддерживает гибкую настройку верхней навигации ("шапки") на странице. +Для этого используется пакет [page-constructor](https://gravity-ui.com/libraries/page-constructor). + +В [StoryBook](https://preview.gravity-ui.com/page-constructor/?path=/docs/navigation-navigation--docs) можно ознакомиться с примерами конфигурации навигации. + +## Настройка + +{% note warning %} + +Стоит учитывать, что, при использовании расширенной навигации, вся развертка страницы переходит в режим page-constructor. +Т.е. будут отличаться отсуты контента от краев экрана. + +Так же в этом режиме игнорируются любые настройки навигации из `.yfm` файла. + +{% endnote %} + +Блок конфигурации добавляется в `toc.yaml` следующим образом: + +```yaml +title: Docs navigationExample +href: index.md +navigation: + logo: + url: 'https://diplodoc.com' + dark: + icon: 'https://storage.yandexcloud.net/diplodoc-www-assets/logo/ddos-logo-dark.svg' + text: 'Diplodoc' + light: + icon: 'https://storage.yandexcloud.net/diplodoc-www-assets/navigation/diplodoc-logo.svg' + text: 'Diplodoc' + header: + leftItems: + - text: 'Relative Link' + type: 'link' + url: './ru/settings' + - text: 'Absolute Link' + type: 'link' + url: 'https://diplodoc.com/docs/ru/project/' + rightItems: + - text: 'Other Link' + type: 'link' + url: 'ru/contribution' + - type: controls +``` + +Относительные ссылки расчитываются всегда от корня проекта, на каком бы уровне не находился toc.yaml + +## Специальные элементы + +- `controls` - отвечает за позицию размещения поиска и настроек в навигации. + Если не указан вручную, то автоматически добавляется последним элементов в `rightItems`. diff --git a/ru/toc.yaml b/ru/toc.yaml index 930af62..0afe614 100644 --- a/ru/toc.yaml +++ b/ru/toc.yaml @@ -1,5 +1,26 @@ title: Diplodoc href: index.yaml +navigation: + logo: + url: 'https://diplodoc.com' + dark: + icon: 'https://storage.yandexcloud.net/diplodoc-www-assets/logo/ddos-logo-dark.svg' + light: + icon: 'https://storage.yandexcloud.net/diplodoc-www-assets/navigation/diplodoc-logo.svg' + header: + leftItems: + - text: 'Как все устроено' + type: 'link' + url: 'https://diplodoc.com/how-to/' + - text: 'Документация' + type: 'link' + url: 'https://diplodoc.com/docs/ru/' + - text: 'Тelegram' + type: 'link' + url: 'https://t.me/diplodoc_ru' + - text: 'Github' + type: 'link' + url: 'https://github.com/diplodoc-platform/' items: - name: Обзор системы href: about.md @@ -49,6 +70,8 @@ items: href: project/index.md - name: Оглавление href: project/toc.md + - name: Расширенная навигация + href: project/navigation.md - name: Разводящая страница href: project/leading-page.md - name: Пресеты переменных