Компонент `<Layout/>` темы по умолчанию имеет несколько слотов, которые можно использовать для вставки содержимого в определённые места страницы. Вот пример внедрения компонента в структуру before:
Компонент `<Layout/>` темы по умолчанию имеет несколько слотов, которые можно использовать для вставки содержимого в определённые места страницы. Вот пример внедрения компонента перед оглавлением:
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
@ -131,8 +131,8 @@ import MyLayout from './MyLayout.vue'
export default {
extends: DefaultTheme,
// переопределяем макет с помощью компонента-обёртки, который
// вводит слоты
// переопределяем макет с помощью компонента-обёртки,
@ -175,7 +175,7 @@ HTML, обёрнутый `<code>`, будет отображаться как е
</div>
## Unescape в блоках кода {#unescape-in-code-blocks}
## Отключение экранирования в блоках кода {#unescape-in-code-blocks}
По умолчанию все изолированные блоки кода автоматически оборачиваются `v-pre`, поэтому внутри них не будет обрабатываться синтаксис Vue. Чтобы включить интерполяцию в стиле Vue внутри фигурных скобок, можно добавить к языку суффикс `-vue`, например `js-vue`:
@ -199,7 +199,9 @@ HTML, обёрнутый `<code>`, будет отображаться как е
VitePress имеет [встроенную поддержку](https://vitejs.dev/guide/features.html#css-pre-processors) для препроцессоров CSS: файлы `.scss`, `.sass`, `.less`, `.styl` и `.stylus`. Для них не нужно устанавливать специфические для Vite плагины, но сам соответствующий препроцессор должен быть установлен:
```
::: code-group
```sh [npm]
# .scss и .sass
npm install -D sass
@ -210,7 +212,41 @@ npm install -D less
npm install -D stylus
```
Затем вы можете использовать следующее в Markdown и компонентах темы:
```sh [pnpm]
# .scss и .sass
pnpm add -D sass
# .less
pnpm add -D less
# .styl и .stylus
pnpm add -D stylus
```
```sh [yarn]
# .scss и .sass
yarn add -D sass
# .less
yarn add -D less
# .styl и .stylus
yarn add -D stylus
```
```sh [bun]
# .scss и .sass
bun add -D sass
# .less
bun add -D less
# .styl и .stylus
bun add -D stylus
```
:::
Затем вы можете использовать соответствующий атрибут `lang` в Markdown и компонентах темы:
Leo
7 months ago
committed by
GitHub