自定义 Strapi v4 Admin Dashboard 页面背景笔者最近使用strapi打算快速开发一个无头cms

背景

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

因为项目是公司内部的项目，所以下面这些介绍和链接对我来说都没有用处。

目标

提供strapiv4自定义页面文字/图片的方法
提供自定义dashboard(任何组件)的方法
提供自定插件的实现方案
接入dockerfile需要配置的具体内容

问题分析

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

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

感兴趣的小伙伴可以去看一下具体的细节。具体就是这一条：github.com/strapi/stra…

意思就是目前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/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].json files. These keys can be extended through the config.translations key:

修改文字/图片

这里我提供一下我的配置

// 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去做，具体实现如下：

设置

通过安装补丁包npm i patch-package
如果尚未包含在您的package.json中，请安装@strapi /admin****npm i @strapi/admin
将以下脚本添加到package.json：
- "generate-admin-patches": "npx patch-package @strapi/admin"
- "apply-admin-patches": "npx patch-package"

用法

更改相关文件，可能在/node_modules/@strapi/admin/admin/src/pages
通过保存更改npm run generate-admin-patches
然后我们可以应用这些补丁了，如果我们更新 strapi 或当包最初安装包时，通过运行npm run apply-admin-patches就行

举个例子：

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

这里的文件其实就是admin中的dashboard页面，我把下面的一些链接都给注释掉了。然后保存执行npm run generate-admin-patches，执行成功会在根路径生成patches的文件夹，这个就是一个patch记录，其实就是保存上次的修改操作，然后把这个操作记录下来，下次npm包更新时，去重新patch上去，实现一个补丁的效果，如下：

这样我们部署的时候执行一下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，里面讲的很详细，可以自己学习。

自定义 Strapi v4 Admin Dashboard 页面

背景

目标