docs/ディレクトリにオープンソースプロジェクトのドキュメントを作成しているとしましょう。

セットアップ

テーマの利用方法は、今までのNuxtJSアプリと同様です。セットアップに必要なものは以下です：

package.json

このファイルはnpm initでも生成されます

nuxtと@nuxt/content-theme-docsをインストールします:

yarn add nuxt @nuxt/content-theme-docs

npm install nuxt @nuxt/content-theme-docs

例

{
  "name": "docs",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/content-theme-docs": "^0.11.0",
    "nuxt": "^2.15.8"
  }
}

nuxt.config.js

theme関数を@nuxt/content-theme-docsからimportします：

import theme from '@nuxt/content-theme-docs'

export default theme()

このテーマは、nuxt.config.jsでデフォルトの設定を追加/上書きするための関数を用意しています。

設定がどのようにマージされるかを知るには、defu.fnのドキュメントを見てください

例

import theme from '@nuxt/content-theme-docs'

export default theme({

  loading: { color: '#48bb78' },
  generate: {
    fallback: '404.html', // for Netlify
    routes: ['/'] // give the first url to start crawling
  },
  i18n: {
    locales: () => [{
      code: 'fr',
      iso: 'fr-FR',
      file: 'fr-FR.js',
      name: 'Français'
    }, {
      code: 'en',
      iso: 'en-US',
      file: 'en-US.js',
      name: 'English'
    }],
    defaultLocale: 'en'
  },
  buildModules: [
    ['@nuxtjs/google-analytics', {
      id: 'UA-12301-2'
    }]
  ]
})

content/

このテーマは国際化にnuxt-i18nを使用します。そのデフォルトはenロケールであるため、content/en/サブディレクトリを作成する必要があります。その後、Markdownファイルの書き込みを開始できます

static/

ここに、ロゴなどの静的アセットを配置します

例

content/
  en/
    index.md
static/
  favicon.ico
nuxt.config.js
package.json

Content

content/ディレクトリのMarkdownファイルはページになり、左側のナビゲーションにリストされます。

適切に機能させるには、Markdownのフロントマターに以下のプロパティを必ず含めてください：

• title
  • Type: string
  • required
  • ページのタイトルはメタに挿入されます
• description
  • Type: string
  • required
  • ページの説明はメタに挿入されます
• position
  • Type: number
  • required
  • ナビゲーションでドキュメントをソートするために使用されます
• category
  • Type: string
  • required
  • ナビゲーションでドキュメントをグループ化するために使用されます
• version
  • Type: float
  • ドキュメントが更新されることをバッジでユーザーへ警告するために使用できます。一度ページが表示されると、バージョンが上がるまではローカルストレージに保存されます。
• fullscreen
  • Type: boolean
  • tocがないときにページを拡大するために使用できます

例

---
title: Introduction
description: 'Empower your NuxtJS application with @nuxt/content module.'
position: 1
category: Getting started
version: 1.4
fullscreen: false
---

設定

テーマの設定をするために、content/settings.jsonを作成できます。

• title
  • Type: string
  • ドキュメントのタイトル
• url
  • Type: string
  • ドキュメントがデプロイされるURL
• logo
  • Type: string | object
  • プロジェクトのロゴ。color modeごとにロゴを設定するobjectにもできます
• github
  • Type: string
  • 最新バージョン、リリースページ、ページ上部のGitHubへのリンク、 このページをGitHubで編集するリンク などを各ページへ表示させるには、GitHubレポジトリを${org}/${name}の形式で追加します
• twitter
  • Type: string
  • リンクさせたいTwitterユーザー名

例

{
  "title": "Nuxt Content",
  "url": "https://content.nuxtjs.org",
  "logo": {
    "light": "/logo-light.svg",
    "dark": "/logo-dark.svg"
  },
  "github": "nuxt/content",
  "twitter": "@nuxt_js"
}

コンポーネント

このテーマには、Markdownコンテンツで直接使用できるいくつかのVue.jsコンポーネントが付属しています：

<alert>

Props

• type
  • Type: string
  • Default: 'warning'
  • Values: ['warning', 'info']

例

<alert>

Check out a warning alert with a `codeblock`!

</alert>

結果

例

<alert type="info">

Check out an info alert with a [link](/themes/docs).

</alert>

結果

<list>

Props

• items
  • Type: Array
  • Default: []

例

---
items:
  - Item1
  - Item2
  - Item3
---

<list :items="items"></list>

結果

<code-group>

このコンポーネントはslotsを利用しています。以下のcode-blockを参照してください。

<code-block>

Props

• label
  • Type: string
  • required
• active
  • Type: boolean
  • Default: false

例

# Backslashes are for demonstration

::code-group
```bash
yarn add @nuxt/content-theme-docs
\```

```bash
npm install @nuxt/content-theme-docs
\```
::

結果

yarn add @nuxt/content-theme-docs

npm install @nuxt/content-theme-docs

<code-sandbox>

Props

• src
  • Type: string
  • required

例

---
link: https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark
---

<code-sandbox :src="link"></code-sandbox>

結果

画像

2つのバージョンがある場合、dark-imgとlight-imgクラスを画像に適用することで、カラーモードに依存した依存関係を自動的に切替えられます。

例

<img src="/img-light.svg" class="light-img" alt="Image light" />
<img src="/img-dark.svg" class="dark-img" alt="Image dark" />