Добавляем новые страницы

Структура сайта

Прежде чем приступим к добавлению новых страниц определим структуру сайта, при этом могут быть разные варианты:

1. Структура может быть типа все в одном каталоге. То есть все страницы находятся в одном каталоге папки docs. Картинки находятся в каталоге img папки docs. В первом приближении это выглядит достаточно просто, но не эффективно. Надо будет придумывать страницам сложные неповторяющиеся имена, чтобы они не пересекались в каталоге. И как то именовать картинки, чтобы они указывали на принадлежность к своим страницам. Это представляется достаточно сложным, особенно если в сайт со временем придется вносить изменения.
2. Сразу создавать в папке docs структуру будущего сайта - где каждой теме или разделу соответствует свой каталог с папкой img, в котором лежат картинки. В этом случае: имена страниц будут просты и они могут повторяться для разных каталогов. Картинки, относящиеся к своим страницам можно просто именовать по имени страницы, добавляя в конце порядковый номер.
3. Могут быть еще варианты.
4. При некоторых настройках sidebars.js можно его вообще ни как не заполнять. Все будет строиться автоматически, но в этом случае, чтобы сохранить нужный порядок следования страниц, они должны располагаться в алфавитном порядке.

Для решения задачи по созданию сайта выберем второй вариант.

Создаем новые страницы

Чтобы не "ломать голову" над структурой и наполнением сайта, возьмем за основу следующую структуру, представленную в таблице, и определим некоторые правила.

Название страницы	Название файла или каталога	Каталог	Примечание
Документация	about.md	docs	создан ранее
	create	docs	каталог
Создание проекта	create.md	docs / create
Создания репозитория и локального сайта	local.md	docs / create
	edit	docs	каталог
Редактирование проекта	edit.md	docs / edit
Первый старт	start.md

Создадим: каталоги (create, edit) и соответствующие файлы create, local, edit, start с расширением md в дереве проектов редактора IntelliJ IDEA. Для всех файлов свойство title - соответствует колонке "Название страницы". Текст на странице начинается со слов "Эта страница соответствует заголовку:" и далее через пробел название заголовка.

Для примера содержание файла create.md

---
title: 'Создание проекта'
---

Эта страница соответствует заголовку: Создание проекта

внимание

Для каталога существует одноименный файл md (отмечено красной стрелкой). Это необязательное условие - файл может быть с любым именем. Но если связывать имя каталога с одноименным файлом, то впоследствии будет проще ориентироваться в структуре сайта.

Рис. 1 - Содержание дерева проектов

Заполняем файл sidebars.js

module.exports = {
    docs: [ // Основное меню
        'about', // отдельный пункт, slug: /
            {
                type: 'category',
                label: 'Создание проекта',
                link: {type: 'doc', id: 'create/create'}, // узел дерева - название раздела
                items: [ 'create/local', ], // пункты, входящие в раздел
            },
            {
                type: 'category',
                label: 'Редактирование проекта',
                link: {type: 'doc', id: 'edit/edit'}, // узел дерева - название раздела
                items: [ 'edit/start', ], // пункты, входящие в раздел
            },
    ],
}     

Полная версия sidebar.js доступна здесь

Можно выделить следующие моменты:

• объект {type: 'category', ...} - создаем новый раздел. При этом название пункта меню в боковой панели будет определяться значением свойства label, а не свойством title, связанного с ним md файла. Связанные с разделом md файлы, в нашем случае это create/create.md и edit/edit.md
• массив items[...,] - файлы md, входящие в выбранный раздел. Название пунктов меню боковой панели определяется свойством title md файла
• внутри массива items можно вставить новый объект {type: 'category', ...} и таким образом, организовать еще вложение
• все обращения к страницам идут относительно своих каталогов, например create/create или create/local, где:
  • create - название каталога
  • create или local - названия md файлов без указания расширения

Старт локального сайта

Если все было выполнено правильно, то при выполнении в консоли проекта команды yarn start произойдет старт локального сайта.

Рис. 2 - Вид сайта

• слева, в боковой панели, присутствует древовидное меню
• справа, отображаются страницы, связанные с пунктами меню