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

Rspress предоставляет несколько способов кастомизировать содержимое ваших страниц, включая:

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

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

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

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

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

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

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

Каждый элемент globalUIComponents может быть строкой, представляющей путь к файлу компонента; либо массивом, где первый элемент — путь к файлу компонента, а второй — объект props для компонента, например:

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

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

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

С помощью глобальных компонентов можно реализовать множество пользовательских функций, таких как:

import React from 'react';

// Необходим экспорт по умолчанию
// Объект props приходит из вашей конфигурации
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 на странице для реализации функции увеличения изображения.
• Отправка данных о количестве просмотров разных страниц при смене маршрута.
• ......

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

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

Rspress предоставляет конфигурацию pageType, чтобы вы могли настраивать структуру макета страницы.

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

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

---
pageType: custom
---

Для второго типа маршрутов вы можете добавить следующий экспорт, чтобы указать 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
---