笔者最近使用
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:
修改文字/图片
这里我提供一下我的配置
import Logo from './extensions/assets/logo.png';
import Login from "./extensions/assets/logo.svg"
export default {
config: {
auth: {
logo: Login,
head: {
favicon: Logo,
menu: {
logo: Logo,
theme: {
colors: {
primary100: '#f6ecfc',
primary200: '#e0c1f4',
primary500: '#ac73e6',
primary600: '#9736e8',
primary700: '#8312d1',
danger700: '#b72b1a'
translations: {
en:{
Users: 'Utilisateurs',
"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',
tutorials: false,
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/中激活插件，没有这个文件就直接新建一个就行。
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/
harperYG
前端工程师 @ 某自动驾驶公司
粉丝
