diff --git a/docs/content/ru/advanced.md b/docs/content/ru/advanced.md new file mode 100644 index 000000000..2d8901999 --- /dev/null +++ b/docs/content/ru/advanced.md @@ -0,0 +1,134 @@ +--- +title: Продвинутое использование +description: 'Изучите продвинутое использование модуля @nuxt/content.' +position: 7 +category: Начало +--- + +## Программное использование + +`$content` доступен из **@nuxt/content**. + + + + Обратите внимание, что вы можете получить к нему доступ только **после того, как модуль будет загружен** Nuxt'ом. `require('@nuxt/content')` должно произойти в хуках или внутренних методах Nuxt. + + + +```js +export default { + modules: [, + '@nuxt/content' + ], + generate: { + async ready () { + const { $content } = require('@nuxt/content') + const files = await $content().only(['slug']).fetch() + console.log(files) + } + } +} +``` + +### Статическая генерация сайта + + + +Если вы используете Nuxt 2.13+, `nuxt export` имеет встроенную функцию сканирования, поэтому вам не нужно использовать `generate.routes`. + + + +При использовании `nuxt generate`, вам нужно указать динамические маршруты в [`generate.routes`](https://nuxtjs.org/api/configuration-generate/#routes), потому что Nuxt не знает какие маршруты нужно генерировать. + +**Пример** + +```js +export default { + modules: [, + '@nuxt/content' + ], + generate: { + async routes () { + const { $content } = require('@nuxt/content') + const files = await $content().only(['path']).fetch() + + return files.map(file => file.path === '/index' ? '/' : file.path) + } + } +} +``` + +## Хуки + +Этот модуль добавляет несколько хуков, которые вы можете использовать: + +### `content:file:beforeInsert` + +Позволяет добавить данные в документ прежде, чем он будет сохранен. + +Аргументы: +- `document` + - Тип: `Object` + - Свойства: + - Смотрите [написание контента](/writing) + + +**Пример** + +Возьмем к примеру блог, мы используем `file:beforeInsert` чтобы добавить `readingTime` в документ, используя [reading-time](https://github.com/ngryman/reading-time). + +> `text` это контент markdown файла перед тем, как он будет преобразован в JSON AST, вы можете использовать его на этом этапе, но он не возвращается API. + +```js +export default { + modules: [, + '@nuxt/content' + ], + hooks: { + 'content:file:beforeInsert': (document) => { + if (document.extension === '.md') { + const { time } = require('reading-time')(document.text) + + document.readingTime = time + } + } + } +} +``` + +## Обработка горячей перезагрузки + + + +В режиме разработке модуль автоматически вызывает действие стора(Vuex) `nuxtServerInit`(если задано) и `$nuxt.refresh()` для перезагрузки текущей страницы. + + + +В случае, если вам нужно слушать событие, чтобы выполнить что-то еще, вам нужно слушать событие `content:update` на стороне клиента, используя `$nuxt.$on('content:update')`: + +```js{}[plugins/update.client.js +export default function ({ store }) { + // Только в режиме разработки + if (process.dev) { + window.onNuxtReady(($nuxt) => { + $nuxt.$on('content:update', ({ event, path }) => { + // Обновить категории в сторе + store.dispatch('fetchCategories') + }) + }) + } +} +``` + +Затем добавьте ваш плагин в `nuxt.config.js`: + +```js{}[nuxt.config.js] +export default { + plugins: [ + '@/plugins/update.client.js' + ] +} +``` + +Теперь, каждый раз, когда вы будете обновлять файл в вашей директории `content/`, будет выполняться метод `fetchCategories`. +Эта документация использует его и вы можете узнать больше, взглянув на[plugins/categories.js](https://github.com/nuxt/content/blob/master/docs/plugins/categories.js). diff --git a/docs/content/ru/configuration.md b/docs/content/ru/configuration.md new file mode 100644 index 000000000..058667be8 --- /dev/null +++ b/docs/content/ru/configuration.md @@ -0,0 +1,176 @@ +--- +title: Настройка +description: 'Вы можете настроить @nuxt/content через свойство content в вашем nuxt.config.js.' +category: Начало +position: 6 +--- + +Вы можете настроить `@nuxt/content` через свойство `content` в вашем `nuxt.config.js`. + +```js{}[nuxt.config.js] +export default { + content: { + // Мои настройки + } +} +``` + +Смотрите [Настройки по умолчанию](#defaults). + +## Параметры + +### `apiPrefix` + +- Тип: `String` +- По умолчанию: `'/_content'` + +Маршрут, использующийся для клиентских API вызовов и SSE(Server-Sent Events — «события, посылаемые сервером»). + +```js{}[nuxt.config.js] +content: { + // $content api будет доступен на localhost:3000/content-api + apiPrefix: 'content-api' +} +``` + +### `dir` + +- Тип: `String` +- По умолчанию: `'content'` + +Директория, используемая для написания контента. +Вы можете указать абсолютный или относительный путь, будет обработано Nuxt [srcDir](https://nuxtjs.org/api/configuration-srcdir). + +```js{}[nuxt.config.js] +content: { + dir: 'my-content' // читать контент из my-content/ +} +``` + +### `fullTextSearchFields` + +- Тип: `Array` +- По умолчанию: `['title', 'description', 'slug', 'text']` + +Поля, которые нужно проиндексировать, для возможности поиска по ним, почитайте подробнее об этом [здесь](/fetching#searchfield-value). + +`text` специальный ключ, включающий ваш Markdown перед преобразованием в AST. + +```js{}[nuxt.config.js] +content: { + // Искать только по title и description + fullTextSearchFields: ['title', 'description'] +} +``` + +### `markdown` + +Этот модуль использует [remark](https://github.com/remarkjs/remark) «под капотом» для компиляции markdown файлов в JSON AST, который будет храниться в переменной `body`. + +По умолчанию этот модуль использует плагины для улучшения чтения markdown. Вы можете добавить собственные в `plugins` или переопределить плагины по умолчанию с помощью `basePlugins`. Каждый плагин настраивается с использованием его имени в camelCase: `remark-external-links` => `externalLinks`. + +> Вы можете посмотреть плагины для remark [здесь](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins) + +### `markdown.basePlugins` + +- Тип: `Array` +- По умолчанию: `['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes']` + +### `markdown.plugins` + +- Тип: `Array` +- По умолчанию: `[]` + +### `markdown.externalLinks` + +- Тип: `Object` +- По умолчанию: `{}` + +Вы можете контролировать поведение ссылок с помощью этой опции. Вы можете посмотреть список настроек [здесь](https://github.com/remarkjs/remark-external-links#api). + +```js{}[nuxt.config.js] +content: { + markdown: { + externalLinks: { + target: '_self' // отключить target="_blank" + rel: false // отключить rel="nofollow noopener" + } + } +} +``` + +### `markdown.footnotes` + +- Тип: `Object` +- По умолчанию: `{ inlineNotes: true }` + +Вы можете контролировать поведение сносок с помощью этой опции. Вы можете посмотреть список настроек [здесь](https://github.com/remarkjs/remark-footnotes#remarkusefootnotes-options). + +### `markdown.prism.theme` + +- Тип: `String` +- По умолчанию: `'prismjs/themes/prism.css'` + +Этот модуль добавляет подсветку синтаксиса кода в markdown используя [PrismJS](https://prismjs.com). + +Автоматически ставит тему PrismJS из вашего файла конфигурации Nuxt.js config, поэтому вы можете использовать различные темы, список [тем для prism](https://github.com/PrismJS/prism-themes): + +```js{}[nuxt.config.js] +content: { + markdown: { + prism: { + theme: 'prism-themes/themes/prism-material-oceanic.css' + } + } +} +``` + +Для отключения темы по умолчанию установите prism значение `false`: + +```js{}[nuxt.config.js] +content: { + markdown: { + prism: { + theme: false + } + } +} +``` + +### `yaml` + +- Тип: `Object` +- По умолчанию: `{}` + +Этот модуль использует `js-yaml` для чтения yaml файлов, вы можете посмотреть список настроек [здесь](https://github.com/nodeca/js-yaml#api). + +Обратите внимание, что мы выставляем параметр `json: true`. + +### `csv` + +- Тип: `Object` +- По умолчанию: `{}` + +Этот модуль использует `node-csvtojson` для чтения csv файлов, вы можете посмотреть список настроек [здесь](https://github.com/Keyang/node-csvtojson#parameters). + +## Настройки по умолчанию + +```js{}[nuxt.config.js] +export default { + content: { + apiPrefix: '_content', + dir: 'content', + fullTextSearchFields: ['title', 'description', 'slug', 'text'], + markdown: { + externalLinks: {}, + basePlugins: ['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes'], + plugins: [], + prism: { + theme: 'prismjs/themes/prism.css' + } + }, + yaml: {}, + csv: {} + } +} +``` diff --git a/docs/content/ru/displaying.md b/docs/content/ru/displaying.md new file mode 100644 index 000000000..a02b4d1d4 --- /dev/null +++ b/docs/content/ru/displaying.md @@ -0,0 +1,56 @@ +--- +title: Отображение контента +description: 'Вы можете использовать компонент `` непосредственно в шаблоне для отображения вашего Markdown.' +position: 5 +category: Начало +--- + +
+Этот раздел только для Markdown файлов. + +## Component + +Вы можете использовать компонент `` непосредственно в шаблоне для отображения тела страницы: + +```vue + + + +``` + + +**Входные параметры:** +- document: + - Тип: `Object` + - `обязательное` + +Изучите больше о том, что вы можете писать в вашем markdown файле в разделе [написание контента](/writing#markdown). + +## Стили + +В зависимости от того, что вы используете для разработки своего приложения, вам может потребоваться написать стили для правильного отображения markdown. + +Компонент `` автоматически добавит класс `.nuxt-content` и вы сможете использовать его для стилизации: + +```css +.nuxt-content h1 { + /* мои пользовательские стили для h1 */ +} +``` + +Вы можете найти примеры в [директории документации](https://github.com/nuxt/content/blob/master/docs/pages/_slug.vue). diff --git a/docs/content/ru/fetching.md b/docs/content/ru/fetching.md new file mode 100644 index 000000000..2c147daf7 --- /dev/null +++ b/docs/content/ru/fetching.md @@ -0,0 +1,205 @@ +--- +title: Получение контента +description: 'Изучите как получать ваш статичный контент вместе с $content в вашем Nuxt.js проекте.' +position: 4 +category: Начало +--- + +Этот модуль глобально внедряет экземпляр `$content`, это значит, что вы можете получить доступ к `this.$content` из любого места. В плагинах, asyncData, fetch, nuxtServerInit и Middleware, вы можете получить к нему доступ из `context.$content`. + +## Методы + +### $content(путь) + +- `путь` + - Тип: `String` + - По умолчанию: `/` + - `обязательное` +- Возвращает последовательность цепочек + +> Вы можете передать несколько аргументов: `$content('articles', params.slug)` будет преобразовано в `/articles/${params.slug}` + +`путь` может быть файлом или директорией. Если это файл, то `fetch()` вернет `Object`, если директория, то вернет `Array`. + +Все приведенные ниже методы могут быть объединены в цепочку и возвращать последовательность цепочек, кроме `fetch`, который возвращает `Promise`. + +### only(ключи) + +- `ключи` + - Тип: `Array` | `String` + - `обязательное` + +Выберите подмножество полей. + +```js +const { title } = await this.$content('article-1').only(['title']).fetch() +``` + +### where(запрос) + +- `запрос` + - Тип: `Object` + - `обязательное` + +Отфильтровывает результаты по запросу. + +Где запросы основаны на подмножестве синтаксиса запросов mongoDB, примеры: `$eq`, `$ne`, `$gt`, `$gte`, `$lt`, `$lte`, `$in` и т.д. + +```js +// неявно (предполагает оператор $eq) +const articles = await this.$content('articles').where({ title: 'Home' }).fetch() +// явно $eq +const articles = await this.$content('articles').where({ title: { $eq: 'Home' } }).fetch() + +// $gt +const articles = await this.$content('articles').where({ age: { $gt: 18 } }).fetch() +// $in +const articles = await this.$content('articles').where({ name: { $in: ['odin', 'thor'] } }).fetch() +``` + +Этот модуль использует LokiJS под капотом, вы можете взглянуть на [примеры запросов](https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries). + +### sortBy(ключ, направление) + +- `ключ` + - Тип: `String` + - `обязательное` +- `направление` + - Тип: `String` + - Значение: `'asc'` или `'desc'` + - По умолчанию: `'asc'` + +Выполняет сортировку значений по ключу. + +```js +const articles = await this.$content('articles').sortBy('title').fetch() +``` + +> Может быть объединен в цепочку для сортировки по нескольким полям. + +### limit(кол-во) + +- `кол-во` + - Тип: `String` | `Number` + - `обязательное` + +Ограничивает количество результатов. + +```js +// получить только 5 статей +const articles = await this.$content('articles').limit(5).fetch() +``` + +### skip(кол-во) + +- `кол-во` + - Тип: `String` | `Number` + - `обязательное` + +Пропускает нужное количество результатов. + +```js +// получить следующие 5 статей +const articles = await this.$content('articles').skip(5).limit(5).fetch() +``` + +### search(поле, значение) + +- `поле` + - Тип: `String` + - `обязательное` +- `значение` + - Тип: `String` + +Выполняет полнотекстовый поиск по полю. `значение` необязательное, в этом случае `поле` является `значением` и поиск будет выполняться по всем определенным полнотекстовым полям поиска. + +Поля, по которым вы хотите искать, должны быть определены в опциях, чтобы их можно было проиндексировать, взгляните на [конфигурацию](/configuration#fulltextsearchfields). + +```js +// Поиск по полю title +const articles = await this.$content('articles').search('title', 'welcome').fetch() +// Поиск по всем определенным полям +const articles = await this.$content('articles').search('welcome').fetch() +``` + +### surround(ярлык, настройки) + +- `ярлык` + - Тип: `String` + - `обязательное` +- `настройки` + - Тип: `Object` + - По умолчанию: `{ before: 1, after: 1}` + +Получает предыдущий и следующий результаты по конкретному ярлыку. + +Вы всегда получите массив фиксированной длины, заполненный документами или `null`. + +```js +const [prev, next] = await this.$content('articles') + .only(['title', 'path']) + .sortBy('date') + .where({ isArchived: false }) + .surround('article-2') + .fetch() + +// Возвращает +[ + { + title: 'Article 1', + path: 'article-1' + }, + null // article-3 не существует +] +``` + +> `search`, `limit` и `skip` неэффективны при использовании этого метода. + +### fetch() + +- Возвращает: `Promise` | `Promise` + +Завершает последовательность цепочек и собирает данные. + +## Пример + +```js +const articles = await this.$content('articles') + .only(['title', 'date', 'authors']) + .sortBy('date', 'asc') + .limit(5) + .skip(10) + .where({ + tags: 'testing', + isArchived: false, + date: { $gt: new Date(2020) }, + rating: { $gte: 3 } + }) + .search('welcome') + .fetch() +``` + +## API + +Этот модуль предоставляет API в разработке, поэтому вы можете легко увидеть JSON каждого каталога или файла, доступные на [http://localhost:3000/_content/](http://localhost:3000/_content/). Префикс `_content` установлен по умолчанию и может быть изменен в параметре [apiPrefix](/configuration#apiprefix). + +Пример: + +```bash +-| content/ +---| articles/ +------| hello-world.md +---| index.md +---| settings.json +``` + +На `localhost:3000` будет выглядеть так: +- `/_content/articles`: список файлов в `content/articles/` +- `/_content/articles/hello-world`: вернет `hello-world.md` как JSON +- `/_content/index`: вернет `index.md` как JSON +- `/_content/settings`: вернет `settings.json` как JSON +- `/_content`: список `index` и `settings` + +Конечная точка доступна для `GET` и `POST` запросов, так что вы можете использовать параметры запроса: [http://localhost:3000/_content/articles?only=title&only=description&limit=10](http://localhost:3000/_content/articles?only=title&only=description&limit=10). + +Вы можете узнать больше о конечных точках на [lib/middleware.js](https://github.com/nuxt/content/blob/master/lib/middleware.js). diff --git a/docs/content/ru/index.md b/docs/content/ru/index.md new file mode 100644 index 000000000..989ae90ae --- /dev/null +++ b/docs/content/ru/index.md @@ -0,0 +1,49 @@ +--- +title: Вступление +description: 'Прокачайте ваше NuxtJS приложение с модулем @nuxt/content: пишите в директории content/ и получайте ваши Markdown, JSON, YAML и CSV файлы через MongoDB подобное API, работает как базирующаяся на Git безголовая CMS.' +position: 1 +category: Начало +features: + - Потрясающе быстрая горячая перезагрузка в режиме разработки + - Vue компоненты внутри Markdown + - Полнотекстовый поиск + - Поддержка статической генерации через `nuxt generate` + - Мощный API конструктора запросов (MongoDB подобный) + - Подсветка синтаксиса для блоков кода в файлах markdown с помощью PrismJS. + - Генерация оглавления + - работает с Markdown, CSV, YAML, JSON(5) + - Расширяется с помощью хуков +csb_link: https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark +--- + +Прокачайте ваше NuxtJS приложение с модулем `@nuxtjs/content`: пишите в директории `content/` и получайте ваши Markdown, JSON, YAML и CSV файлы через MongoDB подобное API, работает как **базирующаяся на Git безголовая CMS**. + +## Особенности + + + +

Попробуйте светлую и темную темы:

+ +## Видео + +Демонстрация использования `$content` и `` для отображения Markdown страниц: + + + +
+ +Использование `$content()` для получения списка, фильтрации и поиска контента: + + + +## Онлайн песочница + + diff --git a/docs/content/ru/installation.md b/docs/content/ru/installation.md new file mode 100644 index 000000000..a42ee6572 --- /dev/null +++ b/docs/content/ru/installation.md @@ -0,0 +1,59 @@ +--- +title: Установка +description: 'Установка @nuxt/content в ваш проект Nuxt всего за пару шагов.' +category: Начало +position: 2 +--- + +Добавьте `@nuxt/content` как зависимость в ваш проект: + + + + + ```bash + yarn add @nuxt/content + ``` + + + + + ```bash + npm install @nuxt/content + ``` + + + + +Затем, добавьте `@nuxt/content` в секцию `modules` вашего `nuxt.config.js`: + +```js[nuxt.config.js] +{ + modules: [ + '@nuxt/content' + ], + content: { + // Параметры + } +} +``` + +## TypeScript + +Добавьте типы в ваш список "types" в tsconfig.json после `@nuxt/types` (Nuxt 2.9.0+) или `@nuxt/vue-app` записей. + +**tsconfig.json** + +```json +{ + "compilerOptions": { + "types": [ + "@nuxt/types", + "@nuxt/content" + ] + } +} +``` + +> **Почему?** +> +> Из-за особенностей работы Nuxt, свойство `$content` в контексте должно быть объединено с интерфейсом nuxt `Context` через [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html). Добавление `@nuxt/content` в ваши типы импортирует типы из пакета и даст знать typescript о дополнениях в интерфейс `Context`. diff --git a/docs/content/ru/theme.md b/docs/content/ru/theme.md new file mode 100644 index 000000000..e2c63a343 --- /dev/null +++ b/docs/content/ru/theme.md @@ -0,0 +1,42 @@ +--- +title: Используйте темы (в процессе) +description: 'Добавьте тему и ускорьте свою разработку с Nuxt и @nuxt/content.' +category: Темы +position: 8 +--- + +
+ + + **Темы скоро появятся** в [NuxtJS](https://nuxtjs.org), следите за этим в нашем [Twitter](https://twitter.com/nuxt_js) или [GitHub](https://github.com/nuxt/nuxt.js). + + + +Установка будет выглядеть так: + + + + + ```bash + yarn add @nuxtjs/theme-everest + ``` + + + + + ```bash + npm install @nuxtjs/theme-everest + ``` + + + + +Затем добавьте тему в ваш `nuxt.config.js`: + +```js[nuxt.config.js] +export default { + theme: '@nuxtjs/theme-everest' +} +``` + +Теперь вы можете писать в вашей директории `content/` и наслаждаться красивой документацией, блогом, сайтом-портфолио и многим другим! diff --git a/docs/content/ru/writing.md b/docs/content/ru/writing.md new file mode 100644 index 000000000..45a7d0f57 --- /dev/null +++ b/docs/content/ru/writing.md @@ -0,0 +1,435 @@ +--- +title: Написание контента +description: 'Научитесь писать в директории content/, поддерживаются Markdown, YAML, CSV и JSON.' +position: 3 +category: Начало +multiselectOptions: + - VuePress + - Gridsome + - Nuxt +--- + +Для начала, создайте директорию `content/` в вашем проекте: + +```bash +content/ + articles/ + article-1.md + article-2.md + home.md +``` + +Этот модуль будет обрабатывать файлы `.md`, `.yaml`, `.csv`, `.json`, `.json5` и генерировать следующие свойства: + +- `dir` +- `path` +- `slug` +- `extension` (например: `.md`) +- `createdAt` +- `updatedAt` + +## Markdown + +Этот модуль конвертирует ваши `.md` файлы в древовидную JSON AST структуру, которая будет храниться в переменной `body`. + +Данные, указанные в заголовке, будут выведены в документ. + +Обязательно используйте компонент `` для отображения контента из вашего markdown, взгляните на [отображение контента](/displaying). + +> Вы можете взглянуть на [руководство по базовому синтаксису](https://www.markdownguide.org/basic-syntax), чтобы лучше разобраться в Markdown + +### Заголовки + +Этот модуль автоматически добавит `id` и `link` к каждому заголовку. + +Представим, что у нас есть такой файл: + +```md[home.md] +# Lorem ipsum +## dolor—sit—amet +### consectetur & adipisicing +#### elit +##### elit +``` + +Это будет преобразовано в древовидную JSON AST структуру и использовано компонентом `nuxt-content` и в итоге получится вот такой HTML: + +```html +

Lorem ipsum

+

dolor—sit—amet

+

consectetur & adipisicing

+

elit

+
elit
+``` + +> Ссылки в заголовках пусты и поэтому скрыты, но вы можете стилизовать их. Взгляните на документацию, которая появляется при наведении на заголовок. + +### Ссылки + +Ссылки преобразуются для добавления корректных `target` и `rel` атрибутов. Вы можете изменить это поведение, взгляните на [конфигурацию](/configuration#markdownexternallinks). Относительные ссылки будут также преобразованы в `nuxt-link`, чтобы обеспечить навигацию между компонентами страниц и улучшит производительность используя умную предзагрузку. + +Пример использования внешней, относительной, markdown и html ссылок: + +```md +--- +title: Главная +--- + +## Ссылки + +Nuxt ссылка на блог + +Html ссылка на блог + +[Markdown ссылка на блог](/articles) + +Внешняя html ссылка + +[Внешняя markdown ссылка](https://nuxtjs.org) +``` + +### Сноски + +Этот модуль поддерживает расширенный markdown синтаксис для сносок. + +Пример использования сносок: + +```md +Это простая сноска,[^1], а это более длинная сноска.[^bignote] + +[^1]: Это первая сноска. + +[^bignote]: Это сноска с несколькими абзацами и кодом. + + Добавим абзацы, чтобы включить их в сноску. + + `{ мой код }` + + Добавьте столько абзацев, сколько вам нужно. +``` + +> Вы можете почитать [руководство по расширенному синтаксису](https://www.markdownguide.org/extended-syntax/#footnotes) о сносках + +### Блоки кода + +Этот блок автоматически обернет ваши блоки кода и применит [PrismJS](https://prismjs.com) классы (посмотрите [синтаксис выделений](/writing#syntax-highlighting)). + +Блоки кода в Markdown оборачиваются 3-мя обратными кавычками. Также, вы можете задать язык блока кода, чтобы включить подсветку синтаксиса. + +По умолчанию Markdown не поддерживает подсветку строк внутри блока кода и имен файлов. Однако этот модуль позволяет использовать собственный синтаксис: + +- Номера строк внутри фигурных скобок +- Имя файла в квадратных скобках + +
+```js{1,3-5}[server.js]
+const http = require('http')
+const bodyParser = require('body-parser')
+
+http.createServer((req, res) => {
+  bodyParser.parse(req, (error, body) => {
+    res.end(body)
+  })
+}).listen(3000)
+```
+
+ +После отрисовки компонента `nuxt-content` это будет выглядеть так: + +```html +
+ server.js + 
+    
+      ...
+    
+
+
+``` + +> Номера строк добавляются к тегу `pre` в атрибуте `data-line`. + +> Имя файла будет преобразовано в span с классом `filename`, это позволит стилизовать их. Взгляните на документацию в правом верхнем углу блоков кода. + +### Подсветка синтаксиса + +По умолчанию, подсветка кода обеспечивается использованием [PrismJS](https://prismjs.com) и темой, указанной в опциях вашего Nuxt.js приложения, взгляните на [конфигурацию](/configuration#markdownprismtheme). + +### HTML + +Вы можете писать HTML внутри вашего Markdown: + +```md[home.md] +--- +title: Главная +--- + +## HTML + +

Смесь Markdown и HTML.

+``` + +Помните, что при размещении Markdown внутри компонента перед ним должна стоять пустая строка, иначе весь блок обрабатывается как пользовательский HTML. + +**Это не будет работать:** + +```html +
+ *Markdown* и HTML. +
+``` + +**Но это будет:** + +```html +
+ + *Markdown* и HTML. + +
+``` + +Также как **это**: + +```html +*Markdown* и HTML. +``` + +### Vue компоненты + +Вы можете использовать глобальные Vue компоненты или импортированные локально, на страницу, где отображается ваш markdown. + +Поскольку `@nuxt/content` предполагает, что весь Markdown предоставлен автором (а не с помощью сторонних пользователей), исходные тексты обрабатываются полностью (включая теги), с помощью [rehype-raw](https://github.com/rehypejs/rehype-raw): + +1. Вы должны использовать ваши компоненты в kebab case: + +```html +Используйте вместо +``` + +2. Вы не можете использовать самозакрывающиеся теги, потому что **это не будет работать**: + +```html + +``` + +А **это будет**: + +```html + +``` + +**Примеры:** + +Мы определили компонент [ExampleMultiselect.vue](https://github.com/nuxt/content/blob/master/docs/components/examples/ExampleMultiselect.vue): + +```md[home.md] +Выберите *фреймворк*: + + +``` + +**Результат:** + +
+ +Выберите *фреймворк*: + + + +
+ +Также вы можете задать параметры: + + +```md[home.md] +--- +multiselectOptions: + - VuePress + - Gridsome + - Nuxt +--- + + +``` + +
+ + + +Эти компоненты будут отрисованы используя компонент ``, взгляните на [отображение контента](/displaying#component). + + + +Обратите внимание, что вы **не можете использовать** теги `