diff --git a/docs/ru/guide/asset-handling.md b/docs/ru/guide/asset-handling.md index b2f26719..4cb0c0d4 100644 --- a/docs/ru/guide/asset-handling.md +++ b/docs/ru/guide/asset-handling.md @@ -36,23 +36,15 @@ PDF-файлы или другие документы, на которые ес ## Базовый URL {#base-url} -Если ваш сайт развёрнут на URL-адресе, не являющемся корневым, вам нужно установить параметр `base` в файле `.vitepress/config.js`. Например, если вы планируете развернуть свой сайт на `https://foo.github.io/bar/`, то параметр `base` следует установить на `'/bar/'` (он всегда должен начинаться и заканчиваться слэшем). +Если ваш сайт развёрнут не в корне URL, задайте параметр [`base`](../reference/site-config#base). Например, если вы планируете разместить сайт по адресу `https://foo.github.io/bar/`, то `base` должен быть установлен в `'/bar/'`. -Все пути к статическим ресурсам автоматически обрабатываются с учётом различных значений конфигурации `base`. Например, если в вашей разметке есть абсолютная ссылка на ресурс в директории `public`: +Ссылки на статические ресурсы автоматически корректируются под `base`, поэтому абсолютная ссылка на файл в `public` работает с любым `base` и никогда не требует обновления: ```md ![Изображение](/image-inside-public.png) ``` -В этом случае вам **не** нужно обновлять его при изменении значения конфигурации `base`. - -Однако если вы создаете компонент темы, который динамически ссылается на активы, например, изображение, атрибут `src` которого основан на значении конфигурации темы: - -```vue - -``` - -В этом случае рекомендуется обернуть путь с помощью [хелпера `withBase`](../reference/runtime-api#withbase), предоставляемого VitePress: +Внимания требуют только динамически формируемые пути — например, изображение, `src` которого основан на значении конфигурации темы. Оборачивайте такие пути хелпером [`withBase`](../reference/runtime-api#withbase), чтобы `base` подставлялся во время выполнения: ```vue + +``` + +Передайте шаблонную ссылку элемента, несущего класс, чтобы dev-режим мог разрешить на нём иконку. Элементу нужны правила `mask`, которые поставляются с темой по умолчанию; в кастомной теме без них dev применяет встроенный эквивалент, а сгенерированная таблица стилей включает базовые правила с нулевой специфичностью для продакшена. + +При использовании темы по умолчанию компонент `VPIcon` из `vitepress/theme` оборачивает этот композабл (а также принимает сырую строку `{ svg }`): + +```vue-html + +``` + +Иконки, отрисовываемые только на клиенте (например, внутри ``), не могут быть собраны во время сборки — вместо этого перечислите их в [`icons.include`](./site-config#icons). + ## `withBase` {#withbase} - **Тип**: `(path: string) => string` diff --git a/docs/ru/reference/site-config.md b/docs/ru/reference/site-config.md index 6c593eda..50aae646 100644 --- a/docs/ru/reference/site-config.md +++ b/docs/ru/reference/site-config.md @@ -248,6 +248,13 @@ type HeadConfig = | [string, Record, string] ``` +Записи head из конфигурации сайта, [конфигурации локали](../guide/i18n), [конфигурации на уровне директории](#directory-level-overrides), [метаданные](./frontmatter-config#head) и [`transformHead`](#transformhead) объединяются в этом порядке. Более поздняя запись заменяет более раннюю с тем же ключом вместо того, чтобы добавляться к ней: + +- Любой элемент с атрибутом `id` идентифицируется по своему `id`. +- Элемент `meta` без `id` идентифицируется по своему первому атрибуту, отличному от `content` (например, `name`, `property`, `http-equiv`), и значению этого атрибута. + +Остальные элементы никогда не считаются повторяющимися и не заменяют друг друга. Чтобы отрисовать несколько тегов `meta`, которые имели бы одинаковый ключ, например несколько ``, задайте каждому из них уникальный `id` + #### Пример: Добавление значка сайта {#example-adding-a-favicon} ```ts @@ -367,6 +374,8 @@ export default { Базовый URL-адрес, по которому будет развёрнут сайт. Этот параметр необходимо задать, если вы планируете развернуть свой сайт по подпути, например, для страниц GitHub. Если вы планируете развернуть свой сайт на `https://foo.github.io/bar/`, то вам следует установить base на `'/bar/'`. Он всегда должен начинаться и заканчиваться косой чертой. +Единственное исключение — `'./'`, которое создаёт [переносимую сборку](../guide/deploy#relocatable-builds-relative-base): страницы ссылаются на всё относительно своего собственного расположения, поэтому один и тот же результат сборки работает из любого подпути (шлюзы IPFS, архивы) без пересборки и остаётся просматриваемым при открытии напрямую из файловой системы. + Параметр `base` автоматически добавляется ко всем URL, которые начинаются с `/` в других опциях, поэтому вам нужно указать его только один раз. ```ts @@ -375,6 +384,8 @@ export default { } ``` +Также может быть задан для отдельной сборки с помощью `vitepress build --base /base/`. + ## Маршрутизация {#routing} ### cleanUrls {#cleanurls} @@ -456,6 +467,44 @@ export default { } ``` +### assetsBase + +- Тип: `string` +- По умолчанию: `undefined` + +Префикс URL, с которого раздаются сгенерированные ресурсы (всё, что находится под [`assetsDir`](#assetsdir)) — обычно CDN. Должен быть абсолютным URL, URL без указания протокола (начинающимся с `//`) или абсолютным путём от корня сайта (начинающимся с `/`); при отсутствии завершающего слэша он добавляется автоматически. + +```ts +export default { + base: '/', + assetsBase: 'https://cdn.example.com/' + // скрипты, стили, шрифты и импортированные изображения разрешаются в + // https://cdn.example.com/assets/* +} +``` + +Итоговый URL ресурса — это `assetsBase`, объединённый с относительным путём файла в выводе, поэтому CDN должен зеркалировать структуру `outDir` (загрузите `outDir/assets`, чтобы он был доступен по адресу `/assets/*`). HTML-страницы, ссылки Markdown, файлы [`public`](../guide/asset-handling#the-public-directory) и `hashmap.json` остаются на [`base`](#base). + +Когда `assetsBase` указывает на другой домен, VitePress добавляет `crossorigin` к сгенерированным тегам script и preload — CDN должен отправлять `Access-Control-Allow-Origin` для домена вашего сайта (модульные скрипты всегда загружаются в режиме CORS). + +Это влияет только на продакшен-сборки. Команда `vitepress preview` раздаёт значение `assetsBase`, заданное как путь от корня сайта (например, `/cdn/`), из локальной папки dist, а внешний адрес — запрашивает напрямую по настоящему URL. Значение также можно задать для отдельной сборки с помощью `vitepress build --assetsBase https://cdn.example.com/`. + +### icons + +- Тип: `{ include?: string[] }` + +Опции для сгенерированных стилей иконок. Сборка собирает каждую иконку iconify, отрисованную во время SSR. Имена указываются полностью в формате `collection:name`, разрешаясь относительно пакетов `@iconify-json/*`, объявленных в зависимостях вашего проекта. + +Иконки, отрисовываемые только на клиенте — внутри `` или после гидратации — невидимы для сбора во время SSR. Перечислите их в `include`, чтобы принудительно добавить в таблицу стилей: + +```ts +export default { + icons: { + include: ['mdi:home', 'simple-icons:discord'] + } +} +``` + ### cacheDir {#cachedir} - Тип: `string` @@ -625,6 +674,7 @@ export default { interface SSGContext { content: string teleports?: Record + vpIcons: Set [key: string]: any } ``` @@ -639,6 +689,10 @@ interface SSGContext { Не мутируйте ничего внутри `context`. ::: +::: note +Ссылка на таблицу стилей иконок на этом этапе всё ещё содержит заглушку `vp-icons.__VP_ICONS_HASH__.css` — хеш содержимого появляется только после того, как отрендерены все страницы, и подставляется сразу после этого. Хуки, которые встраивают или проставляют отпечаток ресурсам в head, должны пропускать этот тег. +::: + ```ts export default { async transformHead(context) {