Nuxt/Contentの公式ページのようなテーマにする Nuxt/Content-theme-docs を導入する方法です。
導入方法は公式ページに書かれています。 Docs - Nuxt Content
日本語対応する部分などところどころ戸惑う部分もあったため記載していきます。
テーマをインストール
既存のNuxt/Contentのプロジェクトに追加する場合、で書いていきます。
$ yarn add nuxt @nuxt/content-theme-docsnuxt.config.jsの編集
@nuxt/content-theme-docs を使うためにはNuxtの設定ファイルを編集する必要があります。
themeの設定
まず今まで記載していた設定を theme() でラップします
nuxt.config.js
import theme from '@nuxt/content-theme-docs'
export default theme({
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'static',
・・・
build: {},
})多言語対応
これだけだと以下のようなエラーが表示されます。
@nuxt/content-theme-docs が内部的に nuxt-i18n を利用していて、
多言語対応が必須になるためです。
nuxt-i18n 用の設定を追記します。
nuxt.config.js
import theme from '@nuxt/content-theme-docs'
export default theme({
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
i18n: {
locales: () => [
{
code: 'ja',
iso: 'ja_JP',
file: 'ja_JP.js',
name: '日本語',
},
{
code: 'en',
iso: 'en-US',
file: 'en-US.js',
name: 'English',
},
],
defaultLocale: 'ja',
},
・・・
build: {},
})defaultLocale: 'ja', を設定しておくのが重要
記事を配置するcontentフォルダも合わせて変更
defaultLocale: 'ja', と設定しているので en/ ではなく ja/ フォルダに今までの記事を移動します
content/
ja/
articles/
sample-01.md
sample-02.md
・・・modulesの対応
ここまでだと以下のようなエラーが起きます。
FATAL server.handleUpgrade() was called more than once with the same socket, possibly due to a misconfiguration
at WebSocketServer.completeUpgrade (node_modules/ws/lib/websocket-server.js:267:13)
at WebSocketServer.handleUpgrade (node_modules/ws/lib/websocket-server.js:245:10)
at WS.handleUpgrade (node_modules/@nuxt/content/lib/ws.js:21:21)
at node_modules/@nuxt/content/lib/ws.js:11:14nuxt.config.jsに初期の段階だと以下のような記述があります
nuxt.config.js
import theme from '@nuxt/content-theme-docs'
export default theme({
・・・
/*
** Nuxt.js modules
*/
modules: ['@nuxt/content'], // <=この部分
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {},
})@nuxt/content-theme-docsとバッティングしてしまっているのか分かりませんが、
modules: ['@nuxt/content'], の行を削除する事で動くようになります。
これで私の環境では動くようになりました！
