ページ設定

Nextraでは、サイトとページ構造は、同じ場所にある _meta.js ファイルで設定できます。ドキュメントテーマでは、さらにカスタマイズするための追加オプションがいくつかあります。

これらの設定は、テーマの全体的なレイアウト、特にナビゲーションバーとサイドバーに影響を与えます。

ページ

サイドバーに表示されるページのタイトルと順序は、キーと値のペアとして _meta.js ファイルで設定する必要があります。たとえば、次のようなファイル構造がある場合

_meta.js ファイルで、サイドバーにページをどのように表示するかを定義できます。

export default {
  index: 'My Homepage',
  contact: 'Contact Us',
  about: 'About Us'
}

フォルダ

フォルダはページと同じ方法で設定できます。例:

トップレベルの _meta.js ファイルには、トップレベルのページとフォルダのメタ情報が含まれています

export default {
  index: 'My Homepage',
  contact: 'Contact Us',
  fruits: 'Delicious Fruits',
  about: 'About Us'
}

そして、ネストされた _meta.js ファイルには、同じフォルダ内のページのメタ情報が含まれています

export default {
  apple: 'Apple',
  banana: 'Banana'
}

このようにして、ページの情報をディレクトリにグループ化します。_meta.js ファイルを変更せずにディレクトリを移動できます。

インデックスページ付きフォルダ

インデックスページを持つフォルダを作成したい場合はどうすればよいでしょうか？フォルダと同じ名前で、同じディレクトリに MDX ページを追加できます。上記の例で、/fruits ルートを追加したいとします。pages に fruits.mdx ファイルを作成できます。

次に、Nextra は _meta.js の fruits キーが、インデックスページを持つフォルダを定義していることを認識します。サイドバーでそのフォルダをクリックすると、フォルダが開き、同時に fruits.mdx ページが表示されます。

外部リンク

_meta.js に href を持つ項目を追加することで、サイドバーに外部リンクを追加できます。

export default {
  index: 'My Homepage',
  contact: 'Contact Us',
  fruits: 'Delicious Fruits',
  about: 'About Us',
  github_link: {
    title: 'Nextra',
    href: 'https://github.com/shuding/nextra'
  }
}

常に新しいタブでリンクを開くには、"newWindow": true オプションを有効にします。

export default {
  index: 'My Homepage',
  contact: 'Contact Us',
  fruits: 'Delicious Fruits',
  about: 'About Us',
  github_link: {
    title: 'Nextra',
    href: 'https://github.com/shuding/nextra',
    newWindow: true
  }
}

非表示ルート

デフォルトでは、ファイルシステム内のすべての MDX ルートがサイドバーに表示されます。ただし、"display": "hidden" 設定を使用すると、特定のページまたはフォルダを非表示にできます

export default {
  index: 'My Homepage',
  contact: {
    display: 'hidden'
  },
  about: 'About Us'
}

ページは /contact URL からアクセスできますが、サイドバーには表示されません。

ナビゲーションバーの項目

サブドキュメント

トップレベルのページまたはフォルダを "type": "page" として定義すると、サイドバーではなくナビゲーションバーに特別なページとして表示されます。この機能を使用すると、複数の「サブドキュメント」と、「お問い合わせ」などの常に表示される特別なページやリンクを作成できます。

たとえば、プロジェクトに 2 つのドキュメントフォルダ frameworks と fruits を持つことができます。

トップレベルの _meta.js ファイルで、通常のサイドバー項目ではなく、すべてをページとして設定できます

export default {
  index: {
    title: 'Home',
    type: 'page'
  },
  frameworks: {
    title: 'Frameworks',
    type: 'page'
  },
  fruits: {
    title: 'Fruits',
    type: 'page'
  },
  about: {
    title: 'About',
    type: 'page'
  }
}

そして、このようになります

"display": "hidden" オプションを使用して、ナビゲーションバーから Home のようなリンクを非表示にすることもできます。

メニュー

"type": "menu" と "items" オプションを使用して、ナビゲーションバーにメニューを追加することもできます

export default {
  company: {
    title: 'Company',
    type: 'menu',
    items: {
      about: {
        title: 'About',
        href: '/about'
      },
      contact: {
        title: 'Contact Us',
        href: 'mailto:hi@example.com'
      }
    }
  }
}

リンク

外部リンク オプションと同じように、ナビゲーションバーにも外部リンクを含めることができます

export default {
  index: {
    title: 'Home',
    type: 'page'
  },
  about: {
    title: 'About',
    type: 'page'
  },
  contact: {
    title: 'Contact Us',
    type: 'page',
    href: 'https://example.com/contact',
    newWindow: true
  }
}

フォールバック

上記の サブドキュメント の例では、すべてのページに対して "type": "page" オプションを定義する必要があります。簡単にするために、"*" キーを使用して、このフォルダ内のすべての項目のフォールバック設定を定義できます

export default {
  '*': {
    type: 'page'
  },
  index: 'Home',
  frameworks: 'Frameworks',
  fruits: 'Fruits',
  about: 'About'
}

これらは、すべての項目に "type": "page" が設定されている場合と同等です。

区切り

"type": "separator" を持つ「プレースホルダー」項目を使用して、サイドバーの項目間に区切り線を作成できます

export default {
  index: 'My Homepage',
  '---': {
    type: 'separator'
  },
  contact: 'Contact Us'
}

高度な設定

テーマコンポーネント

"theme" オプションを使用して、各ページのテーマを設定できます。たとえば、特定のページの特定のコンポーネントを無効または有効にできます。

export default {
  index: {
    title: 'Home',
    theme: {
      breadcrumb: false,
      footer: true,
      sidebar: false,
      toc: true,
      pagination: false
    }
  }
}

このオプションは、フォルダに設定した場合、すべての子ページに継承されます。

レイアウト

デフォルトでは、各ページのテーマ設定には "layout": "default" があります。これはデフォルトの動作です。

Raw レイアウト

デフォルトでは、Nextra は、テーマ設定されたコンポーネントを使用して、コンテンツコンテナ内で MDX コンテンツ (h1、h2、h3 など) をレンダリングします。"raw" レイアウトを使用すると、Nextra がコンテンツにスタイルを挿入しないようにすることができます

export default {
  index: {
    title: 'Home',
    theme: {
      layout: 'raw'
    }
  }
}

Full レイアウト

一部のページをコンテナの幅と高さ全体でレンダリングし、他のすべてのスタイルを保持したい場合があります。"full" レイアウトを使用すると、それを実現できます

export default {
  index: {
    title: 'Home',
    theme: {
      layout: 'full'
    }
  }
}

タイポグラフィ

"typesetting" オプションは、フォント機能、見出しスタイル、および li や code などのコンポーネントのようなタイポグラフィの詳細を制御します。ドキュメントテーマでは、"default" と "article" のタイポグラフィが利用可能です。

デフォルトのタイポグラフィは、ドキュメントのようなほとんどのケースに適していますが、"article" のタイポグラフィを使用すると、エレガントな記事ページのように見せることができます

export default {
  about: {
    title: 'About Us',
    theme: {
      typesetting: 'article'
    }
  }
}