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.mdstatic/  favicon.iconuxt.config.jspackage.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: Introductiondescription: 'Empower your NuxtJS application with @nuxt/content module.'position: 1category: Getting startedversion: 1.4fullscreen: 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" />