Contentはグローバルに $content インスタンスを注入するので、this.$content を使えばどこからでもアクセスできます。plugins、asyncData、fetch、nuxtServerInit、Middlewareは context.$content からアクセスできます。

メソッド一覧

$content(path, options?)

  • path
    • Type: string
    • Default: /
  • options
    • Type: object
    • Default: {}
    • Version: >= v1.3.0
  • options.deep
    • Type: boolean
    • Default: false
    • Version: >= v1.3.0
    • サブディレクトリからのファイルの取得
  • options.text
    • Type: boolean
    • Default: false
    • Version: >= v1.4.0
    • 元のマークダウンの内容をtext変数で返します
  • チェーンシーケンスを返します

引数を複数与えることもできます。$content('article', params.slug) は /articles/${params.slug} に変換されます。

pathにはファイルかディレクトリを指定できます。pathがファイルの場合、fetch() は object を返し、ディレクトリの場合は Array を返します。

第二引数に { deep: true } を渡すことでサブディレクトリからファイルを取得できます。

以下で紹介するメソッドはすべて$contentの後につなげて使います。Promise を返すfetch以外は、チェーンシーケンスを返します。

only(keys)

  • keys
    • Type: Array | string
    • required

フィールドのサブセットを抽出します。

const { title } = await this.$content('article-1').only(['title']).fetch()

without(keys)

  • keys
    • Type: Array | string
    • required

フィールドのサブセットを削除します。

const { title, ...propsWithoutBody } = await this.$content('article-1').without(['body']).fetch()

where(query)

  • query
    • Type: object
    • required

クエリで結果をフィルタリングします。

クエリはmongoクエリ構文のサブセットに基づいています。たとえば次のように処理します $eq, $ne, $gt, $gte, $lt, $lte, $in, ...

// implicit (assumes $eq operator)
const articles = await this.$content('articles').where({ title: 'Home' }).fetch()
// explicit $eq
const articles = await this.$content('articles').where({ title: { $eq: 'Home' } }).fetch()

// $gt
const articles = await this.$content('articles').where({ age: { $gt: 18 } }).fetch()
// $in
const articles = await this.$content('articles').where({ name: { $in: ['odin', 'thor'] } }).fetch()

オブジェクトや配列でフィルタリングするには、nestedPropertiesを有効にする必要があります。設定を参照してください。

const products = await this.$content('products').where({ 'categories.slug': { $contains: 'top' } }).fetch()

const products = await this.$content('products').where({ 'categories.slug': { $contains: ['top', 'woman'] } }).fetch()

内部的にLokiJSを使用しています。query examplesをチェックしてください。

sortBy(key, direction)

  • key
    • Type: string
    • required
  • direction
    • Type: string
    • Value: 'asc' or 'desc'
    • Default: 'asc'

結果をkeyでソートします。

const articles = await this.$content('articles').sortBy('title').fetch()

複数回チェインすることで、複数のフィールドでソートできます。

limit(n)

  • n
    • Type: string | number
    • required

結果の数を最大でnまでに制限します。

// fetch only 5 articles
const articles = await this.$content('articles').limit(5).fetch()

skip(n)

  • n
    • Type: string | number
    • required

結果をnだけスキップします。

// fetch the next 5 articles
const articles = await this.$content('articles').skip(5).limit(5).fetch()

search(field, value)

  • field
    • Type: string
    • required
  • value
    • Type: string

フィールドの全文検索を行います。valueはオプションで、この場合は field が value となり、定義したすべての全文検索フィールドに対して検索が行われます。

検索したいフィールドは、インデックスを作成するためにオプションで定義する必要があります。設定を参照してください。

// Search on field title
const articles = await this.$content('articles').search('title', 'welcome').fetch()
// Search on all pre-defined fields
const articles = await this.$content('articles').search('welcome').fetch()

surround(slug, options)

  • slug
    • Type: string
    • required
  • options
    • Type: object
    • Default: { before: 1, after: 1}

Get prev and next results around a specific slug.

You will always obtain an array of fixed length filled with the maching document or null.

特定のスラッグを中心として、前の結果と次の結果を取得します。

ドキュメントかnullが入った固定長の配列が戻り値になります。

const [prev, next] = await this.$content('articles')
  .only(['title', 'path'])
  .sortBy('date')
  .where({ isArchived: false })
  .surround('article-2')
  .fetch()

// Returns
[
  {
    title: 'Article 1',
    path: 'article-1'
  },
  null // no article-3 here
]

surroundを利用する場合、search、limit、skipは考慮されません。

fetch()

  • Returns: Promise<object> | Promise<Array>

チェーンシーケンスを終了し、データを収集します。

用例

const articles = await this.$content('articles')
  .only(['title', 'date', 'authors'])
  .sortBy('date', 'asc')
  .limit(5)
  .skip(10)
  .where({
    tags: 'testing',
    isArchived: false,
    date: { $gt: new Date(2020) },
    rating: { $gte: 3 }
  })
  .search('welcome')
  .fetch()

開発をスムーズにするために、Content APIの使い方をチェックしてください。

Edit this page on GitHub
Table of Contents