` component to display the `body` of your markdown content, see [displaying content](/displaying).
+
+> You can check the [basic syntax guide](https://www.markdownguide.org/basic-syntax) to help you master Markdown
+
+### Front Matter
+
+You can add a YAML front matter block to your markdown files. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:
+
+```md
+---
+title: Introduction
+description: Learn how to use @nuxt/content.
+---
+```
+
+These variables will be injected into the document:
+
+```json
+{
+ body: Object
+ excerpt: Object
+ title: "Introduction"
+ description: "Learn how to use @nuxt/content."
+ dir: "/"
+ extension: ".md"
+ path: "/index"
+ slug: "index"
+ toc: Array
+ createdAt: DateTime
+ updatedAt: DateTime
+}
+```
+
+### Excerpt
+
+Content excerpt or summary can be extracted from the content using `` as a divider.
+
+```md
+---
+title: Introduction
+---
+
+Learn how to use @nuxt/content.
+
+Full amount of content beyond the more divider.
+```
+
+Description property will contain the excerpt content unless defined within the Front Matter props.
+
+
+
+Be careful to enter <!--more--> exactly; i.e., all lowercase and with no whitespace.
+
+
+
+Example variables will be injected into the document:
+
+```json
+{
+ body: Object
+ title: "Introduction"
+ description: "Learn how to use @nuxt/content."
+ dir: "/"
+ excerpt: Object
+ extension: ".md"
+ path: "/index"
+ slug: "index"
+ toc: Array
+ createdAt: DateTime
+ updatedAt: DateTime
+}
+```
+
+### Headings
+
+This module automatically adds an `id` and a `link` to each heading.
+
+Say we have the following markdown file:
+
+```md[home.md]
+# Lorem ipsum
+## dolor—sit—amet
+### consectetur & adipisicing
+#### elit
+##### elit
+```
+
+It will be transformed to its JSON AST structure, and by using the `nuxt-content` component, it will render HTML like:
+
+```html
+Nuxt Link to Blog
+
+Html Link to Blog
+
+[Markdown Link to Blog](/articles)
+
+External link html
+
+[External Link markdown](https://nuxtjs.org)
+```
+
+### Footnotes
+
+This module supports extended markdown syntax for footnotes using [remark-footnotes](https://github.com/remarkjs/remark-footnotes). You can check [here](/configuration#markdown) to learn how to configure this plugin.
+
+Here is an example using footnotes:
+
+```md
+Here's a simple footnote,[^1] and here's a longer one.[^bignote]
+
+[^1]: This is the first footnote.
+
+[^bignote]: Here's one with multiple paragraphs and code.
+
+ Indent paragraphs to include them in the footnote.
+
+ `{ my code }`
+
+ Add as many paragraphs as you like.
+```
+
+> You can check the [extended syntax guide](https://www.markdownguide.org/extended-syntax/#footnotes) for more information about footnotes.
+
+### Codeblocks
+
+This module automatically wraps codeblocks and applies [PrismJS](https://prismjs.com) classes (see [syntax highlighting](/writing#syntax-highlighting)).
+
+Codeblocks in Markdown are wrapped inside 3 backticks. Optionally, you can define the language of the codeblock to enable specific syntax highlighting.
+
+Originally markdown did not support filenames or highlighting specific lines inside codeblocks. However, this module allows it with its own custom syntax:
+
+- Highlighted line numbers inside curly braces
+- Filename inside square brackets
+
+
+```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)
+```
+
+
+After rendering with the `nuxt-content` component, it should look like this (without the filename yet):
+
+```html[server.js]
+
+
server.js
+
+
+ ...
+
+
+
A mix of Markdown and HTML .
+```
+
+Beware that when placing Markdown inside a component, it must be preceded and followed by an empty line, otherwise the whole block is treated as custom HTML.
+
+**This won't work:**
+
+```html
+
+ *Markdown* and HTML .
+
+```
+
+**But this will:**
+
+```html
+
+
+ *Markdown* and HTML .
+
+
+```
+
+**As will this**:
+
+```html
+*Markdown* and HTML .
+```
+
+### Vue components
+
+You can use global Vue components or locally registered in the page you're displaying your markdown.
+
+
+
+An issue exists with locally registered components and live edit in development, since **v1.5.0** you can disable it by setting `liveEdit: false` (see [configuration](/configuration#liveedit)).
+
+
+
+Since `@nuxt/content` operates under the assumption that all Markdown is provided by the author (and not via third-party user submission), sources are processed in full (tags included), with a couple of caveats from [rehype-raw](https://github.com/rehypejs/rehype-raw):
+
+1. You need to refer to your components and their props by kebab case naming:
+
+```html
+Use instead of
+```
+
+2. You cannot use self-closing tags, i.e., **this won't work**:
+
+```html
+
+Please choose a framework :
+
+
+
+You can also define the options for components in your front matter:
+
+```md[home.md]
+---
+multiselectOptions:
+ - VuePress
+ - Gridsome
+ - Nuxt
+---
+
+
+
+
+
+
+
+These components will be rendered using the `` component, see [displaying content](/displaying#component).
+
+
+
+#### Templates
+
+You can use `template` tags for content distribution inside your Vue.js components:
+
+```html
+
+
+ Named slot content.
+
+
+```
+
+However, you cannot render
+[dynamic content](https://vuejs.org/v2/guide/syntax.html) nor use
+[slot props](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots). I.e.,
+**this wont work**:
+
+```html
+
+
+ {{ slotProps.someProperty }}
+
+
+```
+
+#### Global components
+
+Since **v1.4.0** and Nuxt **v2.13.0**, you can now put your components in `components/global/` directory so you don't have to import them in your pages.
+
+```bash
+components/
+ global/
+ Hello.vue
+content/
+ home.md
+```
+
+Then in `content/home.md`, you can use `
+
+Check out [this snippet](/snippets#table-of-contents) on how to implement a table of contents into your app
+
+
+
+### Example
+
+A file `content/home.md`:
+
+```md
+---
+title: Home
+---
+
+## Welcome!
+```
+
+Will be transformed into:
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".md",
+ "title": "Home",
+ "toc": [
+ {
+ "id": "welcome",
+ "depth": 2,
+ "text": "Welcome!"
+ }
+ ],
+ "body": {
+ "type": "root",
+ "children": [
+ {
+ "type": "element",
+ "tag": "h2",
+ "props": {
+ "id": "welcome"
+ },
+ "children": [
+ {
+ "type": "element",
+ "tag": "a",
+ "props": {
+ "ariaHidden": "true",
+ "href": "#welcome",
+ "tabIndex": -1
+ },
+ "children": [
+ {
+ "type": "element",
+ "tag": "span",
+ "props": {
+ "className": [
+ "icon",
+ "icon-link"
+ ]
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "text",
+ "value": "Welcome!"
+ }
+ ]
+ }
+ ]
+ }
+}
+```
+
+We internally add a `text` key with the markdown body that will be used for [searching](/fetching#searchfield-value) or [extending](/advanced#contentfilebeforeinsert) it.
+
+## JSON / JSON5
+
+Data defined will be injected into the document.
+
+> No body will be generated.
+
+### Arrays
+
+v0.10.0+
+
+You can now use arrays inside your `.json` files. Objects will be flattened and inserted into the collection. You can [fetch](/fetching) your content in the same way as your used to.
+
+
+
+Since the `slug` is by default taken from the path and missing in this case, you have to define it in your objects for this feature to work properly.
+
+
+
+> Check out our [example](https://github.com/nuxt/content/tree/dev/example) with articles and authors.
+
+### Example
+
+A file `content/home.json`:
+
+```json
+{
+ "title": "Home",
+ "description": "Welcome!"
+}
+```
+
+Will be transformed into:
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".json",
+ "title": "Home",
+ "description": "Welcome!"
+}
+```
+
+A file `content/authors.json`:
+
+```json
+[
+ {
+ "name": "Sébastien Chopin",
+ "slug": "atinux"
+ },
+ {
+ "name": "Krutie Patel",
+ "slug": "krutiepatel"
+ },
+ {
+ "name": "Sergey Bedritsky",
+ "slug": "sergeybedritsky"
+ }
+]
+```
+
+Will be transformed into:
+
+```json
+[
+ {
+ "name": "Sébastien Chopin",
+ "slug": "atinux",
+ "dir": "/authors",
+ "path": "/authors/atinux",
+ "extension": ".json"
+ },
+ {
+ "name": "Krutie Patel",
+ "slug": "krutiepatel",
+ "dir": "/authors",
+ "path": "/authors/krutiepatel",
+ "extension": ".json"
+ },
+ {
+ "name": "Sergey Bedritsky",
+ "slug": "sergeybedritsky",
+ "dir": "/authors",
+ "path": "/authors/sergeybedritsky",
+ "extension": ".json"
+ }
+]
+```
+
+## CSV
+
+Rows will be assigned to body variable.
+
+### Example
+
+A file `content/home.csv`:
+
+```csv
+title, description
+Home, Welcome!
+```
+
+Will be transformed into:
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".csv",
+ "body": [
+ {
+ "title": "Home",
+ "description": "Welcome!"
+ }
+ ]
+}
+```
+
+## XML
+
+XML will be parsed
+
+### Example
+
+A file `content/home.xml`:
+
+```xml
+
+ -
+
Title
+ Hello World
+
+
+```
+
+Will be transformed into:
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".xml",
+ "body": {
+ "xml": {
+ "item": [
+ {
+ "$": {
+ "prop": "abc"
+ },
+ "title": [
+ "Title"
+ ],
+ "description": [
+ "Hello World"
+ ]
+ }
+ ]
+ }
+}
+```
+
+## YAML / YML
+
+Data defined will be injected into the document.
+
+> No body will be generated.
+
+### Example
+
+A file `content/home.yaml`:
+
+```yaml
+title: Home
+description: Welcome!
+```
+
+Will be transformed into:
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".yaml",
+ "title": "Home",
+ "description": "Welcome!"
+}
+```
diff --git a/docs/content-v1/en/1.getting-started/4.fetching.md b/docs/content-v1/en/1.getting-started/4.fetching.md
new file mode 100644
index 000000000..aa46fbbe8
--- /dev/null
+++ b/docs/content-v1/en/1.getting-started/4.fetching.md
@@ -0,0 +1,252 @@
+---
+title: Fetching content
+description: 'Learn how to fetch your static content with $content in your Nuxt.js project.'
+---
+
+This module globally injects `$content` instance, meaning that you can access it anywhere using `this.$content`. For plugins, asyncData, nuxtServerInit and Middleware, you can access it from `context.$content`.
+
+## Methods
+
+### $content(path, options?)
+
+- `path`
+ - Type: `String`
+ - Default: `/`
+- `options`
+ - Type: `Object`
+ - Default: `{}`
+ - Version: **>= v1.3.0**
+- `options.deep`
+ - Type: `Boolean`
+ - Default: `false`
+ - Version: **>= v1.3.0**
+ - *Fetch files from subdirectories*
+- `options.text`
+ - Type: `Boolean`
+ - Default: `false`
+ - Version: **>= v1.4.0**
+ - *Returns the original markdown content in a `text` variable*
+- Returns a chain sequence
+
+> You can also give multiple arguments: `$content('articles', params.slug)` will be translated to `/articles/${params.slug}`
+
+`path` can be a file or a directory. If `path` is a file, `fetch()` will return an `Object`, if it's a directory it will return an `Array`.
+
+All the methods below can be chained and return a chain sequence, except `fetch` which returns a `Promise`.
+
+### only(keys)
+
+- `keys`
+ - Type: `Array` | `String`
+ - `required`
+
+Select a subset of fields.
+
+```js
+const { title } = await this.$content('article-1').only(['title']).fetch()
+```
+
+### without(keys)
+
+- `keys`
+ - Type: `Array` | `String`
+ - `required`
+
+Remove a subset of fields.
+
+```js
+const { title, ...propsWithoutBody } = await this.$content('article-1').without(['body']).fetch()
+```
+
+### where(query)
+
+- `query`
+ - Type: `Object`
+ - `required`
+
+Filter results by query.
+
+Where queries are based on subset of mongo query syntax, it handles for example: `$eq`, `$ne`, `$gt`, `$gte`, `$lt`, `$lte`, `$in`, ...
+
+```js
+// implicit (assumes $eq operator)
+const articles = await this.$content('articles').where({ title: 'Home' }).fetch()
+// explicit $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()
+```
+
+In order to filter in objects and array you need to enable nestedProperties, see [configuration](/configuration#nestedproperties).
+
+```js
+const products = await this.$content('products').where({ 'categories.slug': { $contains: 'top' } }).fetch()
+
+const products = await this.$content('products').where({ 'categories.slug': { $contains: ['top', 'woman'] } }).fetch()
+```
+
+> This module uses LokiJS under the hood, you can check for [query examples](https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries).
+
+### sortBy(key, direction)
+
+- `key`
+ - Type: `String`
+ - `required`
+- `direction`
+ - Type: `String`
+ - Value: `'asc'` or `'desc'`
+ - Default: `'asc'`
+
+Sort results by key.
+
+```js
+const articles = await this.$content('articles').sortBy('title').fetch()
+```
+
+> Can be chained multiple times to sort on multiple fields.
+
+
+
+`sortBy` method does **case-sensitive** sort, which is currently not configurable.
+
+If you need case-insensitive sorting, check out [this snippet](/snippets#case-insensitive-sorting) on how to work around it.
+
+
+
+### limit(n)
+
+- `n`
+ - Type: `String` | `Number`
+ - `required`
+
+Limit number of results.
+
+```js
+// fetch only 5 articles
+const articles = await this.$content('articles').limit(5).fetch()
+```
+
+### skip(n)
+
+- `n`
+ - Type: `String` | `Number`
+ - `required`
+
+Skip results.
+
+```js
+// fetch the next 5 articles
+const articles = await this.$content('articles').skip(5).limit(5).fetch()
+```
+
+### search(field, value)
+
+- `field`
+ - Type: `String`
+ - `required`
+- `value`
+ - Type: `String`
+
+Performs a full-text search on a field. `value` is optional, in this case `field` is the `value` and search will be performed on all defined full-text search fields.
+
+The fields you want to search on must be defined in options in order to be indexed, see [configuration](/configuration#fulltextsearchfields).
+
+Using an empty string as parameter will skip the search.
+
+```js
+// Search on field title
+const articles = await this.$content('articles').search('title', 'welcome').fetch()
+// Search on all pre-defined fields
+const articles = await this.$content('articles').search('welcome').fetch()
+// Search will be skipped if the search string is empty
+const articles = await this.$content('articles').search('').fetch()
+```
+
+
+
+Check out [this snippet](/snippets#search) on how to implement search into your app
+
+
+
+### surround(slugOrPath, options)
+
+- `slugOrPath`
+ - Type: `String`
+ - `required`
+- `options`
+ - Type: `Object`
+ - Default: `{ before: 1, after: 1}`
+
+Get prev and next results around a specific slug or path.
+
+You will always obtain an array of fixed length filled with the maching document or `null`.
+
+```js
+const [prev, next] = await this.$content('articles')
+ .only(['title', 'path'])
+ .sortBy('date')
+ .where({ isArchived: false })
+ .surround('article-2')
+ .fetch()
+
+// Returns
+[
+ {
+ title: 'Article 1',
+ path: 'article-1'
+ },
+ null // no article-3 here
+]
+```
+
+> `search`, `limit` and `skip` are ineffective when using this method.
+
+
+
+Getting results based on `path` is only supported since v1.12.0
+
+
+
+
+
+Check out [this snippet](/snippets#prev-and-next) on how to implement prev and next links into your app
+
+
+
+### fetch()
+
+- Returns: `Promise` | `Promise`
+
+Ends the chain sequence and collects data.
+
+### catch()
+
+Checks if the `.md` file exists in content directory or not.
+
+It should be inserted after the `fetch()`.
+
+## Example
+
+```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-03-31') },
+ rating: { $gte: 3 }
+ })
+ .search('welcome')
+ .fetch()
+ .catch((err) => {
+ error({ statusCode: 404, message: 'Page not found' })
+ })
+```
+
+> You can check how to use the [Content API](/advanced#api-endpoint) in development.
diff --git a/docs/content-v1/en/1.getting-started/5.displaying.md b/docs/content-v1/en/1.getting-started/5.displaying.md
new file mode 100644
index 000000000..ce7d016d1
--- /dev/null
+++ b/docs/content-v1/en/1.getting-started/5.displaying.md
@@ -0,0 +1,102 @@
+---
+title: Displaying content
+description: 'You can use `` component directly in your template to display your Markdown.'
+---
+
+This section is only for Markdown files.
+
+## Component
+
+### Page Body
+
+You can use `` component directly in your template to display the page body:
+
+```vue
+
+
+ {{ page.title }}
+
+
+
+
+```
+
+
+**Props:**
+- document:
+ - Type: `Object`
+ - `required`
+- tag:
+ - Type: `String`
+
+Learn more about what you can write in your markdown file in the [writing content](/writing#markdown) section.
+
+### Excerpt
+
+If you are utilizing the [excerpt](/writing#excerpt) feature, you can display the content of your excerpt using the following model:
+
+```vue
+
+
+ {{ page.title }}
+
+
+
+
+```
+
+## Root Element
+
+`` component will add a `div` element as the root of the content by default. You can change this by setting the `tag` prop. Below example will use `article` as the root element.
+
+```vue
+
+```
+
+## Style
+
+Depending on what you're using to design your app, you may need to write some style to properly display the markdown.
+
+`` component will automatically add a `.nuxt-content` class. You can use it to customize your styles:
+
+```css
+.nuxt-content h1 {
+ /* my custom h1 style */
+}
+```
+
+> You can find an example in the theme-docs [main.css](https://github.com/nuxt/content/blob/master/packages/theme-docs/src/assets/css/main.css) file. You can also take a look at the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/typography-plugin) to style your markdown content like we do in the `@nuxt/content-theme-docs`.
+
+## Live Editing
+
+> Available in version **>= v1.4.0**
+
+**In development**, you can edit your content by **double-clicking** on the `` component. A textarea will allow you to edit the content of the current file and will save it on the file-system.
+
+
+
diff --git a/docs/content-v1/en/1.getting-started/6.configuration.md b/docs/content-v1/en/1.getting-started/6.configuration.md
new file mode 100644
index 000000000..b6894a7de
--- /dev/null
+++ b/docs/content-v1/en/1.getting-started/6.configuration.md
@@ -0,0 +1,546 @@
+---
+title: Configuration
+description: 'You can configure @nuxt/content with the content property in your nuxt.config.js.'
+---
+
+You can configure `@nuxt/content` with the `content` property in your `nuxt.config.js`.
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ // My custom configuration
+ }
+}
+```
+
+Before diving into the individual attributes, please have a look [at the default settings](#defaults) of the module.
+
+## Merging defaults
+
+You can define every option either as function or as static value (primitives, objects, arrays, ...).
+If you use a function, the default value will be provided as the first argument.
+
+If you *don't* use a function to define you properties, the module will try to
+merge them with the default values. This can be handy for `markdown.remarkPlugins`, `markdown.rehypePlugins` and so on because
+the defaults are quite sensible. If you don't want to have the defaults included, just use a function.
+
+## Properties
+
+### `apiPrefix`
+
+- Type: `String`
+- Default: `'/_content'`
+
+Route that will be used for client-side API calls and SSE.
+
+```js [nuxt.config.js]
+content: {
+ // $content api will be served on localhost:3000/content-api
+ apiPrefix: 'content-api'
+}
+```
+
+### `dir`
+
+- Type: `String`
+- Default: `'content'`
+
+Directory used for writing content.
+You can give an absolute path, if relative, it will be resolved with Nuxt [srcDir](https://nuxtjs.org/api/configuration-srcdir).
+
+```js [nuxt.config.js]
+content: {
+ dir: 'my-content' // read content from my-content/
+}
+```
+
+### `fullTextSearchFields`
+
+- Type: `Array`
+- Default: `['title', 'description', 'slug', 'text']`
+
+Fields that needs to be indexed to be searchable, learn more about search [here](/fetching#searchfield-value).
+
+`text` is a special key that contains your Markdown before being parsed to AST.
+
+```js [nuxt.config.js]
+content: {
+ // Only search in title and description
+ fullTextSearchFields: ['title', 'description']
+}
+```
+
+### `nestedProperties`
+
+- Type `Array`
+- Default: `[]`
+- Version: **>= v1.3.0**
+
+Register nested properties to handle dot-notation and deep filtering.
+
+```js [nuxt.config.js]
+content: {
+ nestedProperties: ['categories.slug']
+}
+```
+
+### `liveEdit`
+
+- Type `Boolean`
+- Default: `true`
+- Version: **>= v1.5.0**
+
+Disable live edit mode in development:
+
+```js [nuxt.config.js]
+content: {
+ liveEdit: false
+}
+```
+
+### `markdown`
+
+This module uses [remark](https://github.com/remarkjs/remark) and [rehype](https://github.com/rehypejs/rehype) under the hood to compile markdown files into JSON AST that will be stored into the `body` variable.
+
+::alert{type="info"}
+The following explanation is valid for both `remarkPlugins` and `rehypePlugins`
+::
+
+To configure how the module will parse Markdown, you can:
+
+- Add a new plugin to the defaults:
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: ['remark-emoji']
+ }
+ }
+}
+```
+
+- Override the default plugins:
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: () => ['remark-emoji']
+ }
+ }
+}
+```
+
+- Use local plugins
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: [
+ '~/plugins/my-custom-remark-plugin.js'
+ ]
+ }
+ }
+}
+```
+
+- Provide options directly in the definition
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: [
+ ['remark-emoji', { emoticon: true }]
+ ]
+ }
+ }
+}
+```
+
+- Provide options using the name of the plugin in `camelCase`
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ // https://github.com/remarkjs/remark-external-links#options
+ remarkExternalLinks: {
+ target: '_self',
+ rel: 'nofollow'
+ }
+ }
+ }
+}
+```
+
+::alert{type="warning"}
+When adding a new plugin, make sure to install it in your dependencies:
+::
+
+::code-group
+ ```bash [Yarn]
+ yarn add remark-emoji
+ ```
+
+ ```bash [NPM]
+ npm install remark-emoji
+ ```
+::
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: ['remark-emoji']
+ }
+ }
+}
+```
+
+### `markdown.tocDepth`
+
+- Type: `Number`
+- Default: `3`
+- Version: **>= v1.11.0**
+
+You can change maximum heading depth to include in the table of contents.
+
+### `markdown.remarkPlugins`
+
+- Type: `Array`
+- Default: `['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes']`
+- Version: **>= v1.4.0**
+
+> You can take a look at the list of [remark plugins](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins).
+
+### `markdown.rehypePlugins`
+
+- Type: `Array`
+- Default: `['rehype-minify-whitespace', 'rehype-sort-attribute-values', 'rehype-sort-attributes', 'rehype-raw']`
+- Version: **>= v1.4.0**
+
+> You can take a look at the list of [rehype plugins](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins).
+
+### `markdown.basePlugins`
+
+::alert{type="warning"}
+Deprecated. Use `markdown.remarkPlugins` as a function instead.
+::
+
+### `markdown.plugins`
+
+::alert{type="warning"}
+Deprecated. Use `markdown.remarkPlugins` as an array instead.
+::
+
+### `markdown.prism.theme`
+
+- Type: `String`
+- Default: `'prismjs/themes/prism.css'`
+
+This module handles code highlighting in markdown content using [PrismJS](https://prismjs.com).
+
+It automatically pushes the desired PrismJS theme in your Nuxt.js config, so if you want to use a different theme than the default one, for example [prism-themes](https://github.com/PrismJS/prism-themes):
+
+::code-group
+ ```bash [Yarn]
+ yarn add prism-themes
+ ```
+
+ ```bash [NPM]
+ npm install prism-themes
+ ```
+::
+
+```js [nuxt.config.js]
+content: {
+ markdown: {
+ prism: {
+ theme: 'prism-themes/themes/prism-material-oceanic.css'
+ }
+ }
+}
+```
+
+To disable the inclusion of the theme, set prism to `false`:
+
+```js [nuxt.config.js]
+content: {
+ markdown: {
+ prism: {
+ theme: false
+ }
+ }
+}
+```
+
+### `markdown.highlighter`
+
+- Type: `Highlighter` | `PromisedHighlighter`
+- Version: **>=1.9.0**
+
+You can change the default code highlighter in markdown content by using this option. As an example, we use [highlight.js](https://highlightjs.org/).
+
+```js [nuxt.config.js]
+import highlightjs from 'highlight.js'
+
+export default {
+ content: {
+ markdown: {
+ highlighter(rawCode, lang) {
+ const highlightedCode = highlightjs.highlight(rawCode, { language: lang }).value
+
+ // We need to create a wrapper, because
+ // the returned code from highlight.js
+ // is only the highlighted code.
+ return `${highlightedCode}
+
+When `markdown.highlighter` is defined, it will automatically disable the inclusion of the Prism theme.
+
+
+
+
+
+Don't forget to add the corresponding style manually if you define `markdown.highlighter`.
+
+
+
+It returns a `string` or [HAST](https://github.com/syntax-tree/hast) (Hypertext Abstract Syntax Tree). You can build HAST by passing the 4th argument. It consits of `h`, `node` and `u`.
+
+```js [nuxt.config.js]
+import highlightjs from 'highlight.js'
+
+export default {
+ content: {
+ markdown: {
+ highlighter(rawCode, lang, _, { h, node, u }) {
+ const highlightedCode = highlightjs.highlight(rawCode, { language: lang }).value
+
+ // We can use ast helper to create the wrapper
+ const childs = []
+ childs.push(
+ h(node, 'pre', [
+ h(node, 'code', { className: ['hljs', lang] }, [
+ u('raw', highlightedCode)
+ ])
+ ])
+ )
+
+ return h(
+ node,
+ 'div',
+ { className: 'highlighted-with-highlightjs' },
+ childs
+ )
+ }
+ }
+ }
+}
+```
+
+After rendering with the `nuxt-content` component, it will look like this:
+
+```html
+
+```
+
+You can also get the line highlight and file name value from the 3rd argument. Combining them with the HAST, you can pass it to the client.
+
+```js [nuxt.config.js]
+import highlightjs from 'highlight.js'
+
+export default {
+ content: {
+ markdown: {
+ highlighter(rawCode, lang, { lineHighlights, fileName }, { h, node, u }) {
+ const highlightedCode = highlightjs.highlight(rawCode, { language: lang }).value
+
+ const childs = []
+ const props = {
+ className: `language-${lang}`,
+ dataLine: lineHighlights,
+ dataFileName: fileName
+ }
+ childs.push(
+ h(node, 'pre', [
+ h(node, 'code', props, [
+ u('raw', highlightedCode)
+ ])
+ ])
+ )
+
+ return h(
+ node,
+ 'div',
+ { className: 'highlighted-with-highlightjs' },
+ childs
+ )
+ }
+ }
+ }
+}
+```
+
+Then the returned code will look like this:
+
+```html
+
+```
+
+> You can learn more about `h`, `node` and `u` from [mdast-util-to-hast](https://github.com/syntax-tree/mdast-util-to-hast), [Universal Syntax Tree](https://github.com/syntax-tree/unist#node) and [unist-builder](https://github.com/syntax-tree/unist-builder)
+
+If you need to get the highlighter from promised-returned-package/function, you can do it this way:
+
+```js [nuxt.config.js]
+import { getHighlighter } from 'example-highlighter'
+
+export default {
+ content: {
+ markdown: {
+ async highlighter() {
+ const highlighter = await getHighlighter()
+
+ return (rawCode, lang) => {
+ return highlighter.highlight(rawCode, { language: lang })
+ }
+ }
+ }
+ }
+}
+```
+
+> You can head over to [Snippets - Custom Highlighter](/snippets#custom-highlighter) section to see more example.
+
+### `yaml`
+
+- Type: `Object`
+- Default: `{}`
+
+This module uses `js-yaml` to parse `.yaml`, `.yml` files. You can check here for [options](https://github.com/nodeca/js-yaml#api).
+
+Note that we force `json: true` option.
+
+
+### `xml`
+
+- Type: `Object`
+- Default: `{}`
+
+This module uses `xml2js` to parse `.xml` files. You can check here for [options](https://www.npmjs.com/package/xml2js#options).
+
+### `csv`
+
+- Type: `Object`
+- Default: `{}`
+
+This module uses `node-csvtojson` to parse csv files. You can check here for [options](https://github.com/Keyang/node-csvtojson#parameters).
+
+### `extendParser`
+
+- Type: `Object`
+- Default `{}`
+
+With this option you can define your own parsers for other file types. Also you can **overwrite** the default parser!
+
+To add your custom parser write a function that gets as an argument the content of the file and returns the extracted data.
+
+**Example**
+
+```js [nuxt.config.js]
+const parseTxt = file => file.split('\n').map(line => line.trim())
+
+// in Config:
+
+{
+ extendParser: {
+ '.txt': parseTxt
+ }
+}
+```
+
+### `editor`
+
+You can provide a custom editor for editing your markdown files in development. Set the `editor` option to a path to your editor component. The code of the default editor you can find [here](https://github.com/nuxt/content/blob/master/packages/content/templates/editor.vue).
+
+
+```js [nuxt.config.js]
+content: {
+ editor: '~/path/to/editor/component.vue'
+}
+```
+
+Your component should implement the following:
+
+1. `v-model` for getting the markdown code.
+2. prop `isEditing` is a boolean with the information if the editing is started and the component is shown. (this is optional)
+3. when finished editing your component has to emit `endEdit`
+
+
+You should be aware that you get the full markdown file content so this includes the front-matter. You can use `gray-matter` to split and join the markdown and the front-matter.
+
+### `useCache`
+
+- Type: `Boolean`
+- Default: `false`
+
+When `true`, the production server (`nuxt start`) will use cached version of the content (generated after running `nuxt build`) instead of parsing files. This improves app startup time, but makes app unaware of any content changes.
+
+## Defaults
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ editor: '~/.nuxt/content/editor.vue',
+ apiPrefix: '_content',
+ dir: 'content',
+ fullTextSearchFields: ['title', 'description', 'slug', 'text'],
+ nestedProperties: [],
+ liveEdit: true,
+ useCache: false,
+ markdown: {
+ remarkPlugins: [
+ 'remark-squeeze-paragraphs',
+ 'remark-slug',
+ 'remark-autolink-headings',
+ 'remark-external-links',
+ 'remark-footnotes'
+ ],
+ rehypePlugins: [
+ 'rehype-minify-whitespace',
+ 'rehype-sort-attribute-values',
+ 'rehype-sort-attributes',
+ 'rehype-raw'
+ ],
+ prism: {
+ theme: 'prismjs/themes/prism.css'
+ }
+ },
+ yaml: {},
+ csv: {},
+ xml: {},
+ extendParser: {}
+ }
+}
+```
diff --git a/docs/content-v1/en/1.getting-started/7.advanced.md b/docs/content-v1/en/1.getting-started/7.advanced.md
new file mode 100644
index 000000000..7c68e4bf9
--- /dev/null
+++ b/docs/content-v1/en/1.getting-started/7.advanced.md
@@ -0,0 +1,253 @@
+---
+title: Advanced
+description: 'Learn advanced usage of @nuxt/content module.'
+---
+
+## Programmatic Usage
+
+`$content` is accessible from **@nuxt/content**.
+
+
+
+Beware that you can access it only **after the module has been loaded** by Nuxt. `require('@nuxt/content')` should happen in hooks or internal Nuxt methods.
+
+
+
+```js
+export default {
+ modules: [
+ '@nuxt/content'
+ ],
+ generate: {
+ async ready () {
+ const { $content } = require('@nuxt/content')
+ const files = await $content().only(['slug']).fetch()
+ console.log(files)
+ }
+ }
+}
+```
+
+### Static Site Generation
+
+Since Nuxt 2.14+, `nuxt generate` has a crawler feature integrated which will crawl all your links and generate your routes based on those links. Therefore you do not need to do anything in order for your dynamic routes to be crawled.
+
+Also, `nuxt generate` will automagically skip webpack build step when no code has been changed and use the previous build using cache. The content module integrates with this feature to ignore changes inside the `content/` folder. In other terms, when changing the content of your site and deploying, the build will be skipped.
+
+> Learn more in [this article](https://nuxtjs.org/blog/nuxt-static-improvements).
+
+When using Nuxt <= 2.12, you might need to specify the dynamic routes with [generate.routes](https://nuxtjs.org/api/configuration-generate/#routes)
+
+**Example**
+
+```js{}[nuxt.config.js]
+export default {
+ modules: [,
+ '@nuxt/content'
+ ],
+ generate: {
+ async routes () {
+ const { $content } = require('@nuxt/content')
+ const files = await $content({ deep: true }).only(['path']).fetch()
+
+ return files.map(file => file.path === '/index' ? '/' : file.path)
+ }
+ }
+}
+```
+
+
+
+Recommended to use Nuxt 2.14+ with `nuxt generate` because it's awesome!
+
+
+
+## Hooks
+
+The module adds some hooks you can use:
+
+### `content:file:beforeParse`
+
+Allows you to modify the contents of a file before it is handled by the parsers.
+
+Arguments:
+- `file`
+ - Type: `Object`
+ - Properties:
+ - path: `String`
+ - extension: `String` (ex: `.md`)
+ - data: `String`
+
+**Example**
+
+Changing all appearances of `react` to `vue` in all Markdown files:
+
+```js{}[nuxt.config.js]
+hooks: {
+ 'content:file:beforeParse': (file) => {
+ if (file.extension !== '.md') return
+ file.data = file.data.replace(/react/g, 'vue')
+ }
+}
+```
+
+### `content:file:beforeInsert`
+
+Allows you to add data to a document before it is stored.
+
+Arguments:
+- `document`
+ - Type: `Object`
+ - Properties:
+ - See [writing content](/writing)
+- `database`
+ - Type: `Object`
+ - Properties:
+ - See [type definition](https://github.com/nuxt/content/blob/master/packages/content/types/database.d.ts)
+
+**Example**
+
+When building a blog, you can use `file:beforeInsert` to add `readingTime` to a document using [reading-time](https://github.com/ngryman/reading-time).
+
+> `text` is the body content of a markdown file before it is transformed to JSON AST. You can use at this point, but it is not returned by the API.
+
+```js{}[nuxt.config.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
+ }
+ }
+ }
+}
+```
+
+**Example**
+
+You might want to parse markdown inside a `.json` file. You can access the parsers from the `database` object:
+
+```js{}[nuxt.config.js]
+export default {
+ modules: [,
+ '@nuxt/content'
+ ],
+ hooks: {
+ 'content:file:beforeInsert': async (document, database) => {
+ if (document.extension === '.json' && document.body) {
+ const data = await database.markdown.toJSON(document.body)
+
+ Object.assign(document, data)
+ }
+ }
+ }
+}
+```
+
+### `content:options`
+
+Extend the content options, useful for modules that wants to read content options when normalized and apply updated to it.
+
+Arguments:
+- `options`
+ - Type: `Object`
+ - Properties:
+ - See [configuration](/configuration#properties)
+
+**Example**
+
+```js{}[nuxt.config.js]
+export default {
+ modules: [,
+ '@nuxt/content'
+ ],
+ hooks: {
+ 'content:options': (options) => {
+ console.log('Content options:', options)
+ }
+ }
+}
+```
+
+## Handling Hot Reload
+
+
+
+When you are in development mode, the module will automatically call `nuxtServerInit` store action (if defined) and `$nuxt.refresh()` to refresh the current page.
+
+
+
+In case you want to listen to the event to do something more, you can listen on `content:update` event on client-side using `$nuxt.$on('content:update')`:
+
+```js{}[plugins/update.client.js]
+export default function ({ store }) {
+ // Only in development
+ if (process.dev) {
+ window.onNuxtReady(($nuxt) => {
+ $nuxt.$on('content:update', ({ event, path }) => {
+ // Refresh the store categories
+ store.dispatch('fetchCategories')
+ })
+ })
+ }
+}
+```
+
+And then add your plugin in your `nuxt.config.js`:
+
+```js{}[nuxt.config.js]
+export default {
+ plugins: [
+ '@/plugins/update.client.js'
+ ]
+}
+```
+
+Now everytime you will update a file in your `content/` directory, it will also dispatch the `fetchCategories` method.
+This documentation uses it actually. You can learn more by looking at [plugins/init.js](https://github.com/nuxt/content/blob/master/docs/plugins/init.js).
+
+## API Endpoint
+
+This module exposes an API endpoint in development so you can easily see the JSON of each directory or file, it is available on [http://localhost:3000/_content/](http://localhost:3000/_content/). The prefix is `_content` by default and can be configured with the [apiPrefix](/configuration#apiprefix) property.
+
+**Example**
+
+```bash
+-| content/
+---| articles/
+------| hello-world.md
+---| index.md
+---| settings.json
+```
+
+Will expose on `localhost:3000`:
+- `/_content/articles`: list the files in `content/articles/`
+- `/_content/articles/hello-world`: get `hello-world.md` as JSON
+- `/_content/index`: get `index.md` as JSON
+- `/_content/settings`: get `settings.json` as JSON
+- `/_content`: list `index` and `settings`
+
+The endpoint is accessible on `GET` and `POST` request, so you can use query params: [http://localhost:3000/_content/articles?only=title&only=description&limit=10](http://localhost:3000/_content/articles?only=title&only=description&limit=10).
+
+Since **v1.4.0**, this endpoint also supports `where` in query params:
+
+- All the keys that don't belong to any of the default ones will be applied to `where`
+
+`http://localhost:3000/_content/articles?author=...`
+
+- You can use `$operators` with `_`:
+
+`http://localhost:3000/_content/articles?author_regex=...`
+
+> This module uses LokiJS under the hood. You can check here for [query examples](https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries).
+
+- You can use [nested properties](/configuration#nestedproperties):
+
+`http://localhost:3000/_content/products?categories.slug_contains=top`
+
+> You can learn more about that endpoint in [lib/middleware.js](https://github.com/nuxt/content/blob/main/packages/content/lib/middleware.js).
diff --git a/docs/content-v1/en/1.getting-started/_dir.yml b/docs/content-v1/en/1.getting-started/_dir.yml
new file mode 100644
index 000000000..7572f6676
--- /dev/null
+++ b/docs/content-v1/en/1.getting-started/_dir.yml
@@ -0,0 +1 @@
+title: 'Getting Started'
diff --git a/docs/content-v1/en/2.examples/1.basic.md b/docs/content-v1/en/2.examples/1.basic.md
new file mode 100644
index 000000000..7454f908f
--- /dev/null
+++ b/docs/content-v1/en/2.examples/1.basic.md
@@ -0,0 +1,8 @@
+---
+title: Basic Usage
+description: 'Live example of basic usage of Nuxt Content on CodeSandbox.'
+toc: false
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-playground-l164h?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/en/2.examples/2.tailwindcss-typography.md b/docs/content-v1/en/2.examples/2.tailwindcss-typography.md
new file mode 100644
index 000000000..0654a9c23
--- /dev/null
+++ b/docs/content-v1/en/2.examples/2.tailwindcss-typography.md
@@ -0,0 +1,8 @@
+---
+title: TailwindCSS
+description: 'Live example of Nuxt Content with TailwindCSS Typography plugin on CodeSandbox.'
+toc: false
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-tailwindcss-typography-xq04z?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/en/2.examples/3.docs-theme.md b/docs/content-v1/en/2.examples/3.docs-theme.md
new file mode 100644
index 000000000..44caf4e5e
--- /dev/null
+++ b/docs/content-v1/en/2.examples/3.docs-theme.md
@@ -0,0 +1,8 @@
+---
+title: Docs Theme
+description: 'Live example of Nuxt Content docs theme on CodeSandbox.'
+toc: false
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-docs-theme-playground-inwxb?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/en/3.community/1.snippets.md b/docs/content-v1/en/3.community/1.snippets.md
new file mode 100644
index 000000000..31e278655
--- /dev/null
+++ b/docs/content-v1/en/3.community/1.snippets.md
@@ -0,0 +1,435 @@
+---
+title: Snippets
+description: 'Learn how to implement @nuxt/content into your app with these code snippets.'
+category: Community
+subtitle: 'Check out these code snippets that can be copied directly into your application.'
+version: 1.1
+---
+
+## Usage
+
+### asyncData
+
+```js
+export default {
+ async asyncData({ $content, params }) {
+ const article = await $content('articles', params.slug).fetch()
+
+ return {
+ article
+ }
+ }
+}
+```
+
+### head
+
+Add dynamic metas based on title and description defined in the [front-matter](https://content.nuxtjs.org/writing#front-matter):
+
+```js
+export default {
+ async asyncData({ $content, params }) {
+ const article = await $content('articles', params.slug).fetch()
+
+ return {
+ article
+ }
+ },
+ head() {
+ return {
+ title: this.article.title,
+ meta: [
+ { hid: 'description', name: 'description', content: this.article.description },
+ // Open Graph
+ { hid: 'og:title', property: 'og:title', content: this.article.title },
+ { hid: 'og:description', property: 'og:description', content: this.article.description },
+ // Twitter Card
+ { hid: 'twitter:title', name: 'twitter:title', content: this.article.title },
+ { hid: 'twitter:description', name: 'twitter:description', content: this.article.description }
+ ]
+ }
+ }
+}
+```
+
+## Features
+
+### Search
+
+Add a search input component by using watch:
+
+```vue
+
+
+
+
+
+
+ {{ article.title }}
+
+
+
+
+
+```
+
+> Check out the [search documentation](/fetching#searchfield-value)
+
+### Prev and Next
+
+Add previous and next links using the `surround` method:
+
+```vue
+
+
+
+ {{ prev.title }}
+
+
+
+ {{ next.title }}
+
+
+
+
+
+```
+
+
+
+If more than one document has the same slug, you should set `path` as the first argument of the `surround` method, instead of `slug`.
+This is because Nuxt Content finds previous and next documents based on the one that matched first.
+
+For example, if you sort documents according to `position`, the lower-positioned document will be always used for calculation,
+even when the current page is showing the higer-positioned document.
+
+
+
+> Check out the [surround documentation](/fetching#surroundslug-options)
+
+### Case-Insensitive Sorting
+
+It is needed to work around Nuxt Content's case-sensitive sorting, to add extra properties to documents, whose value is lower-cased.
+
+```js [nuxt.config.js]
+export default {
+ hooks: {
+ 'content:file:beforeInsert': (document) => {
+ if (document.extension === '.md') {
+ Object.entries(document).forEach(([key, value]) => {
+ const _key = `case_insensitive__${key}`; // prefix is arbitrary
+
+ if (!document[_key] && typeof value === 'string') {
+ document[_key] = value.toLocaleLowerCase();
+ }
+ });
+ }
+ }
+ }
+};
+```
+
+Then, call `sortBy` method with the extra prop's key by which to sort.
+
+```ts
+export default {
+ async asyncData({ $content, params }) {
+ const articles = await $content('articles', params.slug)
+ .sortBy('case_insensitive__title', 'asc') // Set prefixed prop
+ .fetch()
+
+ return {
+ articles
+ }
+ }
+}
+```
+
+> Check out the [`sortBy` documentation](/fetching#sortbykey-direction)
+
+### Table of contents
+
+Add a table of contents by looping over our array of toc and use the `id` to link to it and the `text` to show the title. We can use the `depth` to style the titles differently:
+
+```vue
+
+
+
+
+
+```
+
+> Check out the [Table of contents documentation](/writing#table-of-contents)
+
+### Dynamic routing
+
+Let's say you want to create an app with routes following the `content/` file structure. You can do so by creating a `pages/_.vue` component:
+
+```vue[pages/_.vue]
+
+```
+
+This way, if you go the `/themes/docs` route, it will display the `content/themes/docs.md` file. If you need an index page for your directories, you need to create a file with the same name as the directory:
+
+```bash
+content/
+ themes/
+ docs.md
+ themes.md
+```
+
+
+
+Don't forget to prefix your calls with the current locale if you're using `nuxt-i18n`.
+
+
+
+### Custom Highlighter
+
+#### Highlight.js
+
+```js{}[nuxt.config.js]
+import highlightjs from 'highlight.js'
+
+const wrap = (code, lang) => `${code}
+
+
+
+
+```
+
+**Props:**
+
+- document:
+ - Type: `Object`
+ - `requis`
+
+Vous pouvez en apprendre davantage au sujet de ce que vous pouvez écrire dans vos fichiers Markdown dans la section [écrire du contenu](/fr/writing#markdown).
+
+## Style
+
+En fonction de ce que vous utilisez pour designer vos applications, vous pourrez avoir besoin d'ajouter du style pour afficher votre Markdown correctement.
+
+Le composant `` ajoutera automatiquement la classe `.nuxt-content` que vous pourrez utiliser afin d'ajouter votre propre style:
+
+```css
+.nuxt-content h1 {
+ /* mon propre style h1 */
+}
+```
+
+Vous pouvez trouver un exemple dans le [répertoire docs](https://github.com/nuxt/content/blob/master/docs/pages/_slug.vue).
diff --git a/docs/content-v1/fr/1.getting-started/6.configuration.md b/docs/content-v1/fr/1.getting-started/6.configuration.md
new file mode 100644
index 000000000..8425ef3e3
--- /dev/null
+++ b/docs/content-v1/fr/1.getting-started/6.configuration.md
@@ -0,0 +1,191 @@
+---
+title: Configuration
+description: 'Vous pouvez configurer @nuxt/content avec la propriété content au sein du fichier nuxt.config.js'
+---
+
+Vous pouvez configurer `@nuxt/content` avec la propriété `content` au sein du fichier `nuxt.config.js`.
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ // Ma configuration personnalisée
+ }
+}
+```
+
+Voir les [options par défaut](#configuration-par-défaut).
+
+## Propriétés
+
+### `apiPrefix`
+
+- Type: `String`
+- Défaut: `'/_content'`
+
+La route qui sera utilisée pour les appels API côté client et les SSE.
+
+```js [nuxt.config.js]
+content: {
+ // l'api $content sera disponible à l'adresse localhost:3000/content-api
+ apiPrefix: 'content-api'
+}
+```
+
+### `dir`
+
+- Type: `String`
+- Défaut: `'content'`
+
+Le répertoire utilisé pour l'écriture du contenu. Vous pouvez fournir un chemin absolu, mais dans le cas où le chemin est relatif, il sera déterminé avec la propriété [srcDir](https://nuxtjs.org/api/configuration-srcdir) de Nuxt.
+
+```js [nuxt.config.js]
+content: {
+ dir: 'mon-contenu' // lit le contenu depuis mon-contenu/
+}
+```
+
+### `fullTextSearchFields`
+
+- Type: `Array`
+- Défaut: `['title', 'description', 'slug', 'text']`
+
+Les champs qui ont besoin d'être indexés afin d'être recherchables, vous pouvez en apprendre plus sur les recherches [ici](/fr/fetching#searchfield-value).
+
+`text` est une propriété spéciale qui contient votre Markdown avant qu'il soit converti en AST.
+
+```js [nuxt.config.js]
+content: {
+ // Les recherches s'effectuent uniquement sur les champs titre et description
+ fullTextSearchFields: ['title', 'description']
+}
+```
+
+### `nestedProperties`
+
+- Type `Array`
+- Défaut: `[]`
+- Version: **v1.3.0**
+
+Vous pouvez enregistrer des propriétés imbriquées afin que la notation ponctuelle et le filtrage en profondeur soient pris en charge.
+
+```js [nuxt.config.js]
+content: {
+ nestedProperties: ['categories.slug']
+}
+```
+
+### `markdown`
+
+Ce module se sert de [remark](https://github.com/remarkjs/remark) afin de compiler des fichiers Markdown vers du JSON AST qui sera stocké dans une variable `body`.
+
+Par défaut, ce module a recours à des plugins pour améliorer la conversion du Markdown. Vous pouvez ajouter vos propres plugins ou modifier ceux par défaut en utilisant la propriété `basePlugins`. Chaque plugin est configuré en utilisant son nom en camelCase : `remark-external-links` => `externalLinks`.
+
+> Vous pouvez retrouver des plugins pour remark [ici](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins).
+
+### `markdown.basePlugins`
+
+- Type: `Array`
+- Défaut: `['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes']`
+
+### `markdown.plugins`
+
+- Type: `Array`
+- Défaut: `[]`
+
+### `markdown.externalLinks`
+
+- Type: `Object`
+- Défaut: `{}`
+
+Vous pouvez controler le comportement des liens avec cette option. Consultez la liste des options [ici](https://github.com/remarkjs/remark-external-links#api).
+
+```js [nuxt.config.js]
+content: {
+ markdown: {
+ externalLinks: {
+ target: '_self' // désactive target="_blank"
+ rel: false // désactive rel="nofollow noopener"
+ }
+ }
+}
+```
+
+### `markdown.footnotes`
+
+- Type: `Object`
+- Défaut: `{ inlineNotes: true }`
+
+Vous pouvez controler le comportement des liens avec cette option. Consultez la liste des [ici](https://github.com/remarkjs/remark-footnotes#remarkusefootnotes-options).
+
+### `markdown.prism.theme`
+
+- Type: `String`
+- Défaut: `'prismjs/themes/prism.css'`
+
+Ce module gère la coloration syntaxique du contenu Markdown à l'aide de [PrismJS](https://prismjs.com).
+
+Il insère automatiquement le thème PrismJS désiré au sein de votre configuration Nuxt.js, donc si souhaitez utiliser un thème différent de celui par défaut, consultez les [prism-themes](https://github.com/PrismJS/prism-themes):
+
+```js [nuxt.config.js]
+content: {
+ markdown: {
+ prism: {
+ theme: 'prism-themes/themes/prism-material-oceanic.css'
+ }
+ }
+}
+```
+
+Pour désactiver l'inclusion du thème, définissez prism à `false`:
+
+```js [nuxt.config.js]
+content: {
+ markdown: {
+ prism: {
+ theme: false
+ }
+ }
+}
+```
+
+### `yaml`
+
+- Type: `Object`
+- Défaut: `{}`
+
+Ce module utilise `js-yaml` pour convertir les fichiers yaml, vous pouvez consulter les options [ici](https://github.com/nodeca/js-yaml#api).
+
+Notez que nous forçons l'option `json: true`.
+
+### `csv`
+
+- Type: `Object`
+- Défaut: `{}`
+
+Ce module utilise `node-csvtojson` pour convertir les fichiers csv, vous pouvez consulter les options [ici](https://github.com/Keyang/node-csvtojson#parameters).
+
+## Configuration par défaut
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ apiPrefix: '_content',
+ dir: 'content',
+ fullTextSearchFields: ['title', 'description', 'slug', 'text'],
+ nestedProperties: [],
+ markdown: {
+ externalLinks: {},
+ footnotes: {
+ inlineNotes: true
+ },
+ 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-v1/fr/1.getting-started/7.advanced.md b/docs/content-v1/fr/1.getting-started/7.advanced.md
new file mode 100644
index 000000000..653de5135
--- /dev/null
+++ b/docs/content-v1/fr/1.getting-started/7.advanced.md
@@ -0,0 +1,194 @@
+---
+title: Utilisation avancée
+description: Apprenez l'utilisation avancée du module @nuxt/content
+position: 7
+category: Pour commencer
+---
+
+## Utilisation Programmatique
+
+`$content` est accessible depuis **@nuxt/content**.
+
+::alert
+
+Notez que vous ne pouvez y accéder seulement **après que le module ait été chargé** par Nuxt. L'utilisation de `require(@nuxt/content)` devrait avoir lieu dans les hooks ou les méthodes internes de 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)
+ }
+ }
+}
+```
+
+### Génération de Site Statique
+
+::alert{type="info"}
+
+Si vous utilisez Nuxt 2.13+, la commande `nuxt export` a une fonctionnalité de crawler intégrée, donc vous ne devriez pas avoir besoin de recourir à `generate.routes`.
+
+::
+
+Lors de l'utilisation de `nuxt generate`, vous devez spécifier les routes dynamiques avec `generate.routes`, car Nuxt ne sait pas quelles seront ces routes donc il ne sera pas capable de les générer.
+
+**Exemple**
+
+```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)
+ }
+ }
+}
+```
+
+## Hooks
+
+Ce module ajoute des hooks que vous pouvez utiliser:
+
+### `content:file:beforeInsert`
+
+Vous permez d'ajouter des données à un document avant qu'il ne soit stocké.
+
+Arguments:
+
+- `document`
+ - Type: `Object`
+ - Propriétés:
+ - Voir [écrire du contenu](/fr/writing)
+
+**Exemple**
+
+En prenant l'exemple du blog starter, on utilise `file:beforeInsert` pour ajouter une propritété `readingTime` à un document en se servant de [reading-time](https://github.com/ngryman/reading-time).
+
+> `text` est le contenu du corps d'un fichier Markdown avant qu'il ne soit transformé en JSON AST, vous pouvez l'utiliser à ce stade mais il n'est pas retourné par l'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
+ }
+ }
+ }
+}
+```
+
+## Gérer le Rechargement à Chaud
+
+::alert{type="info"}
+
+Lorsque vous développez, ce module appellera automatiquement l'action `nuxtServerInit` (si elle est définie) et `$nuxt.refresh()` afin de rafraîchir la page actuelle.
+
+::
+
+Dans le cas où vous souhaiteriez écouter cet évènement et ajouter des instructions supplémentaires, vous pouvez écouter l'évènement `content:update` côté client en utilisant `$nuxt.$on('content:update')`:
+
+```js{}[plugins/update.client.js
+export default function ({ store }) {
+ // Uniquement en développement
+ if (process.dev) {
+ window.onNuxtReady(($nuxt) => {
+ $nuxt.$on('content:update', ({ event, path }) => {
+ // Raffraîchit le store des catégories
+ store.dispatch('fetchCategories')
+ })
+ })
+ }
+}
+```
+
+Ajoutez ensuite votre plugin dans votre fichier `nuxt.config.js`:
+
+```js{}[nuxt.config.js]
+export default {
+ plugins: [
+ '@/plugins/update.client.js'
+ ]
+}
+```
+
+Dès lors que vous opèrerez un changement sur un des fichiers au sein du répertoire `content/`, la méthode `fetchCategories` sera appelée. D'ailleurs, cette documentation l'utilise, vous pouvez en apprendre davantage en jetant un oeil à [plugins/categories.js](https://github.com/nuxt/content/blob/master/docs/plugins/categories.js).
+
+## Intégration avec @nuxtjs/feed
+
+Dans le cas d'articles, le contenu peut être utilisé pour générer des fils d'actualités en utilisant le module [@nuxtjs/feed](https://github.com/nuxt-community/feed-module).
+
+::alert{type="info"}
+
+Pour utiliser `$content` au sein de l'option `feed`, vous devez ajouter `@nuxt/content` avant `@nuxtjs/feed` dans la propriété `modules`.
+
+::
+
+**Exemple**
+
+```js
+export default {
+ modules: [
+ '@nuxt/content',
+ '@nuxtjs/feed'
+ ],
+
+ feed () {
+ const baseUrlArticles = 'https://mywebsite.com/articles'
+ const baseLinkFeedArticles = '/feed/articles'
+ const feedFormats = {
+ rss: { type: 'rss2', file: 'rss.xml' },
+ atom: { type: 'atom1', file: 'atom.xml' },
+ json: { type: 'json1', file: 'feed.json' },
+ }
+ const { $content } = require('@nuxt/content')
+
+ const createFeedArticles = async function (feed) {
+ feed.options = {
+ title: 'Mon Blog',
+ description: 'J\'écris à propos de la téchnologie',
+ link: baseUrlArticles,
+ }
+ const articles = await $content('articles').fetch()
+
+ articles.forEach((article) => {
+ const url = `${baseUrlArticles}/${article.slug}`
+
+ feed.addItem({
+ title: article.title,
+ id: url,
+ link: url,
+ date: article.published,
+ description: article.summary,
+ content: article.summary,
+ author: article.authors,
+ })
+ })
+ }
+
+ return Object.values(feedFormats).map(({ file, type }) => ({
+ path: `${baseLinkFeedArticles}/${file}`,
+ type: type,
+ create: feedCreateArticles,
+ }))
+ }
+}
+```
diff --git a/docs/content-v1/fr/1.getting-started/_dir.yml b/docs/content-v1/fr/1.getting-started/_dir.yml
new file mode 100644
index 000000000..387dad20d
--- /dev/null
+++ b/docs/content-v1/fr/1.getting-started/_dir.yml
@@ -0,0 +1 @@
+title: Pour commencer
diff --git a/docs/content-v1/fr/2.examples/1.basic.md b/docs/content-v1/fr/2.examples/1.basic.md
new file mode 100644
index 000000000..6a9f1f27e
--- /dev/null
+++ b/docs/content-v1/fr/2.examples/1.basic.md
@@ -0,0 +1,8 @@
+---
+title: Exemple d'utilisation de base
+description: "Exemple en direct d'utilisation de base de Nuxt Content sur CodeSandbox."
+toc: false
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-playground-l164h?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/fr/2.examples/2..tailwindcss-typography.md b/docs/content-v1/fr/2.examples/2..tailwindcss-typography.md
new file mode 100644
index 000000000..ae25d855b
--- /dev/null
+++ b/docs/content-v1/fr/2.examples/2..tailwindcss-typography.md
@@ -0,0 +1,7 @@
+---
+title: Exemple TailwindCSS Typography
+description: 'Exemple en direct de contenu Nuxt avec le plugin TailwindCSS Typography sur CodeSandbox.'
+toc: true
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-tailwindcss-typography-twhtf?hidenavigation=1&theme=dark"}
diff --git a/docs/content-v1/fr/2.examples/3.docs-theme.md b/docs/content-v1/fr/2.examples/3.docs-theme.md
new file mode 100644
index 000000000..c20fc9b06
--- /dev/null
+++ b/docs/content-v1/fr/2.examples/3.docs-theme.md
@@ -0,0 +1,8 @@
+---
+title: Exemple de thèmes de documentation
+description: 'Exemple en direct du thème de la documentation Nuxt Content sur CodeSandbox.'
+toc: true
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-docs-theme-playground-inwxb?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/fr/2.examples/_dir.yml b/docs/content-v1/fr/2.examples/_dir.yml
new file mode 100644
index 000000000..17f6e57ea
--- /dev/null
+++ b/docs/content-v1/fr/2.examples/_dir.yml
@@ -0,0 +1 @@
+title: Exemples
diff --git a/docs/content-v1/fr/3.community/1.snippets.md b/docs/content-v1/fr/3.community/1.snippets.md
new file mode 100644
index 000000000..72b3a7896
--- /dev/null
+++ b/docs/content-v1/fr/3.community/1.snippets.md
@@ -0,0 +1,306 @@
+---
+title: Extraits
+description: 'Apprenez comment implémenter @nuxt/content dans votre application avec ces extraits de code.'
+subtitle: 'Découvrez ces extraits de code qui peuvent être copiés directement dans votre application.'
+version: 1.1
+---
+
+## Utilisation
+
+### asyncData
+
+```js
+export default {
+ async asyncData({ $content, params }) {
+ const article = await $content('articles', params.slug).fetch()
+
+ return {
+ article
+ }
+ }
+}
+```
+
+### head
+
+Ajouter des métadatas en fonction du titre et de la description définie dans [front-matter](https://content.nuxtjs.org/writing#front-matter) :
+
+```js
+export default {
+ async asyncData({ $content, params }) {
+ const article = await $content('articles', params.slug).fetch()
+
+ return {
+ article
+ }
+ },
+ head() {
+ return {
+ title: this.article.title,
+ meta: [
+ { hid: 'description', name: 'description', content: this.article.description },
+ // Open Graph
+ { hid: 'og:title', property: 'og:title', content: this.article.title },
+ { hid: 'og:description', property: 'og:description', content: this.article.description },
+ // Twitter Card
+ { hid: 'twitter:title', name: 'twitter:title', content: this.article.title },
+ { hid: 'twitter:description', name: 'twitter:description', content: this.article.description }
+ ]
+ }
+ }
+}
+```
+
+## Fonctionnalités
+
+### Recherche
+
+Ajoutez un composant de recherche à l'aide de watch :
+
+```vue
+
+
+
+
+
+
+ {{ article.title }}
+
+
+
+
+
+```
+
+> Consulter la [documentatio de recherche](/fetching#searchfield-value).
+
+### Prev et Next
+
+Ajoutez les liens précédents et suivants en utilisant la méthode `surround` :
+
+```vue
+
+
+
+ {{ prev.title }}
+
+
+
+ {{ next.title }}
+
+
+
+
+
+```
+
+> Consulter la [documentation de surround](/fetching#surroundslug-options).
+
+### Table des matières
+
+Ajoutez une table des matières en parcourant le tableau toc et utilisez l'`id` pour créer un lien vers celui-ci ainsi que le `text` pour afficher le titre. Nous pouvons utiliser la propriété `depth` pour styliser les titres différemment :
+
+```vue
+
+
+
+
+
+```
+
+> Consulter la [documentation de la table des matières](/writing#table-of-contents).
+
+### Routes dynamiques
+
+Supposons que vous souhaitez créer une application avec des routes suivant la structure de fichier `content/`, vous pouvez le faire en créant un composant `pages/_.vue` :
+
+```vue[pages/_.vue]
+
+```
+
+De cette façon, si vous suivez la route `/themes/docs`, il affichera le fichier `content/themes/docs.md`. Si vous avez besoin d'une page d'index pour vos répertoires, vous devez créer un fichier avec le même nom que le répertoire :
+
+```bash
+content/
+ themes/
+ docs.md
+ themes.md
+```
+
+
+
+N'oubliez pas de préfixer vos appels avec les paramètres de langues si vous utilisez `nuxt-i18n`.
+
+
+
+### Surligneurs personnalisés
+
+#### Highlight.js
+
+```js [nuxt.config.js]
+import highlightjs from 'highlight.js'
+
+const wrap = (code, lang) => `${code}` を使うデモ。
+
+
+
+
+ディレクトリ上で `$content()` を使うと、コンテンツの一覧表示、フィルタリング、検索を行うことができます。
+
+
+
diff --git a/docs/content-v1/ja/1.getting-started/2.installation.md b/docs/content-v1/ja/1.getting-started/2.installation.md
new file mode 100644
index 000000000..b6ef50642
--- /dev/null
+++ b/docs/content-v1/ja/1.getting-started/2.installation.md
@@ -0,0 +1,50 @@
+---
+title: インストール
+description: 'たった2つのステップであなたのNuxtプロジェクトに@nuxt/contentをインストールします'
+---
+
+プロジェクトに `@nuxt/content` の依存関係を追加します。
+
+::code-group
+ ```bash [Yarn]
+ yarn add @nuxt/content
+ ```
+
+ ```bash [NPM]
+ npm install @nuxt/content
+ ```
+::
+
+そして、`nuxt.config.js` の `modules` セクションに `@nuxt/content` を追加します。
+
+```js [nuxt.config.js]
+{
+ modules: [
+ '@nuxt/content'
+ ],
+ content: {
+ // Options
+ }
+}
+```
+
+## TypeScript
+
+tsconfig.json内の"types"配列へ、`@nuxt/types` (Nuxt 2.9.0+)もしくは`@nuxt/vue-app`に続けて型を追記します。
+
+**tsconfig.json**
+
+```json
+{
+ "compilerOptions": {
+ "types": [
+ "@nuxt/types",
+ "@nuxt/content"
+ ]
+ }
+}
+```
+
+> **なぜ?**
+>
+> nuxt の動作方法のため、コンテキストの `$content` プロパティは TypeScriptの[declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)機能 を通して、nuxt `Context` インターフェースにマージする必要があります。型に `@nuxt/content` を追加すると、パッケージから型をインポートし、TypeScript が `Context` インターフェースに追加されたものを認識するようになります。
diff --git a/docs/content-v1/ja/1.getting-started/3.writing.md b/docs/content-v1/ja/1.getting-started/3.writing.md
new file mode 100644
index 000000000..afccd2e9e
--- /dev/null
+++ b/docs/content-v1/ja/1.getting-started/3.writing.md
@@ -0,0 +1,571 @@
+---
+title: コンテンツを作成する
+description: 'Markdown、YAML、CSV、JSONに対応したcontent/内の書き方を学びます。'
+multiselectOptions:
+ - VuePress
+ - Gridsome
+ - Nuxt
+---
+
+まず、プロジェクト内に `content/` ディレクトリを作成します。
+
+```bash
+content/
+ articles/
+ article-1.md
+ article-2.md
+ home.md
+```
+
+このモジュールは `.md`, `.yaml`, `.yml`, `.csv`, `.json`, `.json5`, `.xml` ファイルを解析し、以下のプロパティを生成します。
+
+- `dir`
+- `path`
+- `slug`
+- `extension` (ex: `.md`)
+- `createdAt`
+- `updatedAt`
+
+## Markdown
+
+このモジュールは `.md` ファイルを変数`body`へ格納されたJSON ASTツリー構造体に変換します。
+
+Markdownコンテンツの `body` を表示するために `` コンポーネントを必ず使用してください。[コンテンツを表示する](/displaying)を参照してください。
+
+> Markdownをマスターするには、[basic syntax guide](https://www.markdownguide.org/basic-syntax)を参照してください。
+
+### フロントマター
+
+マークダウンファイルにYAMLフロントマターブロックを追加できます。フロントマターはファイルの最初でなければならず、`---`の間に有効なYAMLの形式を取らなければなりません。ここに基本的な例を示します。
+
+```md
+---
+title: Introduction
+description: Learn how to use @nuxt/content.
+---
+```
+
+これらの変数はドキュメント内に注入されます。
+
+```json
+{
+ body: Object
+ title: "Introduction"
+ description: "Learn how to use @nuxt/content."
+ dir: "/"
+ extension: ".md"
+ path: "/index"
+ slug: "index"
+ toc: Array
+ createdAt: DateTime
+ updatedAt: DateTime
+}
+```
+
+### 抜粋
+
+コンテンツの抜粋または要約は、``を仕切りとして使用してコンテンツから抽出できます。
+
+```md
+---
+title: Introduction
+---
+
+@nuxt/contentの使用方法を学びます。
+
+より多くの仕切りを超えたコンテンツの全量。
+```
+
+Description プロパティには、フロントマター プロップ内で定義されていない限り、抜粋コンテンツが含まれます。
+
+
+::alert{type="info"}
+<!--more--> を正確に入力するように注意してください。 つまり、すべて小文字で、空白はありません。
+::
+
+変数の例がドキュメントに挿入されます。
+```json
+{
+ body: Object
+ title: "Introduction"
+ description: "@nuxt/contentの使用方法を学びます。"
+ dir: "/"
+ extension: ".md"
+ path: "/index"
+ slug: "index"
+ toc: Array
+ createdAt: DateTime
+ updatedAt: DateTime
+}
+```
+
+### 見出し
+
+このモジュールは自動的に`id`と`link`を各見出しに追加します。
+
+次のようなMarkdownファイルがあるとします。
+
+```md[home.md]
+# Lorem ipsum
+## dolor—sit—amet
+### consectetur & adipisicing
+#### elit
+##### elit
+```
+
+これらはJSON ASTに変換され、`nuxt-content`コンポーネントを使用することで、HTMLのようにレンダリングされます。
+
+```html
+Nuxt Link to Blog
+
+Html Link to Blog
+
+[Markdown Link to Blog](/articles)
+
+External link html
+
+[External Link markdown](https://nuxtjs.org)
+```
+
+### 脚注
+
+このモジュールは、[remark-footnotes](https://github.com/remarkjs/remark-footnotes)を使った脚注のための拡張Markdown構文をサポートしています。このプラグインの設定方法については、[ここ](/ja/configuration#markdown)をチェックしてください。
+
+以下は脚注を使用した例です。
+
+```md
+Here's a simple footnote,[^1] and here's a longer one.[^bignote]
+
+[^1]: This is the first footnote.
+
+[^bignote]: Here's one with multiple paragraphs and code.
+
+ Indent paragraphs to include them in the footnote.
+
+ `{ my code }`
+
+ Add as many paragraphs as you like.
+```
+
+> さらに詳しく知りたいなら、 [extended syntax guide](https://www.markdownguide.org/extended-syntax/#footnotes)を参照してください。
+
+### コードブロック
+
+このモジュールはコードブロックを自動的にラップし、[PrismJS](https://prismjs.com)クラスを適用します（[シンタックスハイライト](#シンタックスハイライト)参照）。
+
+Markdownのコードブロックは、` ``` `の内側にラップされます。オプションで、特定のシンタックスハイライトを有効にし、コードブロックの言語を指定できます。
+
+基本的に、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]
+
+
server.js
+
+
+ ...
+
+
+
A mix of Markdown and HTML .
+```
+
+コンポーネントの中にMarkdownを配置する場合、その前に空の行を続けて配置しなければならないことに注意してください。そうでない場合は、ブロック全体がカスタムHTMLとして扱われます。
+
+**ダメな例:**
+
+```html
+
+ *Markdown* and HTML .
+
+```
+
+**良い例:**
+
+```html
+
+
+ *Markdown* and HTML .
+
+
+```
+
+**このようになります**:
+
+```html
+*Markdown* and HTML .
+```
+
+### Vueコンポーネント
+
+グローバルVueコンポーネントを使用することも、Markdownを表示しているページに登録されたコンポーネントを使用することもできます。
+
+`nuxt/content`はすべてのMarkdownが著者によって提供される（サードパーティのユーザー投稿ではなく）という前提で動作するので、ソースは完全に（タグを含む）処理されます。この仕様に関して、[rehype-raw](https://github.com/rehypejs/rehype-raw)からいくつかの注意点があります。
+
+1. コンポーネントはケバブケースで参照する必要があります。
+
+```html
+Use instead of
+```
+
+2. セルフクローズタグは使えません。以下は **動作しません**：
+
+```html
+
+Please choose a framework :
+
+
+
+また、フロントマターでコンポーネントのオプションを定義することもできます。
+
+```md[home.md]
+---
+multiselectOptions:
+ - VuePress
+ - Gridsome
+ - Nuxt
+---
+
+
+
+
+
+::alert{type="info"}
+
+これらのコンポーネントは `` コンポーネントを使ってレンダリングされます。[コンテンツを表示する](/ja/displaying#component)を参照してください。
+
+::
+
+またMarkdownの中で``タグを***使用できない***ことにも注意してください。（例: `v-slot`と使用する）
+
+#### グローバルコンポーネント
+
+**v1.4.0** と **v2.13.0** から、コンポーネントを `components/global/` ディレクトリに置くことができるようになり、ページ内でコンポーネントをインポートする必要がなくなりました。
+
+```bash
+components/
+ global/
+ Hello.vue
+content/
+ home.md
+```
+
+これだけで、`content/home.md`の中で`
+ -
+
Title
+ Hello World
+
+
+```
+
+以下のように変換されます。
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".xml",
+ "body": {
+ "xml": {
+ "item": [
+ {
+ "$": {
+ "prop": "abc"
+ },
+ "title": [
+ "Title"
+ ],
+ "description": [
+ "Hello World"
+ ]
+ }
+ ]
+ }
+}
+```
+
+## YAML / YML
+
+定義したデータがドキュメント自体に注入されます。
+
+> bodyは生成されません。
+
+### 用例
+
+`content/home.yaml`ファイル
+
+```yaml
+title: Home
+description: Welcome!
+```
+
+以下のように変換されます。
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".yaml",
+ "title": "Home",
+ "description": "Welcome!"
+}
+```
+
+## JSON / JSON5
+
+定義したデータがドキュメント自体に注入されます。
+
+> bodyは生成されません。
+
+### 用例
+
+`content/home.json`ファイル
+
+```json
+{
+ "title": "Home",
+ "description": "Welcome!"
+}
+
+```
+
+以下のように変換されます。
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".json",
+ "title": "Home",
+ "description": "Welcome!"
+}
+```
diff --git a/docs/content-v1/ja/1.getting-started/4.fetching.md b/docs/content-v1/ja/1.getting-started/4.fetching.md
new file mode 100644
index 000000000..b88fdd286
--- /dev/null
+++ b/docs/content-v1/ja/1.getting-started/4.fetching.md
@@ -0,0 +1,232 @@
+---
+title: コンテンツを取得する
+description: 'Nuxt.jsプロジェクトで$contentを使って静的コンテンツを取得する方法を紹介します。'
+---
+
+`Content`はグローバルに `$content` インスタンスを注入するので、`this.$content` を使えばどこからでもアクセスできます。plugins、asyncData、fetch、nuxtServerInit、Middlewareは `context.$content` からアクセスできます。
+
+## メソッド一覧
+
+### $content(path, options?)
+
+- `path`
+ - Type: `String`
+ - Default: `/`
+- `options`
+ - Type: `Object`
+ - Default: `{}`
+ - Version: **>= v1.3.0**
+- `options.deep`
+ - Type: `Boolean`
+ - Default: `false`
+ - Version: **>= v1.3.0**
+ - *サブディレクトリからのファイルの取得*
+- `options.text`
+ - Type: `Boolean`
+ - Default: `false`
+ - Version: **>= v1.4.0**
+ - *元のマークダウンの内容を`text`変数で返します*
+- チェーンシーケンスを返します
+
+> 引数を複数与えることもできます。`$content('article', params.slug)` は `/articles/${params.slug}` に変換されます。
+
+`path`にはファイルかディレクトリを指定できます。`path`がファイルの場合、`fetch()` は `Object` を返し、ディレクトリの場合は `Array` を返します。
+
+第二引数に `{ deep: true }` を渡すことでサブディレクトリからファイルを取得できます。
+
+以下で紹介するメソッドはすべて`$content`の後につなげて使います。`Promise` を返す`fetch`以外は、チェーンシーケンスを返します。
+
+
+### only(keys)
+
+- `keys`
+ - Type: `Array` | `String`
+ - `required`
+
+フィールドのサブセットを抽出します。
+
+```js
+const { title } = await this.$content('article-1').only(['title']).fetch()
+```
+
+### without(keys)
+
+- `keys`
+ - Type: `Array` | `String`
+ - `required`
+
+フィールドのサブセットを削除します。
+
+```js
+const { title, ...propsWithoutBody } = await this.$content('article-1').without(['body']).fetch()
+```
+
+### where(query)
+
+- `query`
+ - Type: `Object`
+ - `required`
+
+クエリで結果をフィルタリングします。
+
+クエリはmongoクエリ構文のサブセットに基づいています。たとえば次のように処理します `$eq`, `$ne`, `$gt`, `$gte`, `$lt`, `$lte`, `$in`, ...
+
+```js
+// implicit (assumes $eq operator)
+const articles = await this.$content('articles').where({ title: 'Home' }).fetch()
+// explicit $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()
+```
+
+オブジェクトや配列でフィルタリングするには、`nestedProperties`を有効にする必要があります。[設定](/ja/configuration#nestedproperties)を参照してください。
+
+```js
+const products = await this.$content('products').where({ 'categories.slug': { $contains: 'top' } }).fetch()
+
+const products = await this.$content('products').where({ 'categories.slug': { $contains: ['top', 'woman'] } }).fetch()
+```
+
+> 内部的にLokiJSを使用しています。[query examples](https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries)をチェックしてください。
+
+### sortBy(key, direction)
+
+- `key`
+ - Type: `String`
+ - `required`
+- `direction`
+ - Type: `String`
+ - Value: `'asc'` or `'desc'`
+ - Default: `'asc'`
+
+結果をkeyでソートします。
+
+```js
+const articles = await this.$content('articles').sortBy('title').fetch()
+```
+
+> 複数回チェインすることで、複数のフィールドでソートできます。
+
+### limit(n)
+
+- `n`
+ - Type: `String` | `Number`
+ - `required`
+
+結果の数を最大でnまでに制限します。
+
+```js
+// fetch only 5 articles
+const articles = await this.$content('articles').limit(5).fetch()
+```
+
+### skip(n)
+
+- `n`
+ - Type: `String` | `Number`
+ - `required`
+
+結果をnだけスキップします。
+
+```js
+// fetch the next 5 articles
+const articles = await this.$content('articles').skip(5).limit(5).fetch()
+```
+
+### search(field, value)
+
+- `field`
+ - Type: `String`
+ - `required`
+- `value`
+ - Type: `String`
+
+フィールドの全文検索を行います。`value`はオプションで、この場合は `field` が `value` となり、定義したすべての全文検索フィールドに対して検索が行われます。
+
+検索したいフィールドは、インデックスを作成するためにオプションで定義する必要があります。[設定](/ja/configuration#fulltextsearchfields)を参照してください。
+
+```js
+// Search on field title
+const articles = await this.$content('articles').search('title', 'welcome').fetch()
+// Search on all pre-defined fields
+const articles = await this.$content('articles').search('welcome').fetch()
+```
+
+
+
+アプリに検索を実装する方法について[この実装例](/ja/examples#検索)を参考にしてください
+
+
+
+### surround(slug, options)
+
+- `slug`
+ - Type: `String`
+ - `required`
+- `options`
+ - Type: `Object`
+ - Default: `{ before: 1, after: 1}`
+
+Get prev and next results around a specific slug.
+
+You will always obtain an array of fixed length filled with the maching document or `null`.
+
+特定のスラッグを中心として、前の結果と次の結果を取得します。
+
+ドキュメントか`null`が入った固定長の配列が戻り値になります。
+
+```js
+const [prev, next] = await this.$content('articles')
+ .only(['title', 'path'])
+ .sortBy('date')
+ .where({ isArchived: false })
+ .surround('article-2')
+ .fetch()
+
+// Returns
+[
+ {
+ title: 'Article 1',
+ path: 'article-1'
+ },
+ null // no article-3 here
+]
+```
+
+> `surround`を利用する場合、`search`、`limit`、`skip`は考慮されません。
+
+::alert{type="info"}
+
+アプリに前後の記事へのリンクを実装する方法について[この実装例](/ja/examples#ページネーション)を参考にしてください
+
+::
+
+### fetch()
+
+- Returns: `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()
+```
+
+> 開発をスムーズにするために、[Content API](/ja/advanced#api-endpoint)の使い方をチェックしてください。
diff --git a/docs/content-v1/ja/1.getting-started/5.displaying.md b/docs/content-v1/ja/1.getting-started/5.displaying.md
new file mode 100644
index 000000000..a7afa8812
--- /dev/null
+++ b/docs/content-v1/ja/1.getting-started/5.displaying.md
@@ -0,0 +1,66 @@
+---
+title: コンテンツを表示する
+description: 'You can use `` component directly in your template to display your Markdown.'
+---
+
+::alert{type="info"}
+ここではMarkdownファイルのみを対象としています。
+::
+
+## Component
+
+template内で `` コンポーネントを直接使用してpageのbodyを表示できます。
+
+```vue
+
+
+ {{ page.title }}
+
+
+
+
+```
+
+
+**Props:**
+- document:
+ - Type: `Object`
+ - `required`
+
+Markdownファイルに書くことができる内容についての詳細はこちらをご覧ください。[コンテンツを作成する](/ja/writing#markdown)
+
+## Style
+
+アプリのデザインによっては、Markdownを適切に表示するためにいくつかのスタイルを記述する必要があるかもしれません。
+
+``コンポーネントは自動的に`.nuxt-content`クラスを追加します。これを使用してスタイルをカスタマイズできます。
+
+```css
+.nuxt-content h1 {
+ /* my custom h1 style */
+}
+```
+
+[このドキュメントサイトでのスタイルカスタマイズの例](https://github.com/nuxt/content/blob/master/docs/pages/_slug.vue)を見てみましょう。
+
+## ライブ編集
+
+> バージョン**>= v1.4.0** で利用可能です。
+**開発中のみ**、``コンポーネント上で**ダブルクリック**することで、コンテンツを編集することができます。テキストエリアは、現在のファイルの内容を編集することができ、ファイルシステムに保存されます。
+
+
+
diff --git a/docs/content-v1/ja/1.getting-started/6.configuration.md b/docs/content-v1/ja/1.getting-started/6.configuration.md
new file mode 100644
index 000000000..ac36c6457
--- /dev/null
+++ b/docs/content-v1/ja/1.getting-started/6.configuration.md
@@ -0,0 +1,321 @@
+---
+title: 設定
+description: 'nuxt.config.jsのcontentプロパティで@nuxt/contentの設定ができます。'
+---
+
+`nuxt.config.js`の`content`プロパティで`@nuxt/content`の設定ができます。
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ // カスタム設定
+ }
+}
+```
+
+個々の設定項目を学ぶ前に、[デフォルトの設定](#デフォルトの設定)を確認してください。
+
+### デフォルト値とのマージ
+
+すべての設定のプロパティを関数または静的な値 (プリミティブ、オブジェクト、配列、...) として定義できます。
+関数で定義する場合、デフォルト値が第一引数として提供されます。
+
+もしプロパティを定義するのに関数を使わない場合、設定されていない値はデフォルト値とマージします。
+デフォルト値は非常に賢明なので、これは`markdown.remarkPlugins`、`markdown.rehypePlugins`などに便利です。
+デフォルト値とのマージを回避したい場合、関数でのプロパティ定義を利用してください。
+
+## プロパティ一覧
+
+### `apiPrefix`
+
+- Type: `String`
+- Default: `'/_content'`
+
+クライアントサイドのAPI呼び出しやSSE(Server-Sent Events)に利用されるルート
+
+```js [nuxt.config.js]
+content: {
+ // $content api が localhost:3000/content-api で提供されます
+ apiPrefix: 'content-api'
+}
+```
+
+### `dir`
+
+- Type: `String`
+- Default: `'content'`
+
+コンテンツを書くためのディレクトリ。絶対パスを指定できますが、相対パスの場合はNuxt [srcDir](https://nuxtjs.org/api/configuration-srcdir)で解決されます。
+
+```js [nuxt.config.js]
+content: {
+ dir: 'my-content' // my-content/ から contentを読み取ります
+}
+```
+
+### `fullTextSearchFields`
+
+- Type: `Array`
+- Default: `['title', 'description', 'slug', 'text']`
+
+全文検索を有効にするため、インデックス化する必要があるフィールド。検索についての詳細は[ここ](/ja/fetching#searchfield-value)を参照してください
+
+`text`は、ASTにパースされる前のMarkdownを含む特別なキーです。
+
+```js [nuxt.config.js]
+content: {
+ // title と description だけを検索
+ fullTextSearchFields: ['title', 'description']
+}
+```
+
+### `nestedProperties`
+
+- Type `Array`
+- Default: `[]`
+- Version: **>= v1.3.0**
+
+ドット表記やディープフィルタリングを処理するために、入れ子になったプロパティを登録します。
+
+```js [nuxt.config.js]
+content: {
+ nestedProperties: ['categories.slug']
+}
+```
+
+### `markdown`
+
+[remark](https://github.com/remarkjs/remark)と[rehype](https://github.com/rehypejs/rehype)を使って、MarkdownファイルをJSON ASTにコンパイルし、変数`body`に格納します。
+
+::alert{type="info"}
+
+以下の説明は`remarkPlugins`と`rehypePlugins`の両方に当てはまります。
+
+::
+
+どのようにMarkdownをパースするか設定するには、次のようにします。
+
+- 新しいプラグインをデフォルトにする
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: ['remark-emoji']
+ }
+ }
+}
+```
+
+- デフォルトプラグインのオーバーライド
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: () => ['remark-emoji']
+ }
+ }
+}
+```
+
+- ローカルプラグインの利用
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: [
+ '~/plugins/my-custom-remark-plugin.js'
+ ]
+ }
+ }
+}
+```
+
+- 定義の中で直接オプションを指定する
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: [
+ ['remark-emoji', { emoticon: true }]
+ ]
+ }
+ }
+}
+```
+
+- `キャメルケース`でプラグインの名前を使ってオプションを指定する
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ // https://github.com/remarkjs/remark-external-links#options
+ remarkExternalLinks: {
+ target: '_self',
+ rel: 'nofollow'
+ }
+ }
+ }
+}
+```
+
+::alert
+
+新しいプラグインを追加するときは、必ずdependenciesにインストールしてください
+
+::
+
+::code-group
+ ```bash [Yarn]
+ yarn add remark-emoji
+ ```
+
+ ```bash [NPM]
+ npm install remark-emoji
+ ```
+::
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: ['remark-emoji']
+ }
+ }
+}
+```
+
+### `markdown.remarkPlugins`
+
+- Type: `Array`
+- Default: `['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes']`
+- Version: **>= v1.4.0**
+
+> [remark plugins](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins)を参照してください。
+
+### `markdown.rehypePlugins`
+
+- Type: `Array`
+- Default: `['rehype-minify-whitespace', 'rehype-sort-attribute-values', 'rehype-sort-attributes', 'rehype-raw']`
+- Version: **>= v1.4.0**
+
+> [rehype plugins](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins)を参照してください。
+
+### `markdown.basePlugins`
+
+::alert
+
+非推奨です。代わりに `markdown.remarkPlugins`を関数として使用してください。
+
+::
+
+### `markdown.plugins`
+
+::alert
+
+非推奨です。代わりに `markdown. remarkPlugins`を配列として使用してください。
+
+::
+
+### `markdown.prism.theme`
+
+- Type: `String`
+- Default: `'prismjs/themes/prism.css'`
+
+[PrismJS](https://prismjs.com)を使用してMarkdownコンテンツのコードのシンタックスハイライトを処理します。
+
+これは、Nuxt.jsの設定で希望するPrismJSテーマを自動的にプッシュします。デフォルトのテーマとは異なるテーマを使用したい場合は、[prism-themes](https://github.com/PrismJS/prism-themes)から選んで変更します。
+
+::code-group
+ ```bash [Yarn]
+ yarn add prism-themes
+ ```
+
+ ```bash [NPM]
+ npm install 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`
+
+- Type: `Object`
+- Default: `{}`
+
+このモジュールは、`js-yaml`を使用して`.yaml`と`.yml`ファイルを解析します。ここで[options](https://github.com/nodeca/js-yaml#api)を確認できます。
+
+`json：true`オプションを強制することに注意してください。
+
+### `xml`
+
+- Type: `Object`
+- Default: `{}`
+
+このモジュールは `xml2js` を用いて `.xml` ファイルを解析します。[options](https://www.npmjs.com/package/xml2js#options)はこちらで確認できます。
+
+### `csv`
+
+- Type: `Object`
+- Default: `{}`
+
+このモジュールは、`node-csvtojson`を使用してcsvファイルを解析します。ここで[options](https://github.com/Keyang/node-csvtojson#parameters)を確認できます。
+
+
+## デフォルトの設定
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ apiPrefix: '_content',
+ dir: 'content',
+ fullTextSearchFields: ['title', 'description', 'slug', 'text'],
+ nestedProperties: [],
+ markdown: {
+ remarkPlugins: [
+ 'remark-squeeze-paragraphs',
+ 'remark-slug',
+ 'remark-autolink-headings',
+ 'remark-external-links',
+ 'remark-footnotes'
+ ],
+ rehypePlugins: [
+ 'rehype-minify-whitespace',
+ 'rehype-sort-attribute-values',
+ 'rehype-sort-attributes',
+ 'rehype-raw'
+ ],
+ prism: {
+ theme: 'prismjs/themes/prism.css'
+ }
+ },
+ yaml: {},
+ csv: {},
+ xml: {}
+ }
+}
+```
diff --git a/docs/content-v1/ja/1.getting-started/7.advanced.md b/docs/content-v1/ja/1.getting-started/7.advanced.md
new file mode 100644
index 000000000..ef041acf8
--- /dev/null
+++ b/docs/content-v1/ja/1.getting-started/7.advanced.md
@@ -0,0 +1,175 @@
+---
+title: 発展的な機能
+description: '@nuxt/contentの発展的な利用方法を学ぶ'
+---
+
+## プログラマティックな利用方法
+
+`$content`は **@nuxt/content**からアクセスできます
+
+::alert
+
+**モジュールがNuxtによってロードされた後**でなければアクセスできないことに注意してください。`require('@nuxt/content')` は、フックや内部のNuxtメソッドで発生するはずです。
+
+::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)
+ }
+ }
+}
+```
+
+### 静的サイト生成
+
+::alert{type="info"}
+
+Nuxt 2.13+ 以降、`nuxt export` にはクローラー機能が統合されており、すべてのリンクをクロールし、それらのリンクに基づいてルートを生成します。したがって、動的なルートをクロールさせるためには何もする必要はありません。
+
+::
+
+`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`
+
+保存する前にドキュメントへデータを追加できます。
+
+Arguments:
+- `document`
+ - Type: `Object`
+ - Properties:
+ - [コンテンツを作成する](/ja/writing)を参照してください。
+
+
+**例**
+
+ブログのスターターを例にとると、[reading-Time](https://github.com/ngryman/reading-time)を利用した`readingTime` をドキュメントへ追加するために、`file:beforeInsert`を使うことができます。
+
+> `text`は、JSON ASTに変換される前のMarkdownファイルのbodyの内容で、この時点では使用できますが、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
+ }
+ }
+ }
+}
+```
+
+## ホットリロードの取り扱い
+
+::alert{type="info"}
+
+開発モードの場合、モジュールは自動的に `nuxtServerInit`ストアアクション（定義されている場合）と `$nuxt.refresh()` を呼び出して現在のページを更新します。
+
+::
+
+イベントを待ち受けてさらに何かをしたい場合は、`$nuxt.$on('content:update')`を使ってクライアント側で `content:update` イベントを待ち受けることができます。
+
+```js{}[plugins/update.client.js
+export default function ({ store }) {
+ // 開発時のみ
+ if (process.dev) {
+ window.onNuxtReady(($nuxt) => {
+ $nuxt.$on('content:update', ({ event, path }) => {
+ // storeのカテゴリを更新
+ store.dispatch('fetchCategories')
+ })
+ })
+ }
+}
+```
+
+`nuxt.config.js`にプラグインを追加します。
+
+```js [nuxt.config.js]
+export default {
+ plugins: [
+ '@/plugins/update.client.js'
+ ]
+}
+```
+
+これで、`content/`ディレクトリ内のファイルを更新するたびに、`fetchCategories`メソッドもディスパッチされます。
+このドキュメントサイトでは実際にそれを使用しています。[plugins/init.js](https://github.com/nuxt/content/blob/master/docs/plugins/init.js)を見れば、より多くのことを学ぶことができます。
+
+## APIエンドポイント
+
+このモジュールは開発中のAPIエンドポイントを公開し、各ディレクトリやファイルのJSONを簡単に見ることができるようにします。[http://localhost:3000/_content/](http://localhost:3000/_content/)で利用可能です。プレフィックスはデフォルトでは `_content`で、[apiPrefix](ja/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).
+
+**v1.4.0**以降、このエンドポイントはクエリパラメーターの `where`もサポートしています。
+
+- デフォルトのキーに属さないすべてのキーが `where`に適用されます。
+
+`http://localhost:3000/_content/articles?author=...`
+
+- `$operators`は`_`と一緒に使うことができます。
+
+`http://localhost:3000/_content/articles?author_regex=...`
+
+> このモジュールは 、内部的にLokiJSを使用しています。、あなたは[クエリの例]（https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries）をチェックすることができます。
+
+- [nested properties](/ja/configuration#nestedproperties)も利用できます
+
+`http://localhost:3000/_content/products?categories.slug_contains=top`
+
+> このエンドポイントについての詳細は [lib/middleware.js](https://github.com/nuxt/content/blob/master/lib/middleware.js)を参照してください。
diff --git a/docs/content-v1/ja/1.getting-started/_dir.yml b/docs/content-v1/ja/1.getting-started/_dir.yml
new file mode 100644
index 000000000..93d6dcab8
--- /dev/null
+++ b/docs/content-v1/ja/1.getting-started/_dir.yml
@@ -0,0 +1 @@
+title: 入門
diff --git a/docs/content-v1/ja/2.examples/1.basic.md b/docs/content-v1/ja/2.examples/1.basic.md
new file mode 100644
index 000000000..24bc71f39
--- /dev/null
+++ b/docs/content-v1/ja/2.examples/1.basic.md
@@ -0,0 +1,8 @@
+---
+title: プレイグラウンド
+description: 'CodeSandboxを使ったプレイグラウンドをチェックしましょう。'
+toc: false
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/ja/2.examples/2.docs-theme.md b/docs/content-v1/ja/2.examples/2.docs-theme.md
new file mode 100644
index 000000000..ab3c3626a
--- /dev/null
+++ b/docs/content-v1/ja/2.examples/2.docs-theme.md
@@ -0,0 +1,369 @@
+---
+title: Docs
+description: 'テーマを使って、Nuxtと@nuxt/contentで開発を加速させましょう。'
+version: 1.6
+---
+
+
+
+最初の`@nuxt/content`テーマを試してみてください。このサイトのような美しいドキュメントを数秒で作成できます。
+
+
+
+`docs/`ディレクトリにオープンソースプロジェクトのドキュメントを作成しているとしましょう。
+
+## セットアップ
+
+テーマの利用方法は、今までのNuxtJSアプリと同様です。セットアップに必要なものは以下です：
+
+### `package.json`
+
+> このファイルは`npm init`でも生成されます
+
+`nuxt`と`@nuxt/content-theme-docs`をインストールします:
+
+::code-group
+ ```bash
+ yarn add nuxt @nuxt/content-theme-docs
+ ```
+
+ ```bash
+ npm install nuxt @nuxt/content-theme-docs
+ ```
+::
+
+**例**
+
+```json[package.json]
+{
+ "name": "docs",
+ "version": "1.0.0",
+ "scripts": {
+ "dev": "nuxt",
+ "build": "nuxt build",
+ "start": "nuxt start",
+ "generate": "nuxt generate"
+ },
+ "dependencies": {
+ "@nuxt/content-theme-docs": "^0.11.0",
+ "nuxt": "^2.15.8"
+ }
+}
+```
+
+### `nuxt.config.js`
+
+theme関数を`@nuxt/content-theme-docs`からimportします：
+
+```js[nuxt.config.js]
+import theme from '@nuxt/content-theme-docs'
+
+export default theme()
+```
+
+このテーマは、`nuxt.config.js`でデフォルトの設定を追加/上書きするための関数を用意しています。
+
+> 設定がどのようにマージされるかを知るには、[defu.fn](https://github.com/nuxt-contrib/defu#function-merger)のドキュメントを見てください
+
+**例**
+
+```js[nuxt.config.js]
+import theme from '@nuxt/content-theme-docs'
+
+export default theme({
+
+ loading: { color: '#48bb78' },
+ generate: {
+ fallback: '404.html', // for Netlify
+ routes: ['/'] // give the first url to start crawling
+ },
+ i18n: {
+ locales: () => [{
+ code: 'fr',
+ iso: 'fr-FR',
+ file: 'fr-FR.js',
+ name: 'Français'
+ }, {
+ code: 'en',
+ iso: 'en-US',
+ file: 'en-US.js',
+ name: 'English'
+ }],
+ defaultLocale: 'en'
+ },
+ buildModules: [
+ ['@nuxtjs/google-analytics', {
+ id: 'UA-12301-2'
+ }]
+ ]
+})
+```
+
+
+
+`nuxt.config.js`で追加したモジュールの依存関係をインストールすることを忘れないでください。
+
+
+
+### `content/`
+
+このテーマは国際化に[nuxt-i18n](https://github.com/nuxt-community/i18n-module)を使用します。そのデフォルトは`en`ロケールであるため、`content/en/`サブディレクトリを作成する必要があります。その後、Markdownファイルの書き込みを開始できます
+
+### `static/`
+
+ここに、ロゴなどの静的アセットを配置します
+
+
+
+`static/icon.png`ファイルを追加することで、[nuxt-pwa](https://pwa.nuxtjs.org/)を有効化し、faviconを自動生成できます。
+
+*アイコンは512x512以上の大きさの正方形である必要があります*
+
+
+
+
+
+`static/preview.png`ファイルを追加することで、ソーシャルプレビュー画像をメタに含められます
+
+*画像サイズは640×320px以上にしてください（1280×640pxが最適です）*
+
+
+
+**例**
+
+```bash
+content/
+ en/
+ index.md
+static/
+ favicon.ico
+nuxt.config.js
+package.json
+```
+
+## Content
+
+`content/`ディレクトリのMarkdownファイルはページになり、左側のナビゲーションにリストされます。
+
+適切に機能させるには、Markdownのフロントマターに以下のプロパティを必ず含めてください：
+
+- `title`
+ - Type: `String`
+ - `required`
+ - *ページのタイトルはメタに挿入されます*
+- `description`
+ - Type: `String`
+ - `required`
+ - *ページの説明はメタに挿入されます*
+- `position`
+ - Type: `Number`
+ - `required`
+ - *ナビゲーションでドキュメントをソートするために使用されます*
+- `category`
+ - Type: `String`
+ - `required`
+ - *ナビゲーションでドキュメントをグループ化するために使用されます*
+- `version`
+ - Type: `Float`
+ - *ドキュメントが更新されることをバッジでユーザーへ警告するために使用できます。一度ページが表示されると、バージョンが上がるまではローカルストレージに保存されます。*
+- `fullscreen`
+ - Type: `Boolean`
+ - *`toc`がないときにページを拡大するために使用できます*
+
+**例**
+
+```md
+---
+title: Introduction
+description: 'Empower your NuxtJS application with @nuxt/content module.'
+position: 1
+category: Getting started
+version: 1.4
+fullscreen: false
+---
+```
+
+## 設定
+
+テーマの設定をするために、`content/settings.json`を作成できます。
+
+- `title`
+ - Type: `String`
+ - *ドキュメントのタイトル*
+- `url`
+ - Type: `String`
+ - *ドキュメントがデプロイされるURL*
+- `logo`
+ - Type: `String` | `Object`
+ - *プロジェクトのロゴ。[color mode](https://github.com/nuxt-community/color-mode-module)ごとにロゴを設定する`Object`にもできます*
+- `github`
+ - Type: `String`
+ - *最新バージョン、リリースページ、ページ上部のGitHubへのリンク、 `このページをGitHubで編集する`リンク などを各ページへ表示させるには、GitHubレポジトリを`${org}/${name}`の形式で追加します*
+- `twitter`
+ - Type: `String`
+ - *リンクさせたいTwitterユーザー名*
+
+**例**
+
+```json
+{
+ "title": "Nuxt Content",
+ "url": "https://content.nuxtjs.org",
+ "logo": {
+ "light": "/logo-light.svg",
+ "dark": "/logo-dark.svg"
+ },
+ "github": "nuxt/content",
+ "twitter": "@nuxt_js"
+}
+```
+
+## コンポーネント
+
+このテーマには、Markdownコンテンツで直接使用できるいくつかのVue.jsコンポーネントが付属しています：
+
+### ``
+
+**Props**
+
+- `type`
+ - Type: `String`
+ - Default: `'warning'`
+ - Values: `['warning', 'info']`
+
+**例**
+
+```md
+
+
+Check out a warning alert with a `codeblock`!
+
+
+```
+
+**結果**
+
+
+
+Check out a warning alert with a `codeblock`!
+
+
+
+**例**
+
+```md
+
+
+Check out an info alert with a [link](/themes/docs).
+
+
+```
+
+**結果**
+
+
+
+Check out an info alert with a [link](/themes/docs).
+
+
+
+### ``
+
+**Props**
+
+- `items`
+ - Type: `Array`
+ - Default: `[]`
+
+**例**
+
+```md
+---
+items:
+ - Item1
+ - Item2
+ - Item3
+---
+
+
+```
+
+**結果**
+
+
+
+### ``
+
+このコンポーネントは`slots`を利用しています。以下の`code-block`を参照してください。
+
+### ``
+
+**Props**
+
+- `label`
+ - Type: `String`
+ - `required`
+- `active`
+ - Type: `Boolean`
+ - Default: `false`
+
+**例**
+
+```html
+# Backslashes are for demonstration
+
+::code-group
+ ```bash
+ yarn add @nuxt/content-theme-docs
+ \```
+
+ ```bash
+ npm install @nuxt/content-theme-docs
+ \```
+::
+```
+
+**結果**
+
+::code-group
+ ```bash
+ yarn add @nuxt/content-theme-docs
+ ```
+
+ ```bash
+ npm install @nuxt/content-theme-docs
+ ```
+::
+
+### ``
+
+**Props**
+
+- `src`
+ - Type: `String`
+ - `required`
+
+**例**
+
+```md
+---
+link: https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark
+---
+
+
+
+
+
+
+
+ {{ article.title }}
+
+
+
+
+
+```
+
+> [search documentation](/ja/fetching#searchfield-value)を参照してください
+
+### ページネーション
+
+前後のページへのリンクは`surround`メソッドを使って追加します。
+
+```vue
+
+
+
+ {{ prev.title }}
+
+
+
+ {{ next.title }}
+
+
+
+
+
+```
+
+> [surround documentation](/ja/fetching#surroundslug-options)を参照してください
+
+### 目次
+
+tocの配列をループさせて目次を追加し、`id` を使って目次にリンクさせ、`text` を使ってタイトルを表示します。タイトルのスタイルを変えるために `depth` を使うことができます。
+
+```vue
+
+
+
+
+
+```
+
+> [Table of Contents documentation](/ja/writing#table-of-contents)を参照してください
diff --git a/docs/content-v1/ja/3.community/2.integrations.md b/docs/content-v1/ja/3.community/2.integrations.md
new file mode 100644
index 000000000..4dd32b19a
--- /dev/null
+++ b/docs/content-v1/ja/3.community/2.integrations.md
@@ -0,0 +1,66 @@
+---
+title: 他のモジュールとの統合
+description: '他のモジュールと@nuxt/contentの使い方をご紹介します。'
+---
+
+## @nuxtjs/feed
+
+contentはニュースフィードを生成することもできます。
+[@nuxtjs/feed](https://github.com/nuxt-community/feed-module)モジュールを使用してみましょう。
+
+::alert{type="info"}
+
+`feed`オプションの中で`$content`を使うには、`modules`で`@nuxtjs/feed`の前に`@nuxt/content`を追加する必要があります。
+
+::
+
+**用例**
+
+```js
+export default {
+ modules: [
+ '@nuxt/content',
+ '@nuxtjs/feed'
+ ],
+
+ feed () {
+ const baseUrlArticles = 'https://mywebsite.com/articles'
+ const baseLinkFeedArticles = '/feed/articles'
+ const feedFormats = {
+ rss: { type: 'rss2', file: 'rss.xml' },
+ atom: { type: 'atom1', file: 'atom.xml' },
+ json: { type: 'json1', file: 'feed.json' },
+ }
+ const { $content } = require('@nuxt/content')
+
+ const createFeedArticles = async function (feed) {
+ feed.options = {
+ title: 'My Blog',
+ description: 'I write about technology',
+ link: baseUrlArticles,
+ }
+ const articles = await $content('articles').fetch()
+
+ articles.forEach((article) => {
+ const url = `${baseUrlArticles}/${article.slug}`
+
+ feed.addItem({
+ title: article.title,
+ id: url,
+ link: url,
+ date: article.published,
+ description: article.summary,
+ content: article.summary,
+ author: article.authors,
+ })
+ })
+ }
+
+ return Object.values(feedFormats).map(({ file, type }) => ({
+ path: `${baseLinkFeedArticles}/${file}`,
+ type: type,
+ create: createFeedArticles,
+ }))
+ }
+}
+```
diff --git a/docs/content-v1/ja/3.community/_dir.yml b/docs/content-v1/ja/3.community/_dir.yml
new file mode 100644
index 000000000..b2df3633c
--- /dev/null
+++ b/docs/content-v1/ja/3.community/_dir.yml
@@ -0,0 +1 @@
+title: コミュニティ
diff --git a/docs/content-v1/ja/_dir.yml b/docs/content-v1/ja/_dir.yml
new file mode 100644
index 000000000..5bb138561
--- /dev/null
+++ b/docs/content-v1/ja/_dir.yml
@@ -0,0 +1,3 @@
+aside:
+ root: /ja/v1
+ level: 0
diff --git a/docs/content-v1/ru/1.getting-started/1.introduction.md b/docs/content-v1/ru/1.getting-started/1.introduction.md
new file mode 100644
index 000000000..dbbb035e4
--- /dev/null
+++ b/docs/content-v1/ru/1.getting-started/1.introduction.md
@@ -0,0 +1,57 @@
+---
+title: Вступление
+description: 'Прокачайте ваше NuxtJS приложение с модулем @nuxt/content: пишите в директории content/ и получайте ваши Markdown, JSON, YAML и CSV файлы через MongoDB подобное API, работает как базирующаяся на Git безголовая CMS.'
+---
+
+Прокачайте ваше NuxtJS приложение с модулем `@nuxt/content`: пишите в директории `content/` и получайте ваши Markdown, JSON, YAML и CSV файлы через MongoDB подобное API, работает как **базирующаяся на Git безголовая CMS**.
+
+## Особенности
+
+::list
+- Потрясающе быстрая горячая перезагрузка в режиме разработки
+- Vue компоненты внутри Markdown
+- Полнотекстовый поиск
+- Поддержка статической генерации через `nuxt generate`
+- Мощный API конструктора запросов (MongoDB подобный)
+- Подсветка синтаксиса для блоков кода в файлах markdown с помощью PrismJS.
+- Генерация оглавления
+- Работает с Markdown, CSV, YAML, JSON(5), XML
+- Расширяется с помощью собственных парсеров
+- Расширяется с помощью хуков
+::
+
+## Видео
+
+Демонстрация использования `$content` и `` для отображения Markdown страниц:
+
+
+
+
+Использование `$content()` для получения списка, фильтрации и поиска контента:
+
+
+
+
+## Отзывы
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/content-v1/ru/1.getting-started/2.installation.md b/docs/content-v1/ru/1.getting-started/2.installation.md
new file mode 100644
index 000000000..51b9f00aa
--- /dev/null
+++ b/docs/content-v1/ru/1.getting-started/2.installation.md
@@ -0,0 +1,50 @@
+---
+title: Установка
+description: 'Установка @nuxt/content в ваш проект Nuxt всего за пару шагов.'
+---
+
+Добавьте `@nuxt/content` как зависимость в ваш проект:
+
+::code-group
+ ```bash [Yarn]
+ yarn add @nuxt/content
+ ```
+
+ ```bash [NPM]
+ 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-v1/ru/1.getting-started/3.writing.md b/docs/content-v1/ru/1.getting-started/3.writing.md
new file mode 100644
index 000000000..beec503fd
--- /dev/null
+++ b/docs/content-v1/ru/1.getting-started/3.writing.md
@@ -0,0 +1,600 @@
+---
+title: Написание контента
+description: 'Научитесь писать в директории content/, поддерживаются Markdown, YAML, CSV и JSON.'
+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
+
+### Содержание
+
+Вы можете добавить содержание в ваш markdown файл. Содержание должно быть первым в файле и иметь форму действительного YAML, установленного между тройными пунктирными линиями. Вот основной пример:
+
+```md
+---
+title: Вступление
+description: Изучите как использовать @nuxt/content.
+---
+```
+
+Эти переменные будут вставлены в документ:
+
+```json
+{
+ body: Object
+ title: "Вступление"
+ description: "Изучите как использовать @nuxt/content."
+ dir: "/"
+ extension: ".md"
+ path: "/index"
+ slug: "index"
+ toc: Array
+ createdAt: DateTime
+ updatedAt: DateTime
+}
+```
+
+### отрывок
+
+Отрывок или резюме содержания можно извлечь из содержания, используя `` в качестве разделителя.
+
+```md
+---
+title: Вступление
+---
+
+Изучите как использовать @nuxt/content.
+
+Полный объем содержимого за пределами разделителя more.
+```
+
+Свойство Description будет содержать содержимое отрывка, если оно не определено в свойствах Front Matter.
+
+::alert{type="info"}
+Будьте внимательны при вводе <!--more--> точно; т.е. все строчные и без пробелов.
+::
+
+Пример переменных будет вставлен в документ:
+```json
+{
+ body: Object
+ title: "Вступление"
+ description: "Изучите как использовать @nuxt/content."
+ dir: "/"
+ extension: ".md"
+ path: "/index"
+ slug: "index"
+ toc: Array
+ createdAt: DateTime
+ updatedAt: DateTime
+}
+```
+
+### Заголовки
+
+Этот модуль автоматически добавит `id` и `link` к каждому заголовку.
+
+Представим, что у нас есть такой файл:
+
+```md[home.md]
+# Lorem ipsum
+## dolor—sit—amet
+### consectetur & adipisicing
+#### elit
+##### elit
+```
+
+Это будет преобразовано в древовидную JSON AST структуру и использовано компонентом `nuxt-content` и в итоге получится вот такой HTML:
+
+```html
+Nuxt ссылка на блог
+
+Html ссылка на блог
+
+[Markdown ссылка на блог](/articles)
+
+Внешняя html ссылка
+
+[Внешняя markdown ссылка](https://nuxtjs.org)
+```
+
+### Сноски
+
+Этот модуль поддерживает расширенный markdown синтаксис для сносок используя [remark-footnotes](https://github.com/remarkjs/remark-footnotes). Взгляните [сюда](/configuration#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
+
+
+ ...
+
+
+
Смесь Markdown и HTML .
+```
+
+Помните, что при размещении Markdown внутри компонента перед ним должна стоять пустая строка, иначе весь блок обрабатывается как пользовательский HTML.
+
+**Это не будет работать:**
+
+```html
+
+ *Markdown* и HTML .
+
+```
+
+**Но это будет:**
+
+```html
+
+
+ *Markdown* и HTML .
+
+
+```
+
+Также как **это**:
+
+```html
+*Markdown* и HTML .
+```
+
+### Vue компоненты
+
+Вы можете использовать глобальные Vue компоненты или импортированные локально, на страницу, где отображается ваш markdown.
+
+
+
+Существует проблема с локально зарегистрированными компонентами и режимом редактирования в реальном времени, поэтому начиная с **v1.5.0** вы можете отключить его установив `liveEdit: false` (смотрите [конфигурацию](/configuration#liveedit)).
+
+
+
+Поскольку `@nuxt/content` предполагает, что весь Markdown предоставлен автором (а не с помощью сторонних пользователей), исходные тексты обрабатываются полностью (включая теги), с помощью [rehype-raw](https://github.com/rehypejs/rehype-raw):
+
+1. Вы должны использовать ваши компоненты в kebab case:
+
+```html
+Используйте вместо
+```
+
+2. Вы не можете использовать самозакрывающиеся теги, потому что **это не будет работать**:
+
+```html
+
+Выберите фреймворк :
+
+
+
+Также вы можете задать параметры:
+
+```md[home.md]
+---
+multiselectOptions:
+ - VuePress
+ - Gridsome
+ - Nuxt
+---
+
+
+
+
+
+
+
+Эти компоненты будут отрисованы используя компонент ``, взгляните на [отображение контента](/displaying#component).
+
+
+
+#### Шаблоны
+
+Вы можете использовать теги `template` для отрисовки контента внутри вашего Vue.js компонента:
+
+```html
+
+
+ Контент именованного слота.
+
+
+```
+
+Однако, вы не можете использовать
+[динамический контент](https://vuejs.org/v2/guide/syntax.html), не используйте
+[входные параметры слота](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots). например,
+**это не будет работать**:
+
+```html
+
+
+ {{ slotProps.someProperty }}
+
+
+```
+
+#### Глобальные компоненты
+
+Начиная с **v2.0.0** и Nuxt **v2.13.0**, вы можете положить ваши компоненты в директорию `components/global/` и вам не прийдется импортировать их на свои страницы.
+
+```bash
+components/
+ global/
+ Hello.vue
+content/
+ home.md
+```
+
+Затем в `content/home.md`, вы можете добавить компонент `
+
+Взгляните на [этот пример](/snippets#table-of-contents) о том, как внедрить оглавление в ваше приложение
+
+
+
+### Пример
+
+Файл `content/home.md`:
+
+```md
+---
+title: Главная
+---
+
+## Добро пожаловать!
+```
+
+Будет преобразовано в:
+
+```json
+{
+ "dir": "/",
+ "slug": "главная",
+ "path": "/главная",
+ "extension": ".md",
+ "title": "Главная",
+ "toc": [
+ {
+ "id": "добро-пожаловать",
+ "depth": 2,
+ "text": "Добро пожаловать!"
+ }
+ ],
+ "body": {
+ "type": "root",
+ "children": [
+ {
+ "type": "element",
+ "tag": "h2",
+ "props": {
+ "id": "добро-пожаловать"
+ },
+ "children": [
+ {
+ "type": "element",
+ "tag": "a",
+ "props": {
+ "ariaHidden": "true",
+ "href": "#добро-пожаловать",
+ "tabIndex": -1
+ },
+ "children": [
+ {
+ "type": "element",
+ "tag": "span",
+ "props": {
+ "className": [
+ "icon",
+ "icon-link"
+ ]
+ },
+ "children": []
+ }
+ ]
+ },
+ {
+ "type": "text",
+ "value": "Добро пожаловать!"
+ }
+ ]
+ }
+ ]
+ }
+}
+```
+
+Мы добавляем ключ `text` с телом markdown, чтобы использовать это для [поиска](/fetching#searchfield-value) или для [расширения](http://localhost:3000/advanced#contentfilebeforeinsert).
+
+## CSV
+
+Строки будут присвоены к переменной body.
+
+### Пример
+
+Файл `content/home.csv`:
+
+```csv
+title, description
+Главная, Добро пожаловать!
+```
+
+Будет преобразовано в:
+
+```json
+{
+ "dir": "/",
+ "slug": "главная",
+ "path": "/главная",
+ "extension": ".json",
+ "body": [
+ {
+ "title": "Главная",
+ "description": "Добро пожаловать!"
+ }
+ ]
+}
+```
+
+## XML
+
+Будет преобразовано в:
+
+### Пример
+
+Файл `content/home.xml`:
+
+```xml
+
+ -
+
Заголовок
+ Привет мир
+
+
+```
+
+Will be transformed into:
+
+```json
+{
+ "dir": "/",
+ "slug": "home",
+ "path": "/home",
+ "extension": ".xml",
+ "body": {
+ "xml": {
+ "item": [
+ {
+ "$": {
+ "prop": "abc"
+ },
+ "title": [
+ "Заголовок"
+ ],
+ "description": [
+ "ривет мир"
+ ]
+ }
+ ]
+ }
+}
+```
+
+
+## YAML / YML
+
+Указанные данные будут выведены в документ.
+
+> Переменная body не будет сгенерирована.
+
+### Пример
+
+Файл `content/home.yaml`:
+
+```yaml
+title: Главная
+description: Добро пожаловать!
+```
+
+Будет преобразовано в:
+
+```json
+{
+ "dir": "/",
+ "slug": "главная",
+ "path": "/главная",
+ "extension": ".yaml",
+ "title": "Главная",
+ "description": "Добро пожаловать!"
+}
+```
+
+## JSON / JSON5
+
+Указанные данные будут выведены в документ.
+
+> Переменная body не будет сгенерирована.
+
+### Пример
+
+Файл `content/home.json`:
+
+```json
+{
+ "title": "Главная",
+ "description": "Добро пожаловать!"
+}
+
+```
+
+Будет преобразовано в:
+
+```json
+{
+ "dir": "/",
+ "slug": "главная",
+ "path": "/главная",
+ "extension": ".json",
+ "title": "Главная",
+ "description": "Добро пожаловать!"
+}
+```
diff --git a/docs/content-v1/ru/1.getting-started/4.fetching.md b/docs/content-v1/ru/1.getting-started/4.fetching.md
new file mode 100644
index 000000000..fd02b0035
--- /dev/null
+++ b/docs/content-v1/ru/1.getting-started/4.fetching.md
@@ -0,0 +1,228 @@
+---
+title: Получение контента
+description: 'Изучите как получать ваш статичный контент вместе с $content в вашем Nuxt.js проекте.'
+position: 4
+category: Начало
+---
+
+Этот модуль глобально внедряет экземпляр `$content`, это значит, что вы можете получить доступ к `this.$content` из любого места. В плагинах, asyncData, fetch, nuxtServerInit и Middleware, вы можете получить к нему доступ из `context.$content`.
+
+## Методы
+
+### $content(путь, параметры?)
+
+- `путь`
+ - Тип: `String`
+ - По умолчанию: `/`
+- `параметры`
+ - Тип: `Object`
+ - По умолчанию: `{}`
+ - Версия: **v1.3.0**
+- `параметры.deep`
+ - Тип: `Boolean`
+ - По умолчанию: `false`
+ - Версия: **v1.3.0**
+ - *Получение файлов из поддиректорий*
+- `параметры.text`
+ - Тип: `Boolean`
+ - По умолчанию: `false`
+ - Версия: **v2.0.0**
+ - *Возвращает оригинальное содержание markdown в переменной `text`*
+- Возвращает последовательность цепочек
+
+> Вы можете передать несколько аргументов: `$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()
+```
+
+### without(ключи)
+
+- `keys`
+ - Тип: `Array` | `String`
+ - `обязательное`
+
+Исключите подмножество полей.
+
+```js
+const { title, ...propsWithoutBody } = await this.$content('article-1').without(['body']).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()
+```
+
+Для фильтрации в объектах и массивах вам нужно включить nestedProperties, взгляните на [конфигурацию](/configuration#nestedproperties).
+
+```js
+const products = await this.$content('products').where({ 'categories.slug': { $contains: 'top' } }).fetch()
+
+const products = await this.$content('products').where({ 'categories.slug': { $contains: ['top', 'woman'] } }).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()
+```
+
+
+
+Посмотрите [пример](/snippets#search) о том, как реализовать поиск в вашем приложении
+
+
+
+
+### 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` неэффективны при использовании этого метода.
+
+::alert{type="info"}
+
+Посмотрите [пример](/snippets#pagination) как реализовать ссылки вперед и назад в вашем приложении
+
+::
+
+### 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 контента](/advanced#api-endpoint) в разработке.
diff --git a/docs/content-v1/ru/1.getting-started/5.displaying.md b/docs/content-v1/ru/1.getting-started/5.displaying.md
new file mode 100644
index 000000000..115475a3e
--- /dev/null
+++ b/docs/content-v1/ru/1.getting-started/5.displaying.md
@@ -0,0 +1,69 @@
+---
+title: Отображение контента
+description: 'Вы можете использовать компонент `` непосредственно в шаблоне для отображения вашего Markdown.'
+position: 5
+category: Начало
+---
+
+::alert{type="info"}
+Этот раздел только для Markdown файлов.
+::
+
+## Component
+
+Вы можете использовать компонент `` непосредственно в шаблоне для отображения тела страницы:
+
+```vue
+
+
+ {{ page.title }}
+
+
+
+
+```
+
+
+**Входные параметры:**
+- document:
+ - Тип: `Object`
+ - `обязательное`
+
+Изучите больше о том, что вы можете писать в вашем markdown файле в разделе [написание контента](/writing#markdown).
+
+## Стили
+
+В зависимости от того, что вы используете для разработки своего приложения, вам может потребоваться написать стили для правильного отображения markdown.
+
+Компонент `` автоматически добавит класс `.nuxt-content` и вы сможете использовать его для стилизации:
+
+```css
+.nuxt-content h1 {
+ /* мои пользовательские стили для h1 */
+}
+```
+
+Вы можете найти примеры в [директории документации](https://github.com/nuxt/content/blob/master/docs/pages/_slug.vue).
+
+## Редактирование контента в реальном времени
+
+> Доступно с версии **>= v1.4.0**
+
+**В режиме разработки** вы можете редактировать контент **дважды кликнув** на компонент ``. В области текста вы сможете редактировать контент текущего файла и изменения будут сохранены на диске.
+
+
+
diff --git a/docs/content-v1/ru/1.getting-started/6.configuration.md b/docs/content-v1/ru/1.getting-started/6.configuration.md
new file mode 100644
index 000000000..32c99e84a
--- /dev/null
+++ b/docs/content-v1/ru/1.getting-started/6.configuration.md
@@ -0,0 +1,356 @@
+---
+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).
+
+### Слияние со значениями по умолчанию
+
+Вы можете задать каждый параметр как функцию или статическое значение (примитивы, объекты, массивы и т.д.)
+Если вы используете функцию, то стандартное значение будет передано как первый аргумент.
+
+Если вы *не* используете функцию для определения ваших параметров, модуль попытается объединить их со стандартными значениями. Это может быть удобно для `markdown.remarkPlugins`, `markdown.rehypePlugins` и так далее, потому что
+значения по умолчанию довольно правильные. Если вы не хотите включать значения по умолчанию, просто используйте функцию.
+
+## Параметры
+
+### `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']
+}
+```
+### `nestedProperties`
+
+- Тип `Array`
+- По умолчанию: `[]`
+- Версия: **v2.0.0**
+
+Зарегистрируйте вложенные свойства для обработки обращения через точку и глубокой фильтрации.
+
+```js [nuxt.config.js]
+content: {
+ nestedProperties: ['categories.slug']
+}
+```
+### `liveEdit`
+
+- Тип `Boolean`
+- По умолчанию: `true`
+- Версия: **>= v1.5.0**
+
+Отключает редактирование в реальном времени в режиме разработки:
+
+```js [nuxt.config.js]
+content: {
+ liveEdit: false
+}
+```
+
+### `markdown`
+
+Этот модуль использует [remark](https://github.com/remarkjs/remark) «под капотом» для компиляции markdown файлов в JSON AST, который будет храниться в переменной `body`.
+
+
+
+Следующий пример работает и для `remarkPlugins`, и для `rehypePlugins`
+
+::
+
+Чтобы настроить, как модуль будет анализировать Markdown, вы можете:
+
+- Добавить новый плагин к плагинам по умолчанию:
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: ['remark-emoji']
+ }
+ }
+}
+```
+
+- Перезаписать плагины по умолчанию:
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: () => ['remark-emoji']
+ }
+ }
+}
+```
+
+- Использовать локальные плагины
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: [
+ '~/plugins/my-custom-remark-plugin.js'
+ ]
+ }
+ }
+}
+```
+
+- Задать параметры в определении плагина
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: [
+ ['remark-emoji', { emoticon: true }]
+ ]
+ }
+ }
+}
+```
+
+- Задать параметры используя имя плагина в `camelCase`
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ // https://github.com/remarkjs/remark-external-links#options
+ remarkExternalLinks: {
+ target: '_self',
+ rel: 'nofollow'
+ }
+ }
+ }
+}
+```
+
+::alert{type="warning"}
+
+При добавлении нового плагина обязательно установите его в ваших зависимостях:
+
+::
+
+::code-group
+ ```bash [Yarn]
+ yarn add remark-emoji
+ ```
+
+ ```bash [NPM]
+ npm install remark-emoji
+ ```
+::
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ markdown: {
+ remarkPlugins: ['remark-emoji']
+ }
+ }
+}
+```
+
+### `markdown.remarkPlugins`
+
+- Тип: `Array`
+- По умолчанию: `['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes']`
+- Версия: **>= v1.4.0**
+
+> Вы можете посмотреть плагины для [remark](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins).
+
+### `markdown.rehypePlugins`
+
+- Тип: `Array`
+- По умолчанию: `['rehype-minify-whitespace', 'rehype-sort-attribute-values', 'rehype-sort-attributes', 'rehype-raw']`
+- Версия: **>= v1.4.0**
+
+> Вы можете посмотреть плагины для [rehype](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins).
+
+### `markdown.basePlugins`
+
+::alert{type="warning"}
+
+Устаревшее. Используйте `markdown.remarkPlugins`.
+
+::
+
+### `markdown.plugins`
+
+::alert{type="warning"}
+
+Устаревшее. Используйте `markdown.remarkPlugins`.
+
+::
+
+### `markdown.prism.theme`
+
+- Тип: `String`
+- По умолчанию: `'prismjs/themes/prism.css'`
+
+Этот модуль добавляет подсветку синтаксиса кода в markdown используя [PrismJS](https://prismjs.com).
+
+Автоматически ставит тему PrismJS из вашего файла конфигурации Nuxt.js config, поэтому вы можете использовать различные темы, список [тем для prism](https://github.com/PrismJS/prism-themes):
+
+::code-group
+ ```bash [Yarn]
+ yarn add prism-themes
+ ```
+
+ ```bash [NPM]
+ npm install 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`.
+
+### `xml`
+
+- Тип: `Object`
+- По умолчанию: `{}`
+
+Этот модуль использует `xml2js` для чтения `.xml` файлов, вы можете посмотреть список настроек [здесь](https://www.npmjs.com/package/xml2js#options).
+
+### `csv`
+
+- Тип: `Object`
+- По умолчанию: `{}`
+
+Этот модуль использует `node-csvtojson` для чтения csv файлов, вы можете посмотреть список настроек [здесь](https://github.com/Keyang/node-csvtojson#parameters).
+
+### `extendParser`
+
+- Тип: `Object`
+- По умолчанию `{}`
+
+С этим параметром вы можете задать собственные парсеры для различных типов файлов. Также вы можете **перезаписать** стандартный парсер!
+
+Для добавления собственного парсера вам нужно написать функцию, которая принимает как аргумент контент файла и обратно возвращает обработанные данные.
+
+**Пример**
+
+```
+const parseTxt = file => file.split('\n').map(line => line.trim())
+// В конфигурации:
+{
+ extendParser: {
+ '.txt': parseTxt
+ }
+}
+```
+
+## Настройки по умолчанию
+
+```js [nuxt.config.js]
+export default {
+ content: {
+ apiPrefix: '_content',
+ dir: 'content',
+ fullTextSearchFields: ['title', 'description', 'slug', 'text'],
+ nestedProperties: [],
+ markdown: {
+ remarkPlugins: [
+ 'remark-squeeze-paragraphs',
+ 'remark-slug',
+ 'remark-autolink-headings',
+ 'remark-external-links',
+ 'remark-footnotes'
+ ],
+ rehypePlugins: [
+ 'rehype-minify-whitespace',
+ 'rehype-sort-attribute-values',
+ 'rehype-sort-attributes',
+ 'rehype-raw'
+ ],
+ prism: {
+ theme: 'prismjs/themes/prism.css'
+ }
+ },
+ yaml: {},
+ csv: {},
+ xml: {},
+ extendParser: {}
+ }
+}
+```
diff --git a/docs/content-v1/ru/1.getting-started/7.advanced.md b/docs/content-v1/ru/1.getting-started/7.advanced.md
new file mode 100644
index 000000000..bffa3b37c
--- /dev/null
+++ b/docs/content-v1/ru/1.getting-started/7.advanced.md
@@ -0,0 +1,182 @@
+---
+title: Продвинутое использование
+description: 'Изучите продвинутое использование модуля @nuxt/content.'
+position: 7
+category: Начало
+---
+
+## Программное использование
+
+`$content` доступен из **@nuxt/content**.
+
+::alert{type="warning"}
+
+Обратите внимание, что вы можете получить к нему доступ только **после того, как модуль будет загружен** 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)
+ }
+ }
+}
+```
+
+### Статическая генерация сайта
+
+Начиная с версии 2.14+, `nuxt generate` имеет интегрированный обходчик, который будет автоматически обходить все ваши ссылки и генерировать маршруты основываясь на них. Поэтому вам не нужно ничего делать для сканирования ваших динамических маршрутов.
+
+Также, `nuxt generate` будет пропускать этап сборки если код не был изменен используя кэш. Модуль content интегрируется с этим для игнорирования изменений внутри директории `content/`. Другими словами, когда вы измените контент на вашем сайте выполните развертывание, то шаг сборки будет пропущен.
+
+> Прочитайте больше в [этой статье](https://nuxtjs.org/blog/nuxt-static-improvements).
+
+При использовании Nuxt <= 2.12 `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)
+ }
+ }
+}
+```
+
+::alert{type="warning"}
+
+Рекомендуем использовать Nuxt 2.14+ вместе с `nuxt generate`, потому что это классно!
+
+::
+
+## Хуки
+
+Этот модуль добавляет несколько хуков, которые вы можете использовать:
+
+### `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).
+
+## 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`
+
+Endpoint доступен для `GET` и `POST` запросов, так что вы можете использовать параметры запроса: [http://localhost:3000/_content/articles?only=title&only=description&limit=10](http://localhost:3000/_content/articles?only=title&only=description&limit=10).
+
+Начиная с **v1.4.0**, этот endpoint также поддерживает `where` в параметрах запроса:
+
+- Все ключи, которые не принадлежат ни одному из ключей по умолчанию, будут применены к `where`
+
+`http://localhost:3000/_content/articles?author=...`
+
+- Вы можете использовать `$operators` с `_`:
+
+`http://localhost:3000/_content/articles?author_regex=...`
+
+> Под капотом этот модуль использует LokiJS, вы можете взглянуть на [примеры запросов](https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries).
+
+- Вы можете использовать [вложенные параметры](/configuration#nestedproperties):
+
+`http://localhost:3000/_content/products?categories.slug_contains=top`
+
+> Вы можете узнать больше о конечных точках на [lib/middleware.js](https://github.com/nuxt/content/blob/master/lib/middleware.js).
diff --git a/docs/content-v1/ru/1.getting-started/_dir.yml b/docs/content-v1/ru/1.getting-started/_dir.yml
new file mode 100644
index 000000000..5bdf71874
--- /dev/null
+++ b/docs/content-v1/ru/1.getting-started/_dir.yml
@@ -0,0 +1 @@
+title: Начиная
diff --git a/docs/content-v1/ru/2.examples/_dir.yml b/docs/content-v1/ru/2.examples/_dir.yml
new file mode 100644
index 000000000..5ae44d4a6
--- /dev/null
+++ b/docs/content-v1/ru/2.examples/_dir.yml
@@ -0,0 +1 @@
+title: Примеры
diff --git a/docs/content-v1/ru/2.examples/basic.md b/docs/content-v1/ru/2.examples/basic.md
new file mode 100644
index 000000000..726a20185
--- /dev/null
+++ b/docs/content-v1/ru/2.examples/basic.md
@@ -0,0 +1,8 @@
+---
+title: Базовый пример использования
+description: 'Пример использования Nuxt Content на CodeSandbox.'
+toc: false
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-playground-l164h?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/ru/2.examples/docs-theme.md b/docs/content-v1/ru/2.examples/docs-theme.md
new file mode 100644
index 000000000..f4a659ab7
--- /dev/null
+++ b/docs/content-v1/ru/2.examples/docs-theme.md
@@ -0,0 +1,8 @@
+---
+title: Пример темы документации
+description: 'Пример использования темы документации для Nuxt Content на CodeSandbox.'
+toc: false
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-docs-theme-playground-inwxb?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/ru/2.examples/tailwindcss-typography.md b/docs/content-v1/ru/2.examples/tailwindcss-typography.md
new file mode 100644
index 000000000..1132d2086
--- /dev/null
+++ b/docs/content-v1/ru/2.examples/tailwindcss-typography.md
@@ -0,0 +1,8 @@
+---
+title: Пример TailwindCSS Typography
+description: 'Пример использования плагина TailwindCSS Typography для Nuxt Content на CodeSandbox.'
+toc: false
+---
+
+::sandbox{src="https://codesandbox.io/embed/nuxt-content-tailwindcss-typography-twhtf?hidenavigation=1&theme=dark"}
+::
diff --git a/docs/content-v1/ru/3.community/1.snippets.md b/docs/content-v1/ru/3.community/1.snippets.md
new file mode 100644
index 000000000..590dbab1e
--- /dev/null
+++ b/docs/content-v1/ru/3.community/1.snippets.md
@@ -0,0 +1,140 @@
+---
+title: Примеры кода
+description: 'Узнайте, как внедрить @nuxt/content в свое приложение по этим примерам кода.'
+---
+
+Посмотрите эти примеры кода, которые можно скопировать прямо в ваше приложение.
+
+## Использование
+
+### asyncData
+
+```js
+export default {
+ async asyncData({ $content, params }) {
+ const article = await $content('articles', params.slug).fetch()
+
+ return {
+ article
+ }
+ }
+}
+```
+
+## Особенности
+
+### Поиск
+
+Добавьте компонент поиска с помощью watch:
+
+```vue
+
+
+
+
+
+
+ {{ article.title }}
+
+
+
+
+
+```
+
+> Взгляните на [документацию по поиску](/fetching#searchfield-value)
+
+### Пагинация
+
+Добавьте ссылки назад и вперед используя метод `surround`:
+
+```vue
+
+
+
+ {{ prev.title }}
+
+
+
+ {{ next.title }}
+
+
+
+
+
+```
+
+> Взгляните на [документацию по методу surround](/fetching#surroundslug-options)
+
+### Оглавление
+
+Добавьте оглавление, циклически перебирая наш массив toc и используя `id` для ссылки на него и `text` для отображения заголовка. Мы можем использовать `depth` для различного стиля заголовков:
+
+```vue
+
+
+
+
+
+```
+
+> Взгляните на [документацию по оглавлению](/writing#table-of-contents)
diff --git a/docs/content-v1/ru/3.community/2.integrations.md b/docs/content-v1/ru/3.community/2.integrations.md
new file mode 100644
index 000000000..b7d257497
--- /dev/null
+++ b/docs/content-v1/ru/3.community/2.integrations.md
@@ -0,0 +1,65 @@
+---
+title: Интеграции
+description: 'Изучите как использовать @nuxt/content с другими модулями.'
+---
+
+## @nuxtjs/feed
+
+С случае со статьями, контент может использоваться для генерации новостной ленты с использованием модуля [@nuxtjs/feed](https://github.com/nuxt-community/feed-module).
+
+::alert{type="info"}
+
+Для использования `$content` внутри параметра `feed`, вам нужно добавить `@nuxt/content` перед `@nuxtjs/feed` в `modules` вашего файла конфигурации.
+
+::
+
+**Пример**
+
+```js
+export default {
+ modules: [
+ '@nuxt/content',
+ '@nuxtjs/feed'
+ ],
+
+ feed () {
+ const baseUrlArticles = 'https://mywebsite.com/articles'
+ const baseLinkFeedArticles = '/feed/articles'
+ const feedFormats = {
+ rss: { type: 'rss2', file: 'rss.xml' },
+ atom: { type: 'atom1', file: 'atom.xml' },
+ json: { type: 'json1', file: 'feed.json' },
+ }
+ const { $content } = require('@nuxt/content')
+
+ const createFeedArticles = async function (feed) {
+ feed.options = {
+ title: 'Мой блог',
+ description: 'Я пишу про технологии',
+ link: baseUrlArticles,
+ }
+ const articles = await $content('articles').fetch()
+
+ articles.forEach((article) => {
+ const url = `${baseUrlArticles}/${article.slug}`
+
+ feed.addItem({
+ title: article.title,
+ id: url,
+ link: url,
+ date: article.published,
+ description: article.summary,
+ content: article.summary,
+ author: article.authors,
+ })
+ })
+ }
+
+ return Object.values(feedFormats).map(({ file, type }) => ({
+ path: `${baseLinkFeedArticles}/${file}`,
+ type: type,
+ create: createFeedArticles,
+ }))
+ }
+}
+```
diff --git a/docs/content-v1/ru/3.community/_dir.yml b/docs/content-v1/ru/3.community/_dir.yml
new file mode 100644
index 000000000..49c43768d
--- /dev/null
+++ b/docs/content-v1/ru/3.community/_dir.yml
@@ -0,0 +1 @@
+title: Сообщество
diff --git a/docs/content-v1/ru/_dir.yml b/docs/content-v1/ru/_dir.yml
new file mode 100644
index 000000000..ff7cf26dc
--- /dev/null
+++ b/docs/content-v1/ru/_dir.yml
@@ -0,0 +1,3 @@
+aside:
+ root: /ru/v1
+ level: 0
diff --git a/docs/content/1.index.md b/docs/content/1.index.md
index 28a9db38f..e8273d626 100755
--- a/docs/content/1.index.md
+++ b/docs/content/1.index.md
@@ -26,12 +26,13 @@ Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml
::
::card-grid
+#root
+::ellipsis{.-z-[1]}
+::
+
#title
Powerful Features
-#root
-:ellipse
-
#default
::card
---
@@ -79,3 +80,11 @@ Powerful Features
---
::
::
+
+::container{padded .py-8 .mb-8 .flex .items-center .justify-center}
+
+ ::button-link{href="/content-v1" type="base"}
+ Looking for v1 documentation ?
+ ::
+
+::
diff --git a/docs/content/7.changelog.md b/docs/content/3.changelog.md
similarity index 100%
rename from docs/content/7.changelog.md
rename to docs/content/3.changelog.md
diff --git a/docs/content/playground.md b/docs/content/4.playground.md
similarity index 100%
rename from docs/content/playground.md
rename to docs/content/4.playground.md
diff --git a/docs/content/5.content-v1.md b/docs/content/5.content-v1.md
new file mode 100644
index 000000000..fe242c68a
--- /dev/null
+++ b/docs/content/5.content-v1.md
@@ -0,0 +1,26 @@
+---
+title: V1 Documentation
+layout: fluid
+---
+
+
+::div{.w-full .min-h-page .relative .text-center .overflow-x-hidden}
+ # @nuxt/content v1 documentation is still available!
+
+ ::div{.flex .justify-center}
+ ::button-link{href="/v1/getting-started/introduction" size="large"}
+ English
+ ::
+
+ ::button-link{href="/fr/v1/getting-started/introduction" .ml-2 size="large"}
+ French
+ ::
+
+ ::button-link{href="/ja/v1/getting-started/introduction" .ml-2 size="large"}
+ Japanese
+ ::
+ ::
+
+ ::ellipsis{.-z-[1]}
+ ::
+::
diff --git a/docs/content/_theme.yml b/docs/content/_theme.yml
index ef0004964..97a66d656 100644
--- a/docs/content/_theme.yml
+++ b/docs/content/_theme.yml
@@ -7,15 +7,20 @@ socials:
twitter: "@nuxt_js"
github: "nuxt/content"
github:
- repository: "nuxt/content"
- branch: "main"
- dir: docs
+ root: docs/content
+ edit: true
releases: true
cover:
src: /cover.jpg
alt: "Content made easy for Vue developers"
aside:
level: 1
+ filter:
+ - /v1
+ - /content-v1
+ - /fr
+ - /ja
+ - /ru
header:
title: false
logo: true
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index ad1a86208..95b68abd5 100755
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,3 +1,4 @@
+import { resolve } from 'pathe'
import { defineNuxtConfig } from 'nuxt'
import consola from 'consola'
import colors from 'tailwindcss/colors.js'
@@ -10,16 +11,49 @@ if (process.env.NODE_ENV === 'development') {
}
export default defineNuxtConfig({
+ content: {
+ sources: [
+ {
+ name: 'v1',
+ prefix: '/v1',
+ driver: 'fs',
+ base: resolve(__dirname, 'content-v1/en')
+ },
+ {
+ name: 'v1-ja',
+ prefix: '/ja/v1',
+ driver: 'fs',
+ base: resolve(__dirname, 'content-v1/ja')
+ },
+ {
+ name: 'v1-fr',
+ prefix: '/fr/v1',
+ driver: 'fs',
+ base: resolve(__dirname, 'content-v1/fr')
+ },
+ {
+ name: 'v1-ru',
+ prefix: '/ru/v1',
+ driver: 'fs',
+ base: resolve(__dirname, 'content-v1/ru')
+ }
+ ],
+ highlight: {
+ preload: ['xml']
+ }
+ },
generate: {
routes: []
},
- modules: ['@nuxthq/admin'],
+ modules: ['@nuxthq/admin', '@docus/github'],
alias,
extends: [
(process.env.DOCUS_THEME_PATH || './node_modules/@docus/docs-theme')
],
github: {
- repo: 'nuxt/content'
+ owner: 'nuxt',
+ repo: 'content',
+ branch: 'main'
},
vite: {
define: {
diff --git a/docs/public/video-cover.jpeg b/docs/public/video-cover.jpeg
new file mode 100644
index 000000000..180bbd914
Binary files /dev/null and b/docs/public/video-cover.jpeg differ
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 74ef3938c..1a564e77e 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -282,10 +282,10 @@
resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-1.0.0.tgz#91c560df2ed8d9700e4c7ed4ac21a3a322c9d975"
integrity sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==
-"@docus/base@npm:@docus/base-edge@3.0.0-96bc31e":
- version "3.0.0-96bc31e"
- resolved "https://registry.yarnpkg.com/@docus/base-edge/-/base-edge-3.0.0-96bc31e.tgz#5f06b73bed37ea5712887662ae747a975308697c"
- integrity sha512-uU2IaZQJcUTnqUJzk25sY3JujW8mLffraG8wnBwdCaavRp9AgdSzaEAEkdDtPJQPErhX6AqdwbbHvxb3yoHsRA==
+"@docus/base@npm:@docus/base-edge@3.0.0-a0efb08":
+ version "3.0.0-a0efb08"
+ resolved "https://registry.yarnpkg.com/@docus/base-edge/-/base-edge-3.0.0-a0efb08.tgz#2b97b40e052b94a60916049ff3722d72451605aa"
+ integrity sha512-pmFNe8YrgKQqnvNjITA8jA+iTjqjEuEoFkami5pPHbZ+UCafCFouhbO1obN7+gUiTMpB2d+14PvWQEJHGulCqg==
dependencies:
"@nuxt/content" "npm:@nuxt/content-edge@latest"
"@nuxthq/admin" "npm:@nuxthq/admin-edge@latest"
@@ -296,11 +296,11 @@
pkg-types "^0.3.2"
"@docus/docs-theme@npm:@docus/docs-theme-edge@latest":
- version "3.0.0-96bc31e"
- resolved "https://registry.yarnpkg.com/@docus/docs-theme-edge/-/docs-theme-edge-3.0.0-96bc31e.tgz#04a8a474fadb0caa9084f799ecf020e4c685db0e"
- integrity sha512-CJttGsa1EhNdiqGRDfHKbuT2yZBzZ3Kwk33C0CAYRbR3UC6P+qA2Qz2w+m7F8vtPa8JqSOcVUqFyXWDSXAgYEA==
+ version "3.0.0-a0efb08"
+ resolved "https://registry.yarnpkg.com/@docus/docs-theme-edge/-/docs-theme-edge-3.0.0-a0efb08.tgz#c337c7d76e26490f96240188adb2e9f1fe32ad1d"
+ integrity sha512-ic+lgU+Sr77Wmqmo/asdR1wJaNUcnv0TG66liENK7qG5c6CsA8fr3+jpfzKKSM6AshWtYRrVFif67MHdpNLcQA==
dependencies:
- "@docus/base" "npm:@docus/base-edge@3.0.0-96bc31e"
+ "@docus/base" "npm:@docus/base-edge@3.0.0-a0efb08"
"@iconify/vue" "^3.2.1"
"@nuxtjs/color-mode" "^3.0.3"
"@nuxtjs/tailwindcss" "^5.1.2"
@@ -313,9 +313,9 @@
vue-plausible "^1.3.1"
"@docus/github@npm:@docus/github-edge@latest":
- version "1.2.6-96bc31e"
- resolved "https://registry.yarnpkg.com/@docus/github-edge/-/github-edge-1.2.6-96bc31e.tgz#afd0a05c8e27a32f37aa79d58dd9f69242c7f9ee"
- integrity sha512-Hx4lv8St79TKuLwVLX7zTra+BT7biKvRtytFvC4xauunGljmWgL3Ey26xsH55c12yC33RRSnTt1Y0jZYCi/mMw==
+ version "1.2.6-a0efb08"
+ resolved "https://registry.yarnpkg.com/@docus/github-edge/-/github-edge-1.2.6-a0efb08.tgz#0a45560d992029769dd0cefc5c8b03f486b96724"
+ integrity sha512-uydlwlZ+frduDh6Q2vjpJRwo1lvQ94Xcx3X3To6ogFaEvRpmFPrjLGrqaXvGCMSAsYNsAnYf25K8VlW8hEeXcg==
dependencies:
"@nuxt/kit" "^3.0.0-rc.3"
"@octokit/graphql" "^4.8.0"