フッター

リンクカラム、アイテム、著作権テキストを使用したサイトフッターの設定方法。

フッターはすべてのページの下部に表示され、src/config/settings.tsのfooterプロパティで設定できます。複数カラムのリンクレイアウトとオプションの著作権テキストをサポートしています。

設定

src/config/settings.tsのfooterプロパティはFooterConfigオブジェクトを受け入れます：

footer: {
  links: [
    {
      title: "Docs",
      items: [
        { label: "Getting Started", href: "/docs/getting-started" },
        { label: "Guides", href: "/docs/guides" },
      ],
    },
    {
      title: "Community",
      items: [
        { label: "GitHub", href: "https://github.com/zudolab/zudo-doc" },
      ],
    },
  ],
  copyright: `Copyright © ${new Date().getFullYear()} <a href="https://example.com">Your Name</a>. Built with <a href="https://zudo-doc.pages.dev/">zudo-doc</a>.`,
} satisfies FooterConfig as FooterConfig | false,

links

フッターに表示されるカラムの配列です。各カラムはtitleとリンクのitems配列を持ちます。

items配列の各アイテムは以下のプロパティを持ちます：

copyright

リンクカラムの下にセンタリングされて表示されるオプションの著作権テキストです。リンクカラムが存在する場合、著作権テキストは上部ボーダーで区切られます。リンクが設定されていない場合は、ボーダーなしで表示されます。

著作権フィールドはHTMLコンテンツをサポートしています。<a>タグを使用してリンクを含めることができます。著作権内のリンクは自動的にtext-accentカラーとアンダーラインでスタイリングされます。

copyright: `Copyright © ${new Date().getFullYear()} <a href="https://example.com">Your Name</a>. Built with <a href="https://zudo-doc.pages.dev/">zudo-doc</a>.`,

カラムの追加

links配列にオブジェクトを追加することでカラムを増やせます。フッターはレスポンシブグリッドを使用しており、小さい画面ではカラムが縦に積まれ、大きい画面では横に並びます。

footer: {
  links: [
    {
      title: "Docs",
      items: [
        { label: "Getting Started", href: "/docs/getting-started" },
        { label: "Guides", href: "/docs/guides" },
      ],
    },
    {
      title: "Community",
      items: [
        { label: "GitHub", href: "https://github.com/zudolab/zudo-doc" },
        { label: "Discord", href: "https://discord.gg/example" },
      ],
    },
    {
      title: "More",
      items: [
        { label: "Blog", href: "https://example.com/blog" },
        { label: "Changelog", href: "/docs/changelog" },
      ],
    },
  ],
  copyright: `Copyright © ${new Date().getFullYear()} <a href="https://example.com">My Project</a>.`,
},

フッターの無効化

フッターを完全に削除するには、設定でfooterをfalseに設定します：

footer: false as FooterConfig | false,

falseに設定すると、フッターコンポーネントはどのページにもレンダリングされません。

i18n（ローカライズされたラベル）

フッターのカラムとリンクアイテムは、オプションのlocalesフィールドによるロケール固有のオーバーライドをサポートしています。デフォルト以外のロケールでページがレンダリングされると、フッターはローカライズされたタイトルとラベルを自動的に解決します。内部リンクのhrefにもロケールパスが付与されます（例：/ja/docs/guides）。

footer: {
  links: [
    {
      title: "Docs",
      locales: { ja: { title: "ドキュメント" } },
      items: [
        {
          label: "Getting Started",
          href: "/docs/getting-started",
          locales: { ja: { label: "はじめに" } },
        },
        {
          label: "Guides",
          href: "/docs/guides",
          locales: { ja: { label: "ガイド" } },
        },
      ],
    },
  ],
},

各FooterLinkColumnは、ロケールごとの{ title }オーバーライドを持つオプションのlocalesフィールドを受け入れます。各FooterLinkItemは、ロケールごとの{ label }オーバーライドを持つオプションのlocalesフィールドを受け入れます。ロケールオーバーライドが存在しない場合、デフォルトのtitleまたはlabelが使用されます。

TypeScript型

フッターの設定はsrc/config/settings-types.tsで定義されている以下のインターフェースを使用します：

interface FooterLinkItem {
  label: string;
  href: string;
  locales?: Record<string, { label: string }>;
}

interface FooterLinkColumn {
  title: string;
  items: FooterLinkItem[];
  locales?: Record<string, { title: string }>;
}

interface FooterConfig {
  links: FooterLinkColumn[];
  copyright?: string;
}

設定のfooterプロパティはFooterConfig | falseとして型付けされており、設定オブジェクトまたは無効化のためのfalseのいずれかを指定できます。

スタイリング

フッターは一貫したテーマ設定のためにプロジェクトのデザイントークンカラーを使用しています：

• border-muted — コンテンツとフッターを区切る上部ボーダー、および著作権の上のディバイダー
• bg-surface — フッターの背景
• text-fg — カラムタイトル
• text-muted — リンクテキストと著作権テキスト
• text-accent — リンクホバー時の色

レイアウトはレスポンシブで、モバイルでは1カラム、小さい画面では2カラム、大きい画面ではauto-fitカラムになります。実装の詳細はsrc/components/footer.astroを参照してください。