布景

笔者最近运用strapi打算快速开发一个无头cms系统，比较了github上的各个开源项目，最终挑选了strapi来进行开发，无疑strapi官方文档做的很好，但是我在开发过程中想要定制化一些需求，比方定制化login页面，定制化admin的dashboard页面，后边去找文档，发现v4现在还不支撑。 咱们其实就想自定义dashborad页面，如下：

自定义 Strapi v4 Admin Dashboard 页面
由于项目是公司内部的项目，所以下面这些介绍和链接对我来说都没有用处。

方针

  • 供给strapiv4自定义页面文字/图片的办法
  • 供给自定义dashboard(任何组件)的办法
  • 供给自定插件的完成计划
  • 接入dockerfile需求装备的详细内容

问题分析

关于上面自定页面的计划，有两个issue都有讨论，一个是login页面的，一个是dashboard的。

  • login: github.com/strapi/stra…
  • dashboard: github.com/strapi/stra…

感兴趣的小伙伴能够去看一下详细的细节。详细便是这一条：github.com/strapi/stra…

自定义 Strapi v4 Admin Dashboard 页面
意思便是现在strapi v4 没有供给像v3那样的文件掩盖操作，v3的办法能够查看 v3自定义admin 所以假如想要定制化dashboard需求运用path-package去打补丁，下面我会介绍strapi供给的各种定制化admin的办法（v4）.

操作步骤

修正之前咱们需求知道的是strapi把admin单独分成了一个包，放到node_modules/@strapi/admin下面的，并且本地启动项目时也是运用的这个文件，只不过本地开发会有一个.catch文件夹用来做本地缓存，并且想要自定义admin，官方主张修正一下服务启动命令，在strapi develop后边加上--watch-admin。详细原因能够查看这儿

strapi develop --watch-admin

ok咱们去@strapi/amdin这个文件夹下看一下：

自定义 Strapi v4 Admin Dashboard 页面
能够发现这个文件的路径是@strapi/admin/admin/src/pages/AuthPage/components/Login/index.js，这个便是admin系统的登录页面。仔细的小伙伴能够发现登录页面title是由Auth.form.welcome.subtitle这id传入的（如下），所以咱们猜测它大概率是能够装备的。

{formatMessage({
  id: 'Auth.form.welcome.subtitle',
  defaultMessage: 'Log in to your Strapi account',
})}

于是回到官网，下面这是官网供给阐明，让咱们去src/admin/app.tsx下面去装备就行（需求手动把app.example.tsx/.js修正成app.tsx/js）

Translation key/value pairs are declared in@strapi/admin/admin/src/translations/[language-name].jsonfiles. These keys can be extended through theconfig.translationskey:

修正文字/图片

这儿我供给一下我的装备

// app.js / app.tsx
import Logo from './extensions/assets/logo.png';
import Login from "./extensions/assets/logo.svg"
export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: Login,
    },
   // Replace the favicon
    head: {
      favicon: Logo,
    },
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: Logo,
    },
    // Override or extend the theme
    theme: {
      colors: {
        primary100: '#f6ecfc',
        primary200: '#e0c1f4',
        primary500: '#ac73e6',
        primary600: '#9736e8',
        primary700: '#8312d1',
        danger700: '#b72b1a'
      },
    },
    // Extend the translations
    translations: {
      en:{
        Users: 'Utilisateurs',
        // "app.components.HomePage.welcome.again": "Hi Chlo!",
        "app.components.LeftMenu.navbrand.title": "Dashboard",
        "app.components.LeftMenu.navbrand.workplace": "...",
        'Auth.form.welcome.title':'Welcome to  Admin',
        'Auth.form.welcome.subtitle':' Admin System is a Strapi-based admin system for managing Tusen data.',
        'app.components.HomePage.welcomeBlock.content.again': 'Welcome to  Admin',
      }
    },
   // Disable video tutorials
    tutorials: false,
   // Disable notifications about new Strapi releases
    notifications: { releases: false },
  },
  bootstrap(app) {
  },
};
  • 能够看到其实许多装备都能够在app.tsx中装备，这儿Auth.form.welcome.title其实修正的login页面的title，详细怎样找我现已告知大家了，直接去源码里边翻就行，仔细的同学就会发现这种装备和i18n很相似，其实详细完成便是用了i18n。
  • 当然这儿还有其他的一些装备比方logo、favicon等等，直接导入运用就行，这儿的一些装备官网都有阐明，这儿再赘述，假如运用ts的同学可能需求去tsconfig.json装备一下.svg/png这些的声明，不然会ts报错。详细操作如下: 增加一个index.d.ts参加如下代码，然后在tsconfig.json中include一下就行。
declare module '*.svg'

留意： 假如没有生效，需求重启一下项目

修正页面、自定义页面

由于官网没有供给详细的自定义页面的办法，所以只能采用上面提到的path-package去做，详细完成如下：

设置

  1. 经过装置补丁包npm i patch-package
  2. 假如尚未包括在您的package.json中，请装置@strapi /admin****npm i @strapi/admin
  3. 将以下脚本增加到package.json：
    • "generate-admin-patches": "npx patch-package @strapi/admin"
    • "apply-admin-patches": "npx patch-package"

用法

  1. 更改相关文件，可能在/node_modules/@strapi/admin/admin/src/pages
  2. 经过保存更改npm run generate-admin-patches
  3. 然后咱们能够应用这些补丁了，假如咱们更新 strapi 或当包最初装置包时，经过运转npm run apply-admin-patches就行
举个比如：

比方我去/node_modules/@strapi/admin/admin/src/pages/HomePage/index.js修正某段代码如下：

自定义 Strapi v4 Admin Dashboard 页面
这儿的文件其实便是admin中的dashboard页面，我把下面的一些链接都给注释掉了。然后保存履行npm run generate-admin-patches，履行成功会在根路径生成patches的文件夹，这个便是一个patch记录，其实便是保存上次的修正操作，然后把这个操作记录下来，下次npm包更新时，去从头patch上去，完成一个补丁的作用，如下：

自定义 Strapi v4 Admin Dashboard 页面

这样咱们部署的时分履行一下npm run apply-admin-patches就会把这个补丁打上。

dockerfile修正

由于本项目是用docker去部署的所以需求在dockerfile中参加如下代码:

FROM node:16-alpine as build
# Installing libvips-dev for sharp Compatibility
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /opt/
COPY ./package.json ./yarn.lock ./
ENV PATH /opt/node_modules/.bin:$PATH
RUN yarn config set network-timeout 600000 -g && yarn install --production
# 这儿便是增加的两行代码
COPY patches ./patches
RUN npx patch-package
WORKDIR /opt/app
COPY ./ .
RUN yarn build
FROM node:16-alpine
RUN apk add --no-cache vips-dev
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /opt/app
COPY --from=build /opt/node_modules ./node_modules
ENV PATH /opt/node_modules/.bin:$PATH
COPY --from=build /opt/app ./
EXPOSE 1337
CMD ["yarn", "start"]

假如不适用docker打包，也能够在打包的时分留意履行npm run apply-admin-patches就行。

自定义插件

假如你想自己开发一些自己的dashboard，认为上面的方法不行灵敏，也可运用custom plugin的方法去做，其实官网也供给详细的完成步骤：地址。 这儿简单提一下插件的创建和运用：

# yarn
yarn strapi generate plugin

$ strapi generate plugin
?Plugin name todo

Strapi 创建了一个新的./src/plugins/todo文件夹，其中包括 v4 插件的默认文件。 然后去config/plugins.ts/中激活插件，没有这个文件就直接新建一个就行。

// ./config/plugins.ts
module.exports = {
  todo: {
    enabled: true,
    resolve: './src/plugins/todo',
  },
};

这样插件就初始化成功了。 详细怎么去自定义里边的内容这儿供给一个链接：How to create a Strapi v4 plugin
: Server customization，里边讲的很详细，能够自己学习。

参考链接：

  • Customize the Admin Dashboard (Welcome Page) [v4]
  • How to create a Strapi v4 plugin
: Server customization
  • github.com/strapi/stra…
  • docs.strapi.io/