如何自定义 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 (
    

      Welcome to the CMS!
    
  )
}

export { Homepage }

这就是 app.tsx 的最终版本的样子，你已经完成了。😉

// 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 }
    }
  },
}