strapi v4 ,自定义项目LOGO和设置中文语言

作者微信 m173net  

框架项目QQ交流群：7960107

一，测试环境

本教程在strapi v4.0版本中测试通过

二，官方说明文档

在Development> Admin panel customization > Configuration options 文档中有相关介绍

Admin panel customization - Strapi Developer Docs

三，详细配置

通过修改项目./src/admin/app.js 的配置文件，可以实现 项目logo,项目翻译文件、项目界面UI主题颜色等配置。

所有config JSON对象中引用的静态资源文件，都应该存放在./src/admin/extensions/文件夹中，

并在./src/admin/app.js.中导入才能使用

官方文档配置选项介绍

The config object found at ./src/admin/app.js stores the admin panel configuration.

Any file used by the config object (e.g. a custom logo) should be placed in the ./admin/extensions/ folder and imported inside ./src/admin/app.js.

译文：

config 对象./src/admin/app.js存储管理面板配置。

所有config JSON对象中引用的静态资源文件，都应该存放在./src/admin/extensions/文件夹中，

并在./src/admin/app.js.中导入才能使用

该config对象接受以下参数：

范围	类型	描述
auth	目的	接受一个logo键来替换登录屏幕上的默认 Strapi徽标
head	目的	接受一个favicon键来替换默认的 Strapi图标
locales	字符串数组	定义可用语言环境（请参阅更新语言环境）
translations	目的	扩展翻译
menu	目的	在主导航中接受logo更改徽标的键
theme	目的	覆盖或扩展主题
tutorial	布尔值	切换显示视频教程
notifications	目的	接受release键（布尔值）以切换显示有关新版本的通知

 ./admin/src/app.js 完整的配置文件

// path: ./admin/src/app.js

import AuthLogo from './extensions/my-logo.png';
import MenuLogo from './extensions/logo.png';
import favicon from './extensions/favicon.ico';

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
   // Replace the favicon
    head: {
      favicon: favicon,
    },
    // Add a new locale, other than 'en'
    locales: ['fr', 'de'],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
      colors: {
        alternative100: '#f6ecfc',
        alternative200: '#e0c1f4',
        alternative500: '#ac73e6',
        alternative600: '#9736e8',
        alternative700: '#8312d1',
        danger700: '#b72b1a'
      },
    },
    // Extend the translations
    translations: {
      fr: {
        'Auth.form.email.label': 'test',
        Users: 'Utilisateurs',
        City: 'CITY (FRENCH)',
        // Customize the label of the Content Manager table.
        Id: 'ID french',
      },
    },
   // Disable video tutorials
    tutorials: false,
   // Disable notifications about new Strapi releases
    notifications: { release: false },
  },

  bootstrap() {},
};

扩展翻译

Translation key/value pairs are declared in ./translations/[language-name].json files. These keys can be extended through the config.translations key:

// path: ./src/admin/app.js

export default {
  config: {
    locales: ['fr'],
    translations: {
      fr: {
        or: 'OR',
        'request.error.model.unknown': "This model doesn't exist",
        skipToContent: 'Skip to content',
        submit: 'Submit',
        Totos: 'tata',
        "content-type-builder.my-translation-key": "test"
      },
    },
  },
  bootstrap() {},
};

If more translations files should be added, place them in /extensions/translations folder.