🦖

Docusaurusのメニュー等をTypeScriptでカスタマイズする

3 min read

前提

package.json
package.json
{
  (省略),
  "dependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.14.0",
    "@docusaurus/core": "^2.0.0-beta.0",
    "@docusaurus/plugin-pwa": "^2.0.0-beta.0",
    "@docusaurus/preset-classic": "^2.0.0-beta.0",
    "@mdx-js/react": "^1.6.21",
    "@saucelabs/theme-github-codeblock": "^0.0.4",
    "@svgr/webpack": "^5.5.0",
    "clsx": "^1.1.1",
    "docusaurus2-dotenv": "^1.4.0",
    "dotenv": "^8.5.1",
    "file-loader": "^6.2.0",
    "hast-util-is-element": "1.1.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "rehype-katex": "4",
    "remark-custom-blocks": "^2.5.1",
    "remark-math": "3",
    "url-loader": "^4.1.1"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.3",
    "@docusaurus/module-type-aliases": "^2.0.0-beta.1",
    "@tsconfig/docusaurus": "^1.0.2",
    "@types/react": "^17.0.11",
    "@types/react-helmet": "^6.1.1",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.22.1",
    "@typescript-eslint/parser": "^4.22.1",
    "eslint": "^7.25.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-header": "^3.1.1",
    "eslint-plugin-mdx": "^1.12.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "husky": "^6.0.0",
    "prettier": "^2.3.0",
    "pretty-quick": "^3.1.0",
    "raw-loader": "^4.0.2",
    "typescript": "^4.3.4"
  },
  "license": "MIT"
}

https://docusaurus.io/docs/using-themes#swizzling-theme-components

Docusaurusのswizzleを使ったことがある前提で解説する。

記事書いてる現在のベータ版では、「テーマAPIの将来的な変更」を理由として、swizzleは「非推奨」になっている。どうしてもカスタマイズしたい時だけswizzleを使おう。

参考記事

https://docusaurus.io/docs/typescript-support#swizzling-typescript-theme-components

Docusaurusのドキュメントのこちらのページを参考にする。

TS導入の準備

yarn add --dev typescript @docusaurus/module-type-aliases @types/react @types/react-router-dom @types/react-helmet @tsconfig/docusaurus
tsconfig.json
{
  "extends": "@tsconfig/docusaurus/tsconfig.json",
  "include": ["src/"]
}

ts関連のパッケージを入れて、tsconfigを用意する。

Swizzleする

ではコンポーネントをいじっていこう。

yarn run swizzle @docusaurus/theme-classic NavBar --danger --typescript

サイトの上に表示されるメニュー。

DocSidebar

yarn run swizzle @docusaurus/theme-classic DocSidebar --danger --typescript

サイドメニュー。

DocItem

yarn run swizzle @docusaurus/theme-classic DocItem --danger --typescript

ページの内容部分。

EditThisPage

yarn run swizzle @docusaurus/theme-classic EditThisPage --danger --typescript

「このページを編集」の部分。

編集

すでにjsでカスタマイズしている場合は、こんな感じで横並べにしていじっていこう。

ちなみに、うちのサイトだとswizzleしてからDocusaurus自体が更新されており、新しい MainHeading コンポーネントなどに注意が必要だった。

swizzleするとCSSも上書きされてしまうので、CSSをいじっていた人は十分注意。

GitHubで編集を提案

Discussion

ログインするとコメントできます