nuxt.config.jsのcontentプロパティで@nuxt/contentの設定ができます。

nuxt.config.js
export default {
  content: {
    // カスタム設定
  }
}

個々の設定項目を学ぶ前に、デフォルトの設定を確認してください。

デフォルト値とのマージ

すべての設定のプロパティを関数または静的な値 (プリミティブ、オブジェクト、配列、...) として定義できます。 関数で定義する場合、デフォルト値が第一引数として提供されます。

もしプロパティを定義するのに関数を使わない場合、設定されていない値はデフォルト値とマージします。 デフォルト値は非常に賢明なので、これはmarkdown.remarkPlugins、markdown.rehypePluginsなどに便利です。 デフォルト値とのマージを回避したい場合、関数でのプロパティ定義を利用してください。

プロパティ一覧

apiPrefix

  • Type: string
  • Default: '/_content'

クライアントサイドのAPI呼び出しやSSE(Server-Sent Events)に利用されるルート

nuxt.config.js
content: {
  // $content api が localhost:3000/content-api で提供されます
  apiPrefix: 'content-api'
}

dir

  • Type: string
  • Default: 'content'

コンテンツを書くためのディレクトリ。絶対パスを指定できますが、相対パスの場合はNuxt srcDirで解決されます。

nuxt.config.js
content: {
  dir: 'my-content' //  my-content/ から contentを読み取ります
}

fullTextSearchFields

  • Type: Array
  • Default: ['title', 'description', 'slug', 'text']

全文検索を有効にするため、インデックス化する必要があるフィールド。検索についての詳細はここを参照してください

textは、ASTにパースされる前のMarkdownを含む特別なキーです。

nuxt.config.js
content: {
  // title と description だけを検索
  fullTextSearchFields: ['title', 'description']
}

nestedProperties

  • Type Array
  • Default: []
  • Version: >= v1.3.0

ドット表記やディープフィルタリングを処理するために、入れ子になったプロパティを登録します。

nuxt.config.js
content: {
  nestedProperties: ['categories.slug']
}

markdown

remarkとrehypeを使って、MarkdownファイルをJSON ASTにコンパイルし、変数bodyに格納します。

以下の説明はremarkPluginsとrehypePluginsの両方に当てはまります。

どのようにMarkdownをパースするか設定するには、次のようにします。

  • 新しいプラグインをデフォルトにする
nuxt.config.js
export default {
  content: {
    markdown: {
      remarkPlugins: ['remark-emoji']
    }
  }
}
  • デフォルトプラグインのオーバーライド
nuxt.config.js
export default {
  content: {
    markdown: {
      remarkPlugins: () => ['remark-emoji']
    }
  }
}
  • ローカルプラグインの利用
nuxt.config.js
export default {
  content: {
    markdown: {
      remarkPlugins: [
        '~/plugins/my-custom-remark-plugin.js'
      ]
    }
  }
}
  • 定義の中で直接オプションを指定する
nuxt.config.js
export default {
  content: {
    markdown: {
      remarkPlugins: [
        ['remark-emoji', { emoticon: true }]
      ]
    }
  }
}
  • キャメルケースでプラグインの名前を使ってオプションを指定する
nuxt.config.js
export default {
  content: {
    markdown: {
      // https://github.com/remarkjs/remark-external-links#options
      remarkExternalLinks: {
        target: '_self',
        rel: 'nofollow'
      }
    }
  }
}
新しいプラグインを追加するときは、必ずdependenciesにインストールしてください
Yarn
yarn add remark-emoji
NPM
npm install remark-emoji
nuxt.config.js
export default {
  content: {
    markdown: {
      remarkPlugins: ['remark-emoji']
    }
  }
}

markdown.remarkPlugins

  • Type: Array
  • Default: ['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes']
  • Version: >= v1.4.0

remark pluginsを参照してください。

markdown.rehypePlugins

  • Type: Array
  • Default: ['rehype-minify-whitespace', 'rehype-sort-attribute-values', 'rehype-sort-attributes', 'rehype-raw']
  • Version: >= v1.4.0

rehype pluginsを参照してください。

markdown.basePlugins

非推奨です。代わりに markdown.remarkPluginsを関数として使用してください。

markdown.plugins

非推奨です。代わりに markdown. remarkPluginsを配列として使用してください。

markdown.prism.theme

  • Type: string
  • Default: 'prismjs/themes/prism.css'

PrismJSを使用してMarkdownコンテンツのコードのシンタックスハイライトを処理します。

これは、Nuxt.jsの設定で希望するPrismJSテーマを自動的にプッシュします。デフォルトのテーマとは異なるテーマを使用したい場合は、prism-themesから選んで変更します。

Yarn

yarn add prism-themes
NPM
npm install prism-themes
nuxt.config.js
content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-material-oceanic.css'
    }
  }
}

テーマの組み込みを無効にしたい場合は、prismにfalseを設定します。:

nuxt.config.js
content: {
  markdown: {
    prism: {
      theme: false
    }
  }
}

yaml

  • Type: object
  • Default: {}

このモジュールは、js-yamlを使用して.yamlと.ymlファイルを解析します。ここでoptionsを確認できます。

json：trueオプションを強制することに注意してください。

xml

  • Type: object
  • Default: {}

このモジュールは xml2js を用いて .xml ファイルを解析します。optionsはこちらで確認できます。

csv

  • Type: object
  • Default: {}

このモジュールは、node-csvtojsonを使用してcsvファイルを解析します。ここでoptionsを確認できます。

デフォルトの設定

nuxt.config.js
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: {}
  }
}
Edit this page on GitHub
Table of Contents