Strapiの管理画面をカスタマイズする
この記事は 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