Nuxt/Contentにcontent-theme-docsを適用する

2020.09.21

テーマをインストール
nuxt.config.jsの編集
themeの設定
多言語対応
modulesの対応

Nuxt/Contentの公式ページのようなテーマにする Nuxt/Content-theme-docs を導入する方法です。

導入方法は公式ページに書かれています。 Docs - Nuxt Content

日本語対応する部分などところどころ戸惑う部分もあったため記載していきます。

テーマをインストール

既存のNuxt/Contentのプロジェクトに追加する場合、で書いていきます。

$ yarn add nuxt @nuxt/content-theme-docs

nuxt.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:14

nuxt.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: {},
})