如何自訂 Strapi 儀表板/首頁：正確的方法

Strapi 是一個強大的無頭 CMS，提供強大的管理面板。但有時，您想將其打造為自己的品牌，但 Strapi 官方文件錯過了自訂管理主頁的操作方法。本快速指南向您展示如何以正確且簡單的方式自訂 Strapi 的管理面板。

將 src/admin/app.example.tsx 重新命名為 app.tsx
將內容更改為

// src/admin/app.tsx

import type { StrapiApp } from "@strapi/strapi/admin"

export default {
  config: {
    locales: [],
  },
  bootstrap() {},
}

只需使用您的自訂主頁建立一個 Homepage.tsx 檔案

// src/admin/Homepage.tsx

const Homepage = () => {
  return (
    <div>



<p>This is how the final version of app.tsx looks like and you are done. ?<br>
</p>

<pre class="brush:php;toolbar:false">// src/admin/app.tsx

import type { StrapiApp } from "@strapi/strapi/admin"

export default {
  config: {
    tutorials: false,
    locales: [],
  },
  bootstrap() {},
  register(app: StrapiApp) {
    const indexRoute = app.router.routes.find(({ index }) => index)
    if (!indexRoute) throw new Error("unable to find index page")
    indexRoute.lazy = async () => {
      const { Homepage } = await import("./Homepage")
      return { Component: Homepage }
    }
  },
}

感謝 Andrew Bone 在 https://feedback.strapi.io/feature-requests/p/customize-the-admin-panel-welcome-page-strapi-5 中提供的解決方案

感謝您的閱讀！我希望你學到了一些有用的東西。

對改進本指南有疑問或想法嗎？請在下面的評論中告訴我