🐈

管理画面フレームワーク「AdminLTE 3 React」のカスタマイズ方法

2023/01/12に公開約3,200字

Reactで動く管理画面フレームワーク「AdminLTE 3」を使ってみたので、
備忘録も兼ねてカスタマイズ方法(ページ追加とか)を書いてみる。


導入直後はこんな感じ

導入方法

GitHub から git clone する。

git clone https://github.com/erdkse/adminlte-3-react.git
cd adminlte-3-react
npm install
npm run start

カスタマイズしてみる

ページ追加

  1. src/pages/Blank.tsx がテンプレとして使えそうなので、コピーして Hoge.tsx にする
src/pages/Hoge.tsx
・・・
- const Blank = () => {
+ const Hoge = () => {
・・・
- export default Blank;
+ export default Blank;
  1. src/App.tsx にルートを追加する。
    追加すると http://localhost:3000/hoge でアクセスできるようになる。
src/App.tsx
・・・
  import Blank from '@pages/Blank';
+ import Hoge from '@pages/Hoge';
・・・
  <Route path="/" element={<PrivateRoute />}>
    <Route path="/" element={<Main />}>
+     <Route path="/hoge" element={<Hoge />} />
      <Route path="/sub-menu-2" element={<Blank />} />

サイドバーへボタン追加

  1. サイドバーにボタンを追加する場合は src/modules/main/menu-sidebar/MenuSidebar.tsx を編集する
src/modules/main/menu-sidebar/MenuSidebar.tsx
・・・
  {
    name: i18n.t('menusidebar.label.blank'),
    icon: 'fas fa-wrench nav-icon',
    path: '/blank'
  },
+ {
+   name: 'Hoge',
+   icon: 'fas fa-wrench nav-icon',
+   path: '/hoge'
+ },
  1. なお上記3行目のように i18next での言語切り替えにも対応している。

「Hoge」を対応させたい場合は name: i18n.t('menusidebar.label.hoge'), にして、
src/locales/○○○/translation.json に追記すればOK。

src/locales/en/translation.json
  "menusidebar": {
    "label": {
      "dashboard": "Dashboard",
+     "hoge": "Hoge",
  1. アイコンはFont Awesomeが使われているので、
    ここから検索して、好きな物に変えることができる。
    ※ただし無料版のアイコンのみ
src/modules/main/menu-sidebar/MenuSidebar.tsx
・・・
  {
    name: 'Hoge',
-   icon: 'fas fa-wrench nav-icon',
+   icon: 'fas fa-radiation nav-icon',
    path: '/hoge'
  },

言語リストに日本語を追加

翻訳データの作成が地獄(100単語弱)

  1. src/locales/en をフォルダ毎コピーして、src/locales/ja にする
  2. src/locales/ja/translation.json を日本語に翻訳する
    ここでは例として、日本語選択時に「Hoge→ほげ」と表示されるようにする
src/locales/ja/translation.json
-  "hoge": "Hoge",
+  "hoge": "ほげ",
  1. src/utils/i18n.ts に日本語を追加する
src/utils/i18n.ts
  import translationEN from '../locales/en/translation.json';
+ import translationJA from '../locales/ja/translation.json';
  import translationTR from '../locales/tr/translation.json';
  ・・・
  en: {
    translation: translationEN
  },
+ ja: {
+   translation: translationJA
+ },
  tr: {

初期値を日本語にしたい場合はこうする

src/utils/i18n.ts
  i18n
  ・・・
-     lng: 'en',
+     lng: 'ja',
  1. src/modules/main/header/languages-dropdown/LanguagesDropdown.tsx を編集してリストに追加する
src/modules/main/header/languages-dropdown/LanguagesDropdown.tsx
  {
    key: 'en',
    icon: 'flag-icon-us',
    label: 'header.language.english'
  },
+ {
+   key: 'ja',
+   icon: 'flag-icon-jp',
+   label: 'header.language.japanese'
+ },
  1. ラベルを追加する
src/locales/ja/translation.json
   "english": "English",
+  "japanese": "日本語",


言語リストに日本語が追加された

随時追加予定

Discussion

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