Zenn
💭

Strapiの管理画面をカスタマイズする

2020/12/08に公開
React
Strapi
customization
admin
override
tech

この記事は Strapi Advent Calendar の10日目の記事です。

TL;DR

  • Strapiではデフォルトの管理画面のUIを自由に編集することができます
  • strapi-adminのパッケージを参考にadminフォルダに配置することで既存の実装をオーバーライドすることができ、Reactで自由に編集することができます

Strapiではデフォルトで管理画面となるadminパネルが用意されていますが、要件によってはそれを変更したい場合があるかもしれません。Strapiではadminパネルを自由に編集する機構が実装されており、それが可能になっています。
本記事では、Strapiのadminパネルを編集する方法を紹介します。

動作環境

この記事では

strapi 3.3.4

を利用しています。

Adminパネルを編集する

次の3つのステップで編集が可能です。

ファイルを特定する

node_modulesに格納されている、strapi-adminのフォルダには、実際にadminパネルで使用されているソースコードが格納されています。どういったファイルがあるかどうかはこのページを参考にすることができます。この中で変更したいファイルを特定します。今回は HomePage を変更するので、このファイルに目星をつけます。

取り出して設置する

ファイルが見つかったら、それを適切な場所にコピーします。プロジェクトルートに admin というフォルダを作成し、それ以降はnode_modulesにそのファイルが設置されていたとおりにフォルダを切り、ファイルを設置します。

$ cs <project-root>
$ mkdir -p ./admin/src/containers/HomePage
$ cp ./node_modules/strapi-admin/admin/src/containers/HomePage/index.js ./admin/src/containers/HomePage/

カスタマイズする

取り出して設置したファイルを編集しましょう。今回は公式ドキュメントを参考に、シンプルなデザインに変更してしまいます。

import React, { memo } from 'react';

import { Block, Container } from './components';

const HomePage = ({ global: { plugins }, history: { push } }) => {
  return (
    <>
      <Container className="container-fluid">
        <div className="row">
          <div className="col-12">
            <Block>管理画面を編集</Block>
          </div>
        </div>
      </Container>
    </>
  );
};

export default memo(HomePage);

adminパネルを編集した場合ビルドし直す必要があります。開発環境では以下のコマンドでホットリロードで開発を進めることができます。

$ npm run develop -- --watch-admin

http://localhost:8000/ を開いてログインすると変更を確認することができます。

Before After

まとめ

Strapiでは美麗なadminパネルが提供されていますが、それらも自由に変更することができます。今回はHomePageを例に挙げましたが、他の画面やサイドバー、サイドバー上のロゴ表示なども自由に変更することができます。デザイン上の理由でStrapiを懸念していた方の手助けになれば幸いです。

リファレンス

Discussion