プログラマティックな利用方法
$content
は @nuxt/contentからアクセスできます
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 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:
document
- Type:
Object
- Properties:
- コンテンツを作成するを参照してください。
- Type:
例
ブログのスターターを例にとると、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
イベントを待ち受けることができます。
export default function ({ store }) { // 開発時のみ if (process.dev) { window.onNuxtReady(($nuxt) => { $nuxt.$on('content:update', ({ event, path }) => { // storeのカテゴリを更新 store.dispatch('fetchCategories') }) }) }}
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
:index
とsettings
のリスト
エンドポイントは GET
や POST
リクエストでアクセスできるので、クエリのパラメーターを利用できます。: 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)をチェックすることができます。
- nested propertiesも利用できます
http://localhost:3000/_content/products?categories.slug_contains=top
このエンドポイントについての詳細は lib/middleware.jsを参照してください。