#Статические ресурсы

#Введение

В Rspress можно использовать следующие статические ресурсы:

• Изображения, видео и другие статические ресурсы, используемые в файлах MDX
• Изображение логотипа в левом верхнем углу сайта
• Иконка сайта
• Логотип на главной странице
• Прочие статические ресурсы

На этой странице рассказывается, как использовать каждый тип статических ресурсов.

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

export default defineConfig({
  root: 'docs',
});

#Статические ресурсы, используемые в файлах MDX

Вы можете импортировать статические ресурсы в Markdown- или MDX-файлах. Rspress использует статические ресурсы Rsbuild под капотом.

#Обычные статические ресурсы

Например, если структура директорий выглядит следующим образом:

Если изображение находится в той же директории, что и Markdown-файл, укажите его следующим образом:

![](./demo.png)

Также вы можете использовать тег img напрямую в файлах .mdx:

<img src="./demo.png" />

Оба способа использования преобразуются в:

import image from './demo.png';

<img src={image}>

Также вы можете импортировать видео, аудиофайлы и другие статические ресурсы. Остальные варианты использования соответствуют Rsbuild.

#Папка public

Папка public внутри директории docs хранит статические ресурсы. Эти ресурсы не обрабатываются во время сборки и могут использоваться напрямую по URL.

• При запуске dev-сервера эти ресурсы будут доступны по пути, соответствующему base (по умолчанию — /).
• При выполнении production-сборки эти файлы копируются в директорию сборки документации (outdir).

Например, в папку public можно поместить такие файлы, как robots.txt, manifest.json или favicon.ico.

Вот пример размещения статических ресурсов в папке public. Если корневая директория документации — docs, и структура директорий выглядит следующим образом:

В указанном выше файле index.mdx вы можете использовать абсолютный путь для ссылки на demo.png:

![](/demo.png)

Когда сайт настроен с указанием параметра base и вы используете абсолютный путь в теге img, используйте normalizeImagePath из @rspress/core/runtime, чтобы добавить base к src:

import { normalizeImagePath } from '@rspress/core/runtime';

<img src={normalizeImagePath('/demo.png')} />;

#Логотип в левом верхнем углу

В Rspress задайте изображение логотипа в левом верхнем углу с помощью поля logo. Например:

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

export default defineConfig({
  logo: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
});

Поле logo поддерживает как строковую, так и объектную конфигурацию.

Когда logo — строка, возможны следующие варианты:

• Внешняя ссылка, как в примере выше.
• Абсолютный путь, например /rspress-logo.png. В этом случае Rspress находит rspress-logo.png в папке public внутри директории docs и отображает его.
• Относительный путь, например ./docs/public/rspress-logo.png. В этом случае Rspress разрешает rspress-logo.png относительно корня проекта и отображает его.

Если вашему сайту нужны разные логотипы для тёмного и светлого режима, используйте объектную форму:

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

export default defineConfig({
  logo: {
    light: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
    dark: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
  },
});

Здесь light — это путь к логотипу для светлого режима, а dark — путь к логотипу для тёмного режима. Оба значения поддерживают те же форматы, что и строковый вариант выше.

#Favicon

В Rspress иконку сайта можно указать с помощью поля icon. Например:

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

export default defineConfig({
  icon: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
});

Поле icon поддерживает строку или URL:

• Внешняя ссылка, как в примере выше.
• Абсолютный путь, например /favicon.ico. В этом случае Rspress находит favicon.ico в папке public внутри корня docs и отображает его.
• Относительный путь, например ./docs/public/favicon.ico. В этом случае Rspress разрешает favicon.ico относительно корня проекта и отображает его.
• Протокол file:// или как URL, например file:///local_path/favicon.ico. В этом случае Rspress использует локальный абсолютный путь /local_path/favicon.ico напрямую.

#Логотип на главной странице

В конфигурации метаданных главной страницы укажите изображение логотипа через hero.image.src. Например:

---
pageType: home

hero:
  image:
    src: https://avatars.githubusercontent.com/u/56892468?s=200&v=4
    alt: Rspress
---

Здесь src — строка, поддерживаются следующие варианты:

• Внешняя ссылка, как в примере выше.
• Абсолютный путь, например /rspress-logo.png. В этом случае Rspress находит rspress-logo.png в папке public внутри директории docs и отображает его.

#Другие статические ресурсы

В некоторых сценариях может потребоваться разместить специфические статические ресурсы, например файл _headers для настройки пользовательских HTTP-заголовков в Netlify.

В этом случае поместите такие ресурсы напрямую в папку public внутри директории docs, например docs/public. Во время сборки Rspress автоматически копирует все ресурсы из папки public в выходную директорию, чтобы их можно было развернуть вместе с сайтом.