#Настройка страницы

Rspress предоставляет несколько способов настройки содержимого страниц:

• Добавление пользовательских глобальных компонентов.
• Добавление пользовательских глобальных стилей.
• Настройку структуры макета страницы.

#Пользовательские глобальные компоненты

В некоторых сценариях может потребоваться добавить глобальные компоненты на каждую страницу. Для этого используйте опцию globalUIComponents.

#Как использовать

Добавьте следующую конфигурацию:

import { defineConfig } from '@rspress/core';
import path from 'path';

export default defineConfig({
  globalUIComponents: [path.join(__dirname, 'components', 'MyComponent.tsx')],
});

Каждый элемент globalUIComponents может быть либо строкой с путём к файлу компонента, либо кортежем. В случае кортежа первый элемент — путь к файлу компонента, а второй — пропсы компонента. Например:

import { defineConfig } from '@rspress/core';

export default defineConfig({
  globalUIComponents: [
    [
      path.join(__dirname, 'components', 'MyComponent.tsx'),
      {
        foo: 'bar',
      },
    ],
  ],
});

При регистрации глобальных компонентов Rspress автоматически рендерит эти React-компоненты в теме без необходимости их ручного импорта.

Глобальные компоненты могут реализовывать различные пользовательские функции, такие как:

import React from 'react';

// Необходим экспорт по умолчанию
// Пропсы приходят из вашей конфигурации
export default function PluginUI(props?: { foo: string }) {
  return <div>Это глобальный компонент макета</div>;
}

Содержимое компонента затем рендерится в теме, например для добавления кнопки BackToTop.

Также глобальный компонент можно использовать для регистрации побочных эффектов:

import { useEffect } from 'react';
import { useLocation } from '@rspress/core/runtime';

// Необходим экспорт по умолчанию
export default function PluginSideEffect() {
  const { pathname } = useLocation();
  useEffect(() => {
    // Выполняется при первом рендере компонента
  }, []);

  useEffect(() => {
    // Выполняется при изменении маршрута
  }, [pathname]);
  return null;
}

Побочные эффекты компонента затем выполняются в теме. Например, они полезны для:

• Перенаправления определённых маршрутов страниц.
• Привязки событий клика к тегам img на странице для реализации увеличения изображений.
• Отправки данных о просмотрах страниц при изменении маршрута.

#Пользовательская структура страниц

Rspress предоставляет pageType для настройки макета страницы.

#Использование pageType

Маршрутизация Rspress на основе соглашений поддерживает два типа маршрутов: маршруты документов, которые создаются с помощью файлов .md(x), и маршруты компонентов, которые создаются с помощью файлов .jsx или .tsx.

Для маршрутов документов добавьте поле pageType в блок метаданных, чтобы указать макет страницы:

---
pageType: custom
---

Для маршрутов компонентов экспортируйте frontmatter, чтобы указать pageType:

export const frontmatter = {
  // Объявялем тип макета
  pageType: 'custom',
};

pageType поддерживает следующие значения:

• home: Главная страница, включает верхнюю навигационную панель и контент макета главной страницы.
• doc: Страница документации, включает верхнюю навигационную панель, левую боковую панель, основной контент и правое оглавление.
• doc-wide: Широкая страница документации, где основной контент может занимать более широкую область при одновременном использовании outline: false и sidebar: false.
• custom: Пользовательская страница, включает верхнюю навигационную панель и пользовательский контент.
• blank: Также пользовательская страница, но без верхней навигационной панели.
• 404: Страница «не найдено».

#Использование детальной настройки

Помимо настройки pageType на уровне страницы, Rspress предоставляет более детальные переключатели в блоке метаданных:

• navbar: показывать ли верхнюю панель навигации. Установите false, чтобы скрыть панель навигации.
• sidebar: показывать ли сайдбар. Установите false, чтобы скрыть сайдбар.
• outline: показывать ли оглавление. Установите false, чтобы скрыть оглавление.
• footer: показывать ли футер. Установите false, чтобы скрыть футер.
• globalComponents: показывать ли глобальные компоненты. Установите false, чтобы скрыть глобальные компоненты.

Пример:

---
navbar: false
sidebar: false
outline: false
footer: false
globalUIComponents: false
---