Skip to main content

フッタのカスタマイズ (ページ単位 編)

目的​

  • ページ (各 md ファイル) 単位のフッタをカスタマイズする

テンプレートを生成する (Swizzle する)​

bash
npx docusaurus swizzle @docusaurus/theme-classic DocItem/Footer

引数の DocItem/Footer というのが「ページ単位」のフッタを表している。

→ src/theme/DocItem/Footer/index.tsx が生成される

選択肢

  • 1: TypeScript
  • 2: Eject

参考：用語

  • wrap : 親の動作を維持しつつ機能追加したいとき
  • eject : 任意の場所に要素を追加・削除したいとき

生成されたコードの説明とカスタマイズ​

この例では、markdown ページの 一番下に、自作のフッタと、AdSense を組み込む。

凡例

  • ✓ : カスタマイズポイント
  • ★ : ただの説明
ts
import React, {type ReactNode} from 'react';

import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/plugin-content-docs/client';
import TagsListInline from '@theme/TagsListInline';

import EditMetaRow from '@theme/EditMetaRow';

export default function DocItemFooter(): ReactNode {
  const {metadata} = useDoc();
  const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;

  const canDisplayTagsRow = tags.length > 0; // ← ★ frontmatter の tags 有無
  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy); // ← ★ docusaurus.config.ts の presets.classic.docs.editUrl 設定の有無

  /* ★ tags, editUrl どちらもない場合にスキップしようとしてる部分
     ✓ 固定でフッタ入れたい意図には反するので削除するのが良い
      ↓
  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;

  if (!canDisplayFooter) {
    return null;
  }
  */

   useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (e) {
      console.warn('AdSense push failed:', e);
    }
  }, []);

  return (
<>
    <footer
      className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
      {canDisplayTagsRow && (
        <div
          className={clsx(
            'row margin-top--sm',
            ThemeClassNames.docs.docFooterTagsRow,
          )}>
          <div className="col">
            <TagsListInline tags={tags} />
          </div>
        </div>
      )}
      {canDisplayEditMetaRow && (
        <EditMetaRow
          className={clsx(
            'margin-top--sm',
            ThemeClassNames.docs.docFooterEditMetaRow,
          )}
          editUrl={editUrl}
          lastUpdatedAt={lastUpdatedAt}
          lastUpdatedBy={lastUpdatedBy}
        />
      )}
    </footer>

      {/* ✅ 自前のフッタをここに書く */}
	  <div>
		aaaa
	  </div>
      {/* ✅ 広告ブロックをここに書く */}
      <div style={{ marginTop: '2rem', textAlign: 'center' }}>
        <ins
          className="adsbygoogle"
          style={{ display: 'block' }}
          data-ad-client="ca-pub-XXXXXXXXXXXX"
          data-ad-slot="YYYYYYYYYY"
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
      </div>
      {/* ★ Previous/Next は、この下の位置にレンダリングされる */}

</>

  );
}

このあたりの設定は、「ページ全体」のフッタで使われるので、
ここでは関係ない。

docusaurus.config.ts
themeConfig: {
  ...,
  footer: {
    style: 'dark',
    links: [
Last updated on