Вы можете настроить @nuxt/content
через свойство content
в вашем nuxt.config.js
.
export default { content: { // Мои настройки }}
Прежде чем погрузиться в отдельные атрибуты, взгляните на Настройки по умолчанию.
Слияние со значениями по умолчанию
Вы можете задать каждый параметр как функцию или статическое значение (примитивы, объекты, массивы и т.д.) Если вы используете функцию, то стандартное значение будет передано как первый аргумент.
Если вы не используете функцию для определения ваших параметров, модуль попытается объединить их со стандартными значениями. Это может быть удобно для markdown.remarkPlugins
, markdown.rehypePlugins
и так далее, потому что
значения по умолчанию довольно правильные. Если вы не хотите включать значения по умолчанию, просто используйте функцию.
Параметры
apiPrefix
- Тип:
string
- По умолчанию:
'/_content'
Маршрут, использующийся для клиентских API вызовов и SSE(Server-Sent Events — «события, посылаемые сервером»).
content: { // $content api будет доступен на localhost:3000/content-api apiPrefix: 'content-api'}
dir
- Тип:
string
- По умолчанию:
'content'
Директория, используемая для написания контента. Вы можете указать абсолютный или относительный путь, будет обработано Nuxt srcDir.
content: { dir: 'my-content' // читать контент из my-content/}
fullTextSearchFields
- Тип:
Array
- По умолчанию:
['title', 'description', 'slug', 'text']
Поля, которые нужно проиндексировать, для возможности поиска по ним, почитайте подробнее об этом здесь.
text
специальный ключ, включающий ваш Markdown перед преобразованием в AST.
content: { // Искать только по title и description fullTextSearchFields: ['title', 'description']}
nestedProperties
- Тип
Array
- По умолчанию:
[]
- Версия: v2.0.0
Зарегистрируйте вложенные свойства для обработки обращения через точку и глубокой фильтрации.
content: { nestedProperties: ['categories.slug']}
liveEdit
- Тип
boolean
- По умолчанию:
true
- Версия: >= v1.5.0
Отключает редактирование в реальном времени в режиме разработки:
content: { liveEdit: false}
markdown
Этот модуль использует remark «под капотом» для компиляции markdown файлов в JSON AST, который будет храниться в переменной body
.
remarkPlugins
, и для rehypePlugins
Чтобы настроить, как модуль будет анализировать Markdown, вы можете:
- Добавить новый плагин к плагинам по умолчанию:
export default { content: { markdown: { remarkPlugins: ['remark-emoji'] } }}
- Перезаписать плагины по умолчанию:
export default { content: { markdown: { remarkPlugins: () => ['remark-emoji'] } }}
- Использовать локальные плагины
export default { content: { markdown: { remarkPlugins: [ '~/plugins/my-custom-remark-plugin.js' ] } }}
- Задать параметры в определении плагина
export default { content: { markdown: { remarkPlugins: [ ['remark-emoji', { emoticon: true }] ] } }}
- Задать параметры используя имя плагина в
camelCase
export default { content: { markdown: { // https://github.com/remarkjs/remark-external-links#options remarkExternalLinks: { target: '_self', rel: 'nofollow' } } }}
yarn add remark-emoji
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.
markdown.rehypePlugins
- Тип:
Array
- По умолчанию:
['rehype-minify-whitespace', 'rehype-sort-attribute-values', 'rehype-sort-attributes', 'rehype-raw']
- Версия: >= v1.4.0
Вы можете посмотреть плагины для rehype.
markdown.basePlugins
markdown.remarkPlugins
.markdown.plugins
markdown.remarkPlugins
.markdown.prism.theme
- Тип:
string
- По умолчанию:
'prismjs/themes/prism.css'
Этот модуль добавляет подсветку синтаксиса кода в markdown используя PrismJS.
Автоматически ставит тему PrismJS из вашего файла конфигурации Nuxt.js config, поэтому вы можете использовать различные темы, список тем для prism:
pnpm add prism-themes
content: { markdown: { prism: { theme: 'prism-themes/themes/prism-material-oceanic.css' } }}
Для отключения темы по умолчанию установите prism значение false
:
content: { markdown: { prism: { theme: false } }}
yaml
- Тип:
object
- По умолчанию:
{}
Этот модуль использует js-yaml
для чтения yaml файлов, вы можете посмотреть список настроек здесь.
Обратите внимание, что мы выставляем параметр json: true
.
xml
- Тип:
object
- По умолчанию:
{}
Этот модуль использует xml2js
для чтения .xml
файлов, вы можете посмотреть список настроек здесь.
csv
- Тип:
object
- По умолчанию:
{}
Этот модуль использует node-csvtojson
для чтения csv файлов, вы можете посмотреть список настроек здесь.
extendParser
- Тип:
object
- По умолчанию
{}
С этим параметром вы можете задать собственные парсеры для различных типов файлов. Также вы можете перезаписать стандартный парсер!
Для добавления собственного парсера вам нужно написать функцию, которая принимает как аргумент контент файла и обратно возвращает обработанные данные.
Пример
const parseTxt = file => file.split('\n').map(line => line.trim())
// В конфигурации:
{
extendParser: {
'.txt': parseTxt
}
}
Настройки по умолчанию
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: {} }}