首頁 >web前端 >js教程 >如何自訂 Strapi 儀表板/首頁:正確的方法

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

DDD
DDD原創
2024-12-12 20:18:16576瀏覽

How to customize Strapi Dashboard / Home Page: The Right Way

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 中提供的解決方案

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

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

以上是如何自訂 Strapi 儀表板/首頁:正確的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn