Docs

最初の@nuxt/contentテーマを試してみてください。このサイトのような美しいドキュメントを数秒で作成できます。

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

package.json
{
  "name": "docs",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/content-theme-docs": "^0.1.1",
    "nuxt": "^2.14.0"
  }
}

nuxt.config.js

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

nuxt.config.js
import theme from '@nuxt/content-theme-docs'

export default theme()

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

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

nuxt.config.js
import theme from '@nuxt/content-theme-docs'

export default theme({
  env: {
    GITHUB_TOKEN: process.env.GITHUB_TOKEN
  },
  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'
    }]
  ]
})

nuxt.config.jsで追加したモジュールの依存関係をインストールすることを忘れないでください。

content/

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

static/

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

static/icon.pngファイルを追加することで、nuxt-pwaを有効化し、faviconを自動生成できます。

アイコンは512x512以上の大きさの正方形である必要があります

static/preview.pngファイルを追加することで、ソーシャルプレビュー画像をメタに含められます

画像サイズは640×320px以上にしてください(1280×640pxが最適です)

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>

結果

Check out a warning alert with a codeblock!

<alert type="info">

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

</alert>

結果

Check out an info alert with a link.

<list>

Props

  • items
    • Type: Array
    • Default: []

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

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

結果

Item1
Item2
Item3

<code-group>

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

<code-block>

Props

  • label
    • Type: String
    • required
  • active
    • Type: Boolean
    • Default: false

# Backslashes are for demonstration

<code-group>
  <code-block label="Yarn" active>

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

  </code-block>
  <code-block label="NPM">

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

  </code-block>
</code-group>

結果

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>

結果

Loading CodeSandbox...

画像

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

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