|
|
import{_ as a,c as i,ag as n,o as e}from"./chunks/framework.C1C4sYC0.js";const g=JSON.parse('{"title":"Маршрутизация","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"ru/guide/routing.md","filePath":"ru/guide/routing.md","lastUpdated":1736187882000}'),p={name:"ru/guide/routing.md"};function t(l,s,h,k,d,r){return e(),i("div",null,s[0]||(s[0]=[n(`<h1 id="routing" tabindex="-1">Маршрутизация <a class="header-anchor" href="#routing" aria-label="Permalink to "Маршрутизация {#routing}""></a></h1><h2 id="file-based-routing" tabindex="-1">Маршрутизация на основе файлов <a class="header-anchor" href="#file-based-routing" aria-label="Permalink to "Маршрутизация на основе файлов {#file-based-routing}""></a></h2><p>VitePress использует маршрутизацию на основе файлов, что означает, что сгенерированные HTML-страницы отображаются на основе структуры папок исходных файлов Markdown. Например, при следующей структуре папок:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ guide</span></span>
|
|
|
<span class="line"><span>│ ├─ getting-started.md</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>├─ index.md</span></span>
|
|
|
<span class="line"><span>└─ prologue.md</span></span></code></pre></div><p>Сгенерированные HTML-страницы будут выглядеть так:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>index.md --> /index.html (доступна по адресу /)</span></span>
|
|
|
<span class="line"><span>prologue.md --> /prologue.html</span></span>
|
|
|
<span class="line"><span>guide/index.md --> /guide/index.html (доступна по адресу /guide/)</span></span>
|
|
|
<span class="line"><span>guide/getting-started.md --> /guide/getting-started.html</span></span></code></pre></div><p>Полученный HTML можно разместить на любом веб-сервере, который может обслуживать статические файлы.</p><h2 id="root-and-source-directory" tabindex="-1">Корневая директория и директория с исходными файлами <a class="header-anchor" href="#root-and-source-directory" aria-label="Permalink to "Корневая директория и директория с исходными файлами {#root-and-source-directory}""></a></h2><p>В файловой структуре проекта VitePress есть два важных понятия: <strong>корень проекта</strong> и <strong>директория с исходными файлами</strong>.</p><h3 id="project-root" tabindex="-1">Корень проекта <a class="header-anchor" href="#project-root" aria-label="Permalink to "Корень проекта {#project-root}""></a></h3><p>Корень проекта — это место, где VitePress будет пытаться искать специальный каталог <code>.vitepress</code>. Директория <code>.vitepress</code> — это зарезервированное место для конфигурационного файла VitePress, кэша dev-сервера, результатов сборки и дополнительного кода настройки темы.</p><p>Когда вы запускаете <code>vitepress dev</code> или <code>vitepress build</code> из командной строки, VitePress будет использовать текущий рабочий каталог в качестве корня проекта. Чтобы указать подкаталог в качестве корневого, нужно передать команде относительный путь. Например, если ваш проект VitePress находится в папке <code>./docs</code>, вам следует выполнить команду <code>vitepress dev docs</code>:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ docs # корень проекта</span></span>
|
|
|
<span class="line"><span>│ ├─ .vitepress # директория с настройками</span></span>
|
|
|
<span class="line"><span>│ ├─ getting-started.md</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>└─ ...</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs</span></span></code></pre></div><p>В результате получится следующее сопоставление источника с HTML:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>docs/index.md --> /index.html (доступна по адресу /)</span></span>
|
|
|
<span class="line"><span>docs/getting-started.md --> /getting-started.html</span></span></code></pre></div><h3 id="source-directory" tabindex="-1">Директория с исходными файлами <a class="header-anchor" href="#source-directory" aria-label="Permalink to "Директория с исходными файлами {#source-directory}""></a></h3><p>Директория с исходными файлами — это место, где хранятся ваши исходные файлы Markdown. По умолчанию она совпадает с корнем проекта. Однако вы можете настроить её с помощью параметра <a href="./../reference/site-config#srcdir"><code>srcDir</code></a>.</p><p>Опция <code>srcDir</code> разрешается относительно корня проекта. Например, с помощью <code>srcDir: 'src'</code>, ваша файловая структура будет выглядеть следующим образом:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>. # корень проекта</span></span>
|
|
|
<span class="line"><span>├─ .vitepress # директория с настройками</span></span>
|
|
|
<span class="line"><span>└─ src # директория с исходными файлами</span></span>
|
|
|
<span class="line"><span> ├─ getting-started.md</span></span>
|
|
|
<span class="line"><span> └─ index.md</span></span></code></pre></div><p>Итоговое сопоставление исходного кода с HTML:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>src/index.md --> /index.html (доступна по адресу /)</span></span>
|
|
|
<span class="line"><span>src/getting-started.md --> /getting-started.html</span></span></code></pre></div><h2 id="linking-between-pages" tabindex="-1">Связи между страницами <a class="header-anchor" href="#linking-between-pages" aria-label="Permalink to "Связи между страницами {#linking-between-pages}""></a></h2><p>При создании ссылок между страницами можно использовать как абсолютные, так и относительные пути. Обратите внимание, что хотя расширения <code>.md</code> и <code>.html</code> будут работать, лучше всего опускать расширения файлов, чтобы VitePress мог генерировать конечные URL на основе вашего конфига.</p><div class="language-md vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Будут работать --></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Первые шаги</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./getting-started</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Первые шаги</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">../guide/getting-started</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Не будут работать --></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Первые шаги</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./getting-started.md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Первые шаги</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./getting-started.html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>Узнайте больше о ссылках на такие ресурсы, как изображения, в главе <a href="./asset-handling">Обработка ресурсов</a>.</p><h3 id="linking-to-non-vitepress-pages" tabindex="-1">Ссылки на страницы, не принадлежащие VitePress <a class="header-anchor" href="#linking-to-non-vitepress-pages" aria-label="Permalink to "Ссылки на страницы, не принадлежащие VitePress {#linking-to-non-vitepress-pages}""></a></h3><p>Если вы хотите создать ссылку на страницу вашего сайта, которая не создана VitePress, вам нужно будет либо использовать полный URL-адрес (откроется в новой вкладке), либо явно указать цель:</p><p><strong>Разметка</strong></p><div class="language-md vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Ссылка на pure.html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/pure.html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">){target="_self"}</span></span></code></pre></div><p><strong>Результат</strong></p><p><a href="/pure.html" target="_self">Ссылка на pure.html</a></p><div class="tip custom-block"><p class="custom-block-title">Примечание</p><p>В ссылках Markdown к URL-адресу автоматически добавляется значение параметра <code>base</code>. Это означает, что если вы хотите создать ссылку на страницу за пределами <code>base</code>, вам понадобится что-то вроде <code>../../pure.html</code> в ссылке (разрешаемой браузером относительно текущей страницы).</p><p>Альтернативно можно напрямую использовать синтаксис тега ссылки:</p><div class="language-md vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/pure.html"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"_self"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Ссылка на pure.html</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div><h2 id="generating-clean-url" tabindex="-1">Создание чистого URL-адреса <a class="header-anchor" href="#generating-clean-url" aria-label="Permalink to "Создание чистого URL-адреса {#generating-clean-url}""></a></h2><div class="warning custom-block"><p class="custom-block-title">Требуется поддержка сервера</p><p>Для обслуживания чистых URL-адресов с помощью VitePress требуется поддержка на стороне сервера.</p></div><p>По умолчанию VitePress разрешает входящие ссылки на URL-адреса, заканчивающиеся на <code>.html</code>. Однако некоторые пользователи могут предпочесть «Чистые URL-адреса» без расширения <code>.html</code> — например, <code>example.com/path</code> вместо <code>example.com/path.html</code>.</p><p>Некоторые серверы или хостинговые платформы (например, Netlify, Vercel, GitHub Pages) предоставляют возможность сопоставлять URL-адрес типа <code>/foo</code> с <code>/foo.html</code>, если он существует, без перенаправления:</p><ul><li>Страницы Netlify и GitHub поддерживают это по умолчанию.</li><li>Vercel требует включить <a href="https://vercel.com/docs/concepts/projects/project-configuration#cleanurls" target="_blank" rel="noreferrer">опцию <code>cleanUrls</code> в <code>vercel.json</code></a>.</li></ul><p>Если эта функция вам доступна, вы также можете включить собственную опцию конфигурации VitePress <a href="./../reference/site-config#cleanurls"><code>cleanUrls</code></a>, чтобы обеспечить следующее поведение:</p><ul><li>Входящие ссылки между страницами генерируются без расширения <code>.html</code>.</li><li>Если текущий путь заканчивается на <code>.html</code>, маршрутизатор выполнит перенаправление на стороне клиента на путь без расширений.</li></ul><p>Однако если вы не можете настроить свой сервер с такой поддержкой, вам придётся вручную прибегнуть к следующей структуре каталогов:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ getting-started</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>├─ installation</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>└─ index.md</span></span></code></pre></div><h2 id="route-rewrites" tabindex="-1">Перезапись маршрутов <a class="header-anchor" href="#route-rewrites" aria-label="Permalink to "Перезапись маршрутов {#route-rewrites}""></a></h2><p>Вы можете настроить сопоставление между структурой исходного каталога и создаваемыми страницами. Это полезно, когда у вас сложная структура проекта. Допустим, у вас есть монорепо с несколькими пакетами, и вы хотите поместить документацию вместе с исходными файлами, как это сделано здесь:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ packages</span></span>
|
|
|
<span class="line"><span>│ ├─ pkg-a</span></span>
|
|
|
<span class="line"><span>│ │ └─ src</span></span>
|
|
|
<span class="line"><span>│ │ ├─ foo.md</span></span>
|
|
|
<span class="line"><span>│ │ └─ index.md</span></span>
|
|
|
<span class="line"><span>│ └─ pkg-b</span></span>
|
|
|
<span class="line"><span>│ └─ src</span></span>
|
|
|
<span class="line"><span>│ ├─ bar.md</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span></code></pre></div><p>И вы хотите, чтобы страницы VitePress генерировались следующим образом:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>packages/pkg-a/src/index.md --> /pkg-a/index.html</span></span>
|
|
|
<span class="line"><span>packages/pkg-a/src/foo.md --> /pkg-a/foo.html</span></span>
|
|
|
<span class="line"><span>packages/pkg-b/src/index.md --> /pkg-b/index.html</span></span>
|
|
|
<span class="line"><span>packages/pkg-b/src/bar.md --> /pkg-b/bar.html</span></span></code></pre></div><p>Этого можно добиться, настроив опцию <a href="./../reference/site-config#rewrites"><code>rewrites</code></a> следующим образом:</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/config.js">.vitepress/config.js</span></div><div class="language-ts vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rewrites: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'packages/pkg-a/src/index.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'pkg-a/index.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'packages/pkg-a/src/foo.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'pkg-a/foo.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'packages/pkg-b/src/index.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'pkg-b/index.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'packages/pkg-b/src/bar.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'pkg-b/bar.md'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><p>Опция <code>rewrites</code> также поддерживает динамические параметры маршрута. В приведённом выше примере, если у вас много пакетов, перечислять все пути было бы скучно. Учитывая, что все они имеют одинаковую структуру файлов, можно упростить конфигурацию следующим образом:</p><div class="language-ts vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rewrites: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'packages/:pkg/src/:slug*'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">':pkg/:slug*'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Пути перезаписи компилируются с помощью пакета <code>path-to-regexp</code> — обратитесь к <a href="https://github.com/pillarjs/path-to-regexp#parameters" target="_blank" rel="noreferrer">его документации</a> за более сложным синтаксисом.</p><p>Пути перезаписи компилируются с помощью пакета <code>path-to-regexp</code> — обратитесь к <a href="https://github.com/pillarjs/path-to-regexp/tree/6.x#parameters" target="_blank" rel="noreferrer">его документации</a> за более сложным синтаксисом.</p><p><code>rewrites</code> также может быть функцией, которая получает исходный путь и возвращает новый:</p><div class="language-ts vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rewrites</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">replace</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">packages</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\\/</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">[</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">/]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">)</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\\/</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">src</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\\/</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'$1/'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">Относительные ссылки с переписыванием</p><p>Когда переписывание включено, <strong>относительные ссылки должны быть основаны на переписанных путях</strong>. Например, чтобы создать относительную ссылку с <code>packages/pkg-a/src/pkg-a-code.md</code> на <code>packages/pkg-b/src/pkg-b-code.md</code>, нужно использовать:</p><div class="language-md vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Ссылка на PKG B</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">../pkg-b/pkg-b-code</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></div><h2 id="dynamic-routes" tabindex="-1">Динамические маршруты <a class="header-anchor" href="#dynamic-routes" aria-label="Permalink to "Динамические маршруты {#dynamic-routes}""></a></h2><p>Вы можете создать множество страниц, используя один файл Markdown и динамические данные. Например, вы можете создать файл <code>packages/[pkg].md</code>, который будет генерировать соответствующую страницу для каждого пакета в проекте. Здесь сегмент <code>[pkg]</code> является <strong>параметром</strong> маршрута, который отличает каждую страницу от других.</p><h3 id="paths-loader-file" tabindex="-1">Файл загрузчика путей <a class="header-anchor" href="#paths-loader-file" aria-label="Permalink to "Файл загрузчика путей {#paths-loader-file}""></a></h3><p>Поскольку VitePress — это генератор статических сайтов, возможные пути страниц должны быть определены во время сборки. Поэтому динамическая маршрутная страница <strong>должна</strong> сопровождаться <strong>файлом загрузчика путей</strong>. Для <code>packages/[pkg].md</code> нам понадобится <code>packages/[pkg].paths.js</code> (<code>.ts</code> также поддерживается):</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>└─ packages</span></span>
|
|
|
<span class="line"><span> ├─ [pkg].md # шаблон маршрута</span></span>
|
|
|
<span class="line"><span> └─ [pkg].paths.js # загрузчик путей маршрута</span></span></code></pre></div><p>Загрузчик путей должен предоставлять объект с методом <code>paths</code> в качестве экспорта по умолчанию. Метод <code>paths</code> должен возвращать массив объектов со свойством <code>params</code>. Для каждого из этих объектов будет создана соответствующая страница.</p><p>Дан следующий массив <code>paths</code>:</p><div class="language-js vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// packages/[pkg].paths.js</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{ params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'foo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } }, { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } }]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Сгенерированные HTML-страницы будут выглядеть так:</p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>└─ packages</span></span>
|
|
|
<span class="line"><span> ├─ foo.html</span></span>
|
|
|
<span class="line"><span> └─ bar.html</span></span></code></pre></div><h3 id="multiple-params" tabindex="-1">Несколько параметров <a class="header-anchor" href="#multiple-params" aria-label="Permalink to "Несколько параметров {#multiple-params}""></a></h3><p>Динамический маршрут может содержать несколько параметров:</p><p><strong>Структура файлов</strong></p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>└─ packages</span></span>
|
|
|
<span class="line"><span> ├─ [pkg]-[version].md</span></span>
|
|
|
<span class="line"><span> └─ [pkg]-[version].paths.js</span></span></code></pre></div><p><strong>Загрузчик путей</strong></p><div class="language-js vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'foo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'1.0.0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } },</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'foo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'2.0.0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } },</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'1.0.0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } },</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'2.0.0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>Результат</strong></p><div class="language- vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>└─ packages</span></span>
|
|
|
<span class="line"><span> ├─ foo-1.0.0.html</span></span>
|
|
|
<span class="line"><span> ├─ foo-2.0.0.html</span></span>
|
|
|
<span class="line"><span> ├─ bar-1.0.0.html</span></span>
|
|
|
<span class="line"><span> └─ bar-2.0.0.html</span></span></code></pre></div><h3 id="dynamically-generating-paths" tabindex="-1">Динамически генерируемые пути <a class="header-anchor" href="#dynamically-generating-paths" aria-label="Permalink to "Динамически генерируемые пути {#dynamically-generating-paths}""></a></h3><p>Модуль загрузчика путей запускается в Node.js и выполняется только во время сборки. Вы можете динамически генерировать массив путей, используя любые данные, как локальные, так и удалённые.</p><p>Генерация путей из локальных файлов:</p><div class="language-js vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fs </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'fs'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fs.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readdirSync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'packages'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pkg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg } }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Генерация путей из удалённых данных:</p><div class="language-js vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pkgs</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://my-api.com/packages'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">json</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pkgs.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pkg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> params: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pkg: pkg.name,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> version: pkg.version</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="accessing-params-in-page" tabindex="-1">Доступ к параметрам на странице <a class="header-anchor" href="#accessing-params-in-page" aria-label="Permalink to "Доступ к параметрам на странице {#accessing-params-in-page}""></a></h3><p>Вы можете использовать параметры для передачи дополнительных данных на каждую страницу. Файл маршрута Markdown может получить доступ к параметрам текущей страницы в выражениях Vue через глобальное свойство <code>$params</code>:</p><div class="language-md vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> package name: {{ $params.pkg }}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> version: {{ $params.version }}</span></span></code></pre></div><p>Вы также можете получить доступ к параметрам текущей страницы через Runtime API <a href="./../reference/runtime-api#usedata"><code>useData</code></a>. Это доступно как в файлах Markdown, так и в компонентах Vue:</p><div class="language-vue vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// params — это ref-ссылка Vue</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">params</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(params.value)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="rendering-raw-content" tabindex="-1">Рендеринг необработанного содержимого <a class="header-anchor" href="#rendering-raw-content" aria-label="Permalink to "Рендеринг необработанного содержимого {#rendering-raw-content}""></a></h3><p>Параметры, передаваемые странице, будут сериализованы в полезной нагрузке клиентского JavaScript, поэтому вам следует избегать передачи в параметрах больших объемов данных, например, необработанного Markdown или HTML-контента, полученного из удалённой CMS.</p><p>Вместо этого вы можете передавать такое содержимое на каждую страницу с помощью свойства <code>content</code> каждого объекта path:</p><div class="language-js vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> posts</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://my-cms.com/blog-posts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">json</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> posts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">post</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> params: { id: post.id },</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: post.content </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// необработанный Markdown или HTML</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Затем используйте следующий специальный синтаксис, чтобы отобразить содержимое как часть самого файла Markdown:</p><div class="language-md vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- @content --></span></span></code></pre></div>`,91)]))}const o=a(p,[["render",t]]);export{g as __pageData,o as default};
|
