Для начала, создайте директорию content/
в вашем проекте:
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
.
Обязательно используйте компонент <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
}
отрывок
Отрывок или резюме содержания можно извлечь из содержания, используя <!--more-->
в качестве разделителя.
---
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 & 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 & 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.
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>
не беспокоясь о его импорте на страницу.
Оглавление
Массив toc
будет выведен в ваш документ, в нем будут перечислены все h2
и h3
с их заголовками и идентификаторами, чтобы вы смогли связать их.
{
"toc": [{
"id": "welcome",
"depth": 2,
"text": "Welcome!"
}]
}
Взгляните на правую часть этой страницы для примера.
Пример
Файл 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": "Добро пожаловать!"
}