Skip to content
Merged
134 changes: 134 additions & 0 deletions docs/content/ru/advanced.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
---
title: Продвинутое использование
description: 'Изучите продвинутое использование модуля @nuxt/content.'
position: 7
category: Начало
---

## Программное использование

`$content` доступен из **@nuxt/content**.

<base-alert>

Обратите внимание, что вы можете получить к нему доступ только **после того, как модуль будет загружен** Nuxt'ом. `require('@nuxt/content')` должно произойти в хуках или внутренних методах Nuxt.

</base-alert>

```js
export default {
modules: [,
'@nuxt/content'
],
generate: {
async ready () {
const { $content } = require('@nuxt/content')
const files = await $content().only(['slug']).fetch()
console.log(files)
}
}
}
```

### Статическая генерация сайта

<base-alert type="info">

Если вы используете Nuxt 2.13+, `nuxt export` имеет встроенную функцию сканирования, поэтому вам не нужно использовать `generate.routes`.

</base-alert>

При использовании `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
}
}
}
}
```

## Обработка горячей перезагрузки

<base-alert type="info">

В режиме разработке модуль автоматически вызывает действие стора(Vuex) `nuxtServerInit`(если задано) и `$nuxt.refresh()` для перезагрузки текущей страницы.

</base-alert>

В случае, если вам нужно слушать событие, чтобы выполнить что-то еще, вам нужно слушать событие `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).
176 changes: 176 additions & 0 deletions docs/content/ru/configuration.md
Original file line number Diff line number Diff line change
@@ -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: {}
}
}
```
56 changes: 56 additions & 0 deletions docs/content/ru/displaying.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
title: Отображение контента
description: 'Вы можете использовать компонент `<nuxt-content>` непосредственно в шаблоне для отображения вашего Markdown.'
position: 5
category: Начало
---

<br>
<base-alert type="info">Этот раздел только для Markdown файлов.</base-alert>

## Component

Вы можете использовать компонент `<nuxt-content>` непосредственно в шаблоне для отображения тела страницы:

```vue
<template>
<article>
<h1>{{ page.title }}</h1>
<nuxt-content :document="page" />
</article>
</template>

<script>
export default {
async asyncData ({ $content }) {
const page = await $content('home').fetch()

return {
page
}
}
}
</script>
```


**Входные параметры:**
- document:
- Тип: `Object`
- `обязательное`

Изучите больше о том, что вы можете писать в вашем markdown файле в разделе [написание контента](/writing#markdown).

## Стили

В зависимости от того, что вы используете для разработки своего приложения, вам может потребоваться написать стили для правильного отображения markdown.

Компонент `<nuxt-content>` автоматически добавит класс `.nuxt-content` и вы сможете использовать его для стилизации:

```css
.nuxt-content h1 {
/* мои пользовательские стили для h1 */
}
```

Вы можете найти примеры в [директории документации](https://github.com/nuxt/content/blob/master/docs/pages/_slug.vue).
Loading