Skip to main content

フッタのカスタマイズ (サイト全体 編)

  • サイト全体 単位のフッタをカスタマイズする

前提​

  • スクロールしないと出てこない領域
  • なので、下に広告挟むとかの用途には向いてない

docuaurus.config.ts に設定する。

docusaurus.config.ts
themeConfig: {
  ...,
  footer: {
    style: 'dark',
    links: [
      {
        title: 'Site',
        items: [
          { label: 'app', href: 'https://apps.sugoi-domain.com/', },
          { label: 'tips', href: 'https://tips.sugoi-domain.com/', },
        ],
      },
      {
        title: 'Me',
        items: [
          { label: 'home', href: 'https://www.sugoi-domain.com/', },
          { label: 'X', href: 'https://x.com/sugoi-account',  },
        ],
      },
    ],
    copyright: `Copyright © ${new Date().getFullYear()} sugoi-developper.`,
  },
}

テンプレートを生成してカスタマイズ (Swizzle する)​

bash
npx docusaurus swizzle @docusaurus/theme-classic Footer

引数の Footer というのが「サイト全体」のフッタを表している

→ src/theme/Footer/index.tsx が生成されます。

→ が、やりたいこと (スクロールせずとも下に固定高さを確保) は出来ないので続きは やめた

Swizzle したもの消したい場合

カスタマイズをやめたのでデフォルト動作に戻したいが、
Swizzle を消すコマンドといったものは特に用意されていない。

→ まるっと消すだけで良い

bash
rm -rf src/theme/Footer
Last updated on