Программное использование

$content доступен из @nuxt/content.

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/. Другими словами, когда вы измените контент на вашем сайте выполните развертывание, то шаг сборки будет пропущен.

Прочитайте больше в этой статье.

При использовании Nuxt <= 2.12 nuxt generate, вам нужно указать динамические маршруты в generate.routes, потому что Nuxt не знает какие маршруты нужно генерировать.

Пример

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

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

Аргументы:

• document
  • Тип: object
  • Свойства:
    • Смотрите написание контента

Пример

Возьмем к примеру блог, мы используем file:beforeInsert чтобы добавить readingTime в документ, используя reading-time.

text это контент markdown файла перед тем, как он будет преобразован в JSON AST, вы можете использовать его на этом этапе, но он не возвращается API.

export default {  modules: [,    '@nuxt/content'  ],  hooks: {    'content:file:beforeInsert': (document) => {      if (document.extension === '.md') {        const { time } = require('reading-time')(document.text)        document.readingTime = time      }    }  }}

Обработка горячей перезагрузки

В случае, если вам нужно слушать событие, чтобы выполнить что-то еще, вам нужно слушать событие content:update на стороне клиента, используя $nuxt.$on('content:update'):

export default function ({ store }) {  // Только в режиме разработки  if (process.dev) {    window.onNuxtReady(($nuxt) => {      $nuxt.$on('content:update', ({ event, path }) => {        // Обновить категории в сторе        store.dispatch('fetchCategories')      })    })  }}

Затем добавьте ваш плагин в nuxt.config.js:

export default {  plugins: [    '@/plugins/update.client.js'  ]}

Теперь, каждый раз, когда вы будете обновлять файл в вашей директории content/, будет выполняться метод fetchCategories. Эта документация использует его и вы можете узнать больше, взглянув наplugins/categories.js.

API

Этот модуль предоставляет API в разработке, поэтому вы можете легко увидеть JSON каждого каталога или файла, доступные на http://localhost:3000/_content/. Префикс _content установлен по умолчанию и может быть изменен в параметре apiPrefix.

Пример:

-| 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.

Начиная с v1.4.0, этот endpoint также поддерживает where в параметрах запроса:

• Все ключи, которые не принадлежат ни одному из ключей по умолчанию, будут применены к where

http://localhost:3000/_content/articles?author=...

• Вы можете использовать $operators с _:

http://localhost:3000/_content/articles?author_regex=...

Под капотом этот модуль использует LokiJS, вы можете взглянуть на примеры запросов.

• Вы можете использовать вложенные параметры:

http://localhost:3000/_content/products?categories.slug_contains=top

Вы можете узнать больше о конечных точках на lib/middleware.js.