このブログのセットアップ方法

docusaurus のカスタマイズ

docusaurus のカスタマイズ

swizzle でカスタマイズする

npx docusaurus swizzle @docusaurus/theme-classic BlogLayout
npx docusaurus swizzle @docusaurus/theme-classic BlogPostPage

// src/theme/BlogLayout/index.tsx
import type { Props as DefaultProps } from "@theme/BlogLayout";
export type Props = DefaultProps & {
  navigation: JSX.Element;
};

export default function BlogLayout(props: Props): JSX.Element {
  const { sidebar, toc, children, navigation, ...layoutProps } = props;
  const mainColSize = "col--9";

  return (
    <Layout {...layoutProps}>
      <div className="container margin-vert--md">
        <div className="row">
          <main className={clsx("col", mainColSize)}>
            {children}
            {navigation && <div>{navigation}</div>}
          </main>
          <BlogSidebar sidebar={sidebar} />
        </div>
      </div>
    </Layout>
  );
}

// src/theme/BlogPostPage/index.tsx
// navigation を追加
function BlogPostPageContent({
  sidebar,
  children,
}: {
  sidebar: BlogSidebar;
  children: ReactNode;
}): JSX.Element {
  const { metadata, toc } = useBlogPost();
  const { nextItem, prevItem, frontMatter } = metadata;
  const {
    hide_table_of_contents: hideTableOfContents,
    toc_min_heading_level: tocMinHeadingLevel,
    toc_max_heading_level: tocMaxHeadingLevel,
  } = frontMatter;
  return (
    <BlogLayout
      sidebar={sidebar}
      toc={
        !hideTableOfContents && toc.length > 0 ? (
          <TOC
            toc={toc}
            minHeadingLevel={tocMinHeadingLevel}
            maxHeadingLevel={tocMaxHeadingLevel}
          />
        ) : undefined
      }
      // @ts-ignore
      // update BlogLayout to accept navigation prop
      navigation={
        (nextItem || prevItem) && (
          <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
        )
      }
    >
      <ContentVisibility metadata={metadata} />

      <BlogPostItem>{children}</BlogPostItem>
    </BlogLayout>
  );
}