title

description

position

Markdown

Этот модуль конвертирует ваши .md файлы в древовидную JSON AST структуру, которая будет храниться в переменной body.

Обязательно используйте компонент <nuxt-content> для отображения контента из вашего markdown, взгляните на отображение контента.

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

Содержание

Вы можете добавить содержание в ваш markdown файл. Содержание должно быть первым в файле и иметь форму действительного YAML, установленного между тройными пунктирными линиями. Вот основной пример:

---
title: Вступление
description: Изучите как использовать @nuxt/content.
---

Эти переменные будут вставлены в документ:

{
  body: Object
  title: "Вступление"
  description: "Изучите как использовать @nuxt/content."
  dir: "/"
  extension: ".md"
  path: "/index"
  slug: "index"
  toc: Array
  createdAt: DateTime
  updatedAt: DateTime
}

отрывок

Отрывок или резюме содержания можно извлечь из содержания, используя  в качестве разделителя.

---
title: Вступление
---

Изучите как использовать @nuxt/content.
<!--more-->
Полный объем содержимого за пределами разделителя more.

Свойство Description будет содержать содержимое отрывка, если оно не определено в свойствах Front Matter.

Будьте внимательны при вводе  точно; т.е. все строчные и без пробелов.

Пример переменных будет вставлен в документ:

{
  body: Object
  title: "Вступление"
  description: "Изучите как использовать @nuxt/content."
  dir: "/"
  extension: ".md"
  path: "/index"
  slug: "index"
  toc: Array
  createdAt: DateTime
  updatedAt: DateTime
}

Заголовки

Этот модуль автоматически добавит id и link к каждому заголовку.

Представим, что у нас есть такой файл:

# Lorem ipsum
## dolor—sit—amet
### consectetur &amp; adipisicing
#### elit
##### elit

Это будет преобразовано в древовидную JSON AST структуру и использовано компонентом nuxt-content и в итоге получится вот такой HTML:

<h1 id="lorem-ipsum-"><a href="#lorem-ipsum-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Lorem ipsum</h1>
<h2 id="dolorsitamet"><a href="#dolorsitamet" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>dolor—sit—amet</h2>
<h3 id="consectetur--adipisicing"><a href="#consectetur--adipisicing" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>consectetur &#x26; adipisicing</h3>
<h4 id="elit"><a href="#elit" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>elit</h4>
<h5 id="elit-1"><a href="#elit-1" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>elit</h5>

Ссылки в заголовках пусты и поэтому скрыты, но вы можете стилизовать их. Взгляните на документацию, которая появляется при наведении на заголовок.

Ссылки

Ссылки преобразуются для добавления корректных target и rel атрибутов используя remark-external-links. Взгляните сюда чтобы изучить как настроить это плагин.

Относительные ссылки будут также преобразованы в nuxt-link, чтобы обеспечить навигацию между компонентами страниц и улучшит производительность используя умную предзагрузку.

Пример использования внешней, относительной, markdown и html ссылок:

---
title: Главная
---

## Ссылки

<nuxt-link to="/articles">Nuxt ссылка на блог</nuxt-link>

<a href="/articles">Html ссылка на блог</a>

[Markdown ссылка на блог](/articles)

<a href="https://nuxtjs.org">Внешняя html ссылка</a>

[Внешняя markdown ссылка](https://nuxtjs.org)

Сноски

Этот модуль поддерживает расширенный markdown синтаксис для сносок используя remark-footnotes. Взгляните сюда чтобы изучить как настроить это плагин.

Пример использования сносок:

Это простая сноска,[^1], а это более длинная сноска.[^bignote]

[^1]: Это первая сноска.

[^bignote]: Это сноска с несколькими абзацами и кодом.

    Добавим абзацы, чтобы включить их в сноску.

    `{ мой код }`

    Добавьте столько абзацев, сколько вам нужно.

Вы можете почитать руководство по расширенному синтаксису о сносках

Блоки кода

Этот блок автоматически обернет ваши блоки кода и применит PrismJS классы (посмотрите синтаксис выделений).

Блоки кода в 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 это будет выглядеть так:

<div class="nuxt-content-highlight">
  <span class="filename">server.js</span>
  <pre class="language-js" data-line="1,3-5">
    <code>
      ...
    </code>
  </pre>
</div>

Номера строк добавляются к тегу pre в атрибуте data-line.

Имя файла будет преобразовано в span с классом filename, это позволит стилизовать их. Взгляните на документацию в правом верхнем углу блоков кода.

Подсветка синтаксиса

По умолчанию, подсветка кода обеспечивается использованием PrismJS и темой, указанной в опциях вашего Nuxt.js приложения, взгляните на конфигурацию.

HTML

Вы можете писать HTML внутри вашего Markdown:

---
title: Главная
---

## HTML

<p><span class="note">Смесь <em>Markdown</em> и <em>HTML</em>.</span></p>

Помните, что при размещении Markdown внутри компонента перед ним должна стоять пустая строка, иначе весь блок обрабатывается как пользовательский HTML.

Это не будет работать:

<div class="note">
  *Markdown* и <em>HTML</em>.
</div>

Но это будет:

<div class="note">

  *Markdown* и <em>HTML</em>.

</div>

Также как это:

<span class="note">*Markdown* и <em>HTML</em>.</span>

Vue компоненты

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

Существует проблема с локально зарегистрированными компонентами и режимом редактирования в реальном времени, поэтому начиная с v1.5.0 вы можете отключить его установив liveEdit: false (смотрите конфигурацию).

Поскольку @nuxt/content предполагает, что весь Markdown предоставлен автором (а не с помощью сторонних пользователей), исходные тексты обрабатываются полностью (включая теги), с помощью rehype-raw:

Вы должны использовать ваши компоненты в kebab case:

Используйте <my-component> вместо <MyComponent>

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

<my-component/>

А это будет:

<my-component></my-component>

Примеры:

Мы определили компонент ExampleMultiselect.vue:

Выберите *фреймворк*:

<example-multiselect :options="['Vue', 'React', 'Angular', 'Svelte']"></example-multiselect>

Результат:

Выберите фреймворк:

Также вы можете задать параметры:

---
multiselectOptions:
  - VuePress
  - Gridsome
  - Nuxt
---

<example-multiselect :options="multiselectOptions"></example-multiselect>

Эти компоненты будут отрисованы используя компонент <nuxt-content>, взгляните на отображение контента.

Шаблоны

Вы можете использовать теги template для отрисовки контента внутри вашего Vue.js компонента:

<my-component>
  <template #named-slot>
    <p>Контент именованного слота.</p>
  </template>
</my-component>

Однако, вы не можете использовать динамический контент, не используйте входные параметры слота. например, это не будет работать:

<my-component>
  <template #named-slot="slotProps">
    <p>{{ slotProps.someProperty }}</p>
  </template>
</my-component>

Глобальные компоненты

Начиная с v2.0.0 и Nuxt v2.13.0, вы можете положить ваши компоненты в директорию components/global/ и вам не прийдется импортировать их на свои страницы.

components/
  global/
    Hello.vue
content/
  home.md

Затем в content/home.md, вы можете добавить компонент <hello></hello> не беспокоясь о его импорте на страницу.

Пример

Файл content/home.md:

---
title: Главная
---

## Добро пожаловать!

Будет преобразовано в:

{
  "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, чтобы использовать это для поиска или для расширения.

CSV

Строки будут присвоены к переменной body.

Пример

Файл content/home.csv:

title, description
Главная, Добро пожаловать!

Будет преобразовано в:

{
  "dir": "/",
  "slug": "главная",
  "path": "/главная",
  "extension": ".json",
  "body": [
    {
      "title": "Главная",
      "description": "Добро пожаловать!"
    }
  ]
}

XML

Будет преобразовано в:

Пример

Файл content/home.xml:

<xml>
  <item prop="abc">
    <title>Заголовок</title>
    <description>Привет мир</description>
  </item>
</xml>

Will be transformed into:

{
  "dir": "/",
  "slug": "home",
  "path": "/home",
  "extension": ".xml",
  "body": {
    "xml": {
      "item": [
        {
          "$": {
            "prop": "abc"
          },
          "title": [
            "Заголовок"
          ],
          "description": [
            "ривет мир"
          ]
      }
    ]
  }
}

YAML / YML

Указанные данные будут выведены в документ.

Переменная body не будет сгенерирована.

Пример

Файл content/home.yaml:

title: Главная
description: Добро пожаловать!

Будет преобразовано в:

{
  "dir": "/",
  "slug": "главная",
  "path": "/главная",
  "extension": ".yaml",
  "title": "Главная",
  "description": "Добро пожаловать!"
}

JSON / JSON5

Указанные данные будут выведены в документ.

Переменная body не будет сгенерирована.

Пример

Файл content/home.json:

{
  "title": "Главная",
  "description": "Добро пожаловать!"
}

Будет преобразовано в:

{
  "dir": "/",
  "slug": "главная",
  "path": "/главная",
  "extension": ".json",
  "title": "Главная",
  "description": "Добро пожаловать!"
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

writing.md

writing.md

Markdown

Содержание

отрывок

Заголовки

Ссылки

Сноски

Блоки кода

Подсветка синтаксиса

HTML

Vue компоненты

Шаблоны

Глобальные компоненты

Оглавление

Пример

CSV

Пример

XML

Пример

YAML / YML

Пример

JSON / JSON5

Пример

Files

writing.md

Latest commit

History

writing.md

File metadata and controls

Markdown

Содержание

отрывок

Заголовки

Ссылки

Сноски

Блоки кода

Подсветка синтаксиса

HTML

Vue компоненты

Шаблоны

Глобальные компоненты

Оглавление

Пример

CSV

Пример

XML

Пример

YAML / YML

Пример

JSON / JSON5

Пример