Strapi v4を書き換える

Strapiの売りはカスタマイズ性なのですが、そのあたりの説明をv4以降であまり見かけないので書いてみることにします。

Strapiの画面の編集は、node_modulesの中を見に行って書き換え、それをpatch-packageで適応するという形式で行います。

どこを見に行けばいいのか

node_modules/@strapi/admin/admin/src/pages/Admin/index.jsを見に行けば、どうすればいいのか大体わかります。
本当にこれさえ見ればなんとなく察しがつくので、正直これを紹介した時点でこの記事の90%は終わりです。

ここでは、パッケージ内から様々なコンポーネントをインポートし、それらをパスに合わせて管理画面を書き換える処理が行われています。
なので、だいたいここに記載されている相対パスの先の記述を書き換えればよいです。

たとえば、/admin/の箇所は以下のように指定されているので、

const HomePage = lazy(() => import(/* webpackChunkName: "Admin_homePage" */ '../HomePage'));

node_modules/@strapi/admin/admin/src/pages/HomePage/index.jsを書き換えるといった具合です

実際に書き換えてみる

ためしに、管理画面のトップページに適当な文字列を挿入してみます。

node_modules/@strapi/admin/admin/src/pages/Admin/index.js

//...
  return (
    <Layout>
      <FormattedMessage id="HomePage.helmet.title" defaultMessage="Homepage">
        {(title) => <Helmet title={title[0]} />}
      </FormattedMessage>
      <Main>
        <LogoContainer>
          <img alt="" aria-hidden src={cornerOrnamentPath} />
        </LogoContainer>
        <Box padding={10}>
          <Grid>
            <GridItem col={8} s={12}>
              <HomeHeader
                onCreateCT={handleClick}
                hasCreatedContentType={hasAlreadyCreatedContentTypes}
              />
            </GridItem>
          </Grid>
          <Grid gap={6}>
            <GridItem col={8} s={12}>
              {showGuidedTour ? <GuidedTourHomepage /> : <ContentBlocks />}
            </GridItem>
            <GridItem col={4} s={12}>
              <div>
                // 追加
                <p style={{color: "#ffffff"}}>おほげおほげ</p>
                <SocialLinks />
              </div>
            </GridItem>
          </Grid>
        </Box>
      </Main>
    </Layout>
  );
// ...

それでは実行してみましょう。

注意点として、普段はyarn developとかnpm run developなんかで実行するかと思いますが、それではdist/を吹き飛ばして再度buildしないと反映されないので、従来のコマンドではなく以下のコマンドで実行する必要があります。

yarn develop -- --watch-admin
# or 
npm run develop -- --watch-admin

実行結果はこちら。

Join thne communityの上に、謎の文字列おほげおほげが追加されていることがわかると思います。

もっと細かい書き換えとなると色々慣れが必要ですが、StrapiはReactの関数コンポーネントで記載されているので、Reactに書きなれていれば特に不自由することはないかと思います。

patch-packageでinstall時に上書きさせるようにする

それでは、これを本番に反映します。
patch-packageをインストールし、postinstallを追記します。

yarn add patch-package

package.json

// ...
  "scripts": {
    // ...
    "postinstall": "patch-package"
  }
// ...

そして以下を実行

npx patch-package @strapi/admin

今回は@strapi/adminを編集したので上記コマンドとなっています。sdmin以外を編集した場合はそれに合わせてください。

実行すると、patches/が生成され、その中に@strapi+admin+<version>patchというファイルが生成されます。
中を見るとわかりますが、元のライブラリとの差分を記載したファイルです。

これで準備完了です。
こうすることで、node_modules/を吹き飛ばしても、yarn installなどのコマンドを実行した際に差分をもとに上書いてくれます。