フッターはすべてのページの下部に表示され、`zfb.config.ts`で`zudoDoc({...})`に渡す`footer`フィールドで設定できます。複数カラムのリンクレイアウトとオプションの著作権テキストをサポートしています。

## 設定

`footer`フィールドは`FooterConfig`オブジェクトを受け入れます：

```ts title="zfb.config.ts"
export default defineConfig(
  zudoDoc({
    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.takazudomodular.com/">zudo-doc</a>.`,
    },
  }),
);
```

### links

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

| プロパティ | 型 | 説明 |
|----------|------|-------------|
| `title` | string | リンクの上に表示されるカラム見出し |
| `items` | `FooterLinkItem[]` | カラム内のリンクアイテムの配列 |

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

| プロパティ | 型 | 説明 |
|----------|------|-------------|
| `label` | string | リンクの表示テキスト |
| `href` | string | リンク先のURL |

[Dynamic content unavailable in text export]

外部リンク（`http://`または`https://`で始まるURL）は自動的に新しいタブで開き、`rel="noopener noreferrer"`が付与されます。内部リンクはサイトの設定済みベースパスで解決されます。



### copyright

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

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

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

## カラムの追加

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

```ts
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>.`,
},
```

[Dynamic content unavailable in text export]

グリッドレイアウトは大画面で`repeat(auto-fit, minmax(12rem, 1fr))`を使用するため、カラムの幅は利用可能なスペースに基づいて自動的に調整されます。



## フッターの無効化

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

```ts
footer: false as FooterConfig | false,
```

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

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

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

```ts
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`が使用されます。

[Dynamic content unavailable in text export]

外部リンクにはロケールプレフィックスは付与されません。`http://`または`https://`で始まらない内部hrefのみがロケールプレフィックスを受け取ります。



## TypeScript型

フッターの設定は、`@takazudo/zudo-doc/settings`からエクスポートされている以下のインターフェースを使用します：

```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;
  taglist?: FooterTaglistConfig;
}
```

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

`taglist`はオプトインのフッタータグインデックスで、デフォルトでは無効です。詳しくは[フッタータグリストガイド](https://zudo-doc.takazudomodular.com/ja/docs/guides/footer-taglist)を参照してください。

## スタイリング

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

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

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