発展的な機能

プログラマティックな利用方法

$content@nuxt/contentからアクセスできます

モジュールがNuxtによってロードされた後でなければアクセスできないことに注意してください。require('@nuxt/content') は、フックや内部のNuxtメソッドで発生するはずです。

export default {
  modules: [
    '@nuxt/content'
  ],
  generate: {
    async ready () {
      const { $content } = require('@nuxt/content')
      const files = await $content().only(['slug']).fetch()
      console.log(files)
    }
  }
}

静的サイト生成

Nuxt 2.13+ 以降、nuxt export にはクローラー機能が統合されており、すべてのリンクをクロールし、それらのリンクに基づいてルートを生成します。したがって、動的なルートをクロールさせるためには何もする必要はありません。

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

保存する前にドキュメントへデータを追加できます。

Arguments:

ブログのスターターを例にとると、reading-Timeを利用したreadingTime をドキュメントへ追加するために、file:beforeInsertを使うことができます。

textは、JSON ASTに変換される前のMarkdownファイルのbodyの内容で、この時点では使用できますが、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
      }
    }
  }
}

ホットリロードの取り扱い

開発モードの場合、モジュールは自動的に nuxtServerInitストアアクション(定義されている場合)と $nuxt.refresh() を呼び出して現在のページを更新します。

イベントを待ち受けてさらに何かをしたい場合は、$nuxt.$on('content:update')を使ってクライアント側で content:update イベントを待ち受けることができます。

plugins/update.client.js
export default function ({ store }) {
  // 開発時のみ
  if (process.dev) {
    window.onNuxtReady(($nuxt) => {
      $nuxt.$on('content:update', ({ event, path }) => {
        // storeのカテゴリを更新
        store.dispatch('fetchCategories')
      })
    })
  }
}

nuxt.config.jsにプラグインを追加します。

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

これで、content/ディレクトリ内のファイルを更新するたびに、fetchCategoriesメソッドもディスパッチされます。 このドキュメントサイトでは実際にそれを使用しています。plugins/init.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: indexsettingsのリスト

エンドポイントは GETPOST リクエストでアクセスできるので、クエリのパラメーターを利用できます。: http://localhost:3000/_content/articles?only=title&only=description&limit=10.

v1.4.0以降、このエンドポイントはクエリパラメーターの whereもサポートしています。

  • デフォルトのキーに属さないすべてのキーが whereに適用されます。

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

  • $operators_と一緒に使うことができます。

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

このモジュールは 、内部的にLokiJSを使用しています。、あなたは[クエリの例](https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries)をチェックすることができます。

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

このエンドポイントについての詳細は lib/middleware.jsを参照してください。