内容

インストール

開始するには、公式の guide または要約に従うことができます：

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

次に、@nuxt/contentモジュールをnuxt.config.tsに追加します。

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxt/content'
  ],
  css: ['~/assets/css/main.css']
})

設定

MarkdownコンテンツファイルでTailwind CSSクラスを使用する場合、Tailwindが必要なユーティリティクラスを検出して生成できるようにする必要があります。デフォルトでは、Tailwindの自動コンテンツ検出はmarkdownファイルに記述されたクラスを検出しない場合があります。

これを修正するには、CSSファイルで@source directive を使用して、コンテンツディレクトリを明示的に含めます。

@import "tailwindcss";
@import "@nuxt/ui";

@source "../../../content/**/*";

これにより

• Tailwindはコンテンツディレクトリ内のすべてのマークダウンファイルをスキャンします
• markdownで使用されるユーティリティクラス（text-primaryなど）は、最終CSSに含まれます。
• MDCコンポーネントまたはコンテンツ内のカスタムVueコンポーネント内の動的クラスは正しく動作します

コンポーネント

@nuxt/contentを使ってドキュメントを作成しているかもしれません。それを助けるために、ページで使用できるコンポーネントをいくつか作成しました。

• ContentSearch を含む組み込みフルテキスト検索コマンドパレットAlgolia DocSearchの必要性を置き換えます
• ContentNavigation コンポーネントを持つナビゲーションツリー
• ContentToc コンポーネントを持つ粘着性のある目次
• ContentSurround コンポーネントを使用した前/次のナビゲーション

タイポグラフィ

Nuxt UIはすべての散文コンポーネントの独自の実装を提供しているので、@nuxt/contentでレンダリングされたmarkdownは他のコンポーネントと同じテーマをピックアップします。

Utils

Nuxt UIは、@nuxt/contentが返すデータをコンポーネントが期待する形式に再形成するヘルパーを提供します。

mapContentNavigation

このユーティリティはqueryCollectionNavigationからナビゲーションをマップし、さまざまなコンポーネントで使用できるオブジェクトの配列に再帰的に変換します。

mapContentNavigation(navigation, options?)

• navigationナビゲーションツリー ContentNavigationItemの配列。
• options（オプション）：
  • labelAttribute文字列ラベルとして使用するフィールドデフォルトではtitle
  • deep数値または未定義ナビゲーションのレベルの数を制御しますundefinedはデフォルトで、すべてのレベルを含みます

例以下のブレッドクラムの例に示すように、ナビゲーションデータを正しい形式に変換するためによく使われます。

<script setup lang="ts">
import { mapContentNavigation } from '@nuxt/ui/utils/content'
import { findPageBreadcrumb } from '@nuxt/content/utils'

const route = useRoute()

const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())

const breadcrumb = computed(() => mapContentNavigation(
  findPageBreadcrumb(navigation.value, page.value?.path, { indexAsChild: true }),
  { deep: 0 }
).map(({ icon, ...link }) => link))
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page">
      <template #headline>
        <UBreadcrumb :items="breadcrumb" />
      </template>
    </UPageHeader>
  </UPage>
</template>