Для начала, создайте директорию content/ в вашем проекте:
content/ articles/ article-1.md article-2.md home.mdЭтот модуль будет обрабатывать файлы .md, .yaml, .csv, .json, .json5 и генерировать следующие свойства:
dirpathslugextension(например:.md)createdAtupdatedAt
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.
<!--more--> точно; т.е. все строчные и без пробелов.Пример переменных будет вставлен в документ:
{ 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.vuecontent/ 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": "Добро пожаловать!"}