回顾
接上篇，上次我们在前端项目中，补全了404页面，今天我们要解决的是：自定义logo，首页样式等
目标：
如图可见，我们今天需要完成的是图下红框中的三个自定义，当然，针对这个自定义我们肯定还是需要一定的开源icon和svg图片地址，也会贴在此篇文章中。
为什么要有自己的logo，样式？
- 品牌展示和识别：自定义Logo可以展示公司或品牌的标识和特色，提升品牌识别度和形象。
- 用户体验：通过自定义前端样式，可以打造独特、美观、易用的用户界面，提高用户体验，增加用户粘性。
- 与市场竞争：定制化的前端样式和Logo有助于与竞争对手区分开来，吸引更多用户和客户。
- 符合品牌标准：自定义样式和Logo可以确保网站或应用的设计符合公司的品牌标准，保持一致性和专业性。
- 提高用户信任：精心设计的前端样式和Logo可以增加用户对网站或应用的信任度，提高用户对产品或服务的信心。
- 灵活性和创意：自定义样式可以让设计师和开发者更加灵活和创意地进行设计和布局，满足不同的设计需求。
- 适应不同平台：通过自定义样式，可以让网站或应用在不同的设备和平台上呈现出最佳效果，提供更好的跨平台支持。
- 提高用户留存率：独特的前端样式和Logo可以增加用户对网站或应用的兴趣和好奇心，提高用户留存率。
logo样式的来源有哪些？
在此，链两个文章来让大家进一步了解：
编码
- 将下载下来的logo图标，放在
abandon-web/public/logo.svg - 将下载下来的浏览器图标，放在
abandon-web/public/favicon.ico - 设置logo高度
双击打开logo.svg文件，若无高宽属性，则新增高宽属性，若有，则修改成适合的大小。代码二三行，即为高宽属性。
代码如下：
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24"
width="32"
height="32"
xmlns="http://www.w3.org/2000/svg">
<path
d="m11.6 11c0-.552-.448-1-1-1-1.655 0-4.945 0-6.6 0-.552 0-1 .448-1 1v9c0 .552.448 1 1 1h6.6c.552 0 1-.448 1-1 0-2.092 0-6.908 0-9zm9.4 6c0-.552-.448-1-1-1h-6c-.538 0-1 .477-1 1v3c0 .552.448 1 1 1h6c.552 0 1-.448 1-1zm0-13c0-.552-.448-1-1-1-1.537 0-4.463 0-6 0-.552 0-1 .448-1 1v9.6c0 .552.448 1 1 1h6c.552 0 1-.448 1-1 0-2.194 0-7.406 0-9.6zm-9.4 0c0-.552-.448-1-1-1-1.655 0-4.945 0-6.6 0-.552 0-1 .448-1 1v3.6c0 .552.448 1 1 1h6.6c.552 0 1-.448 1-1 0-1.017 0-2.583 0-3.6z"
fill-rule="nonzero"/>
</svg>
- 添加浏览器图标
更改abandon-web/config/config.ts文件中的属性，将浏览器图标添加到layout中即可。
- 添加样式配置文件
新增abandon-web/config/defaultSettings.ts文件，编辑以下内容：
import { Settings as LayoutSettings } from '@ant-design/pro-components';
/**
* @name
*/
// 声明一个常量 Settings，用于配置 Umi 项目的布局和其他设置
const Settings: LayoutSettings & {
pwa?: boolean; // 是否开启 Progressive Web App（渐进式网络应用）
logo?: string; // 设置项目的 Logo 图片
apiUrl?: string; // 设置项目的 API 地址
wssUrl?: string; // 设置 WebSocket 地址
} = {
navTheme: 'light', // 导航栏主题，这里设置为 'light'，即亮色主题
// 拂晓蓝，用于设置页面的主色调，这里设置为 '#1677ff'
colorPrimary: '#1677ff',
layout: 'side', // 页面布局样式，这里设置为 'side'，即侧边栏布局
contentWidth: 'Fluid', // 内容区域宽度，这里设置为 'Fluid'，即自适应宽度
fixedHeader: false, // 是否固定顶部导航栏，这里设置为 false，即不固定
fixSiderbar: true, // 是否固定侧边栏，这里设置为 true，即固定侧边栏
colorWeak: false, // 是否开启色弱模式，这里设置为 false，即不开启
logo: 'logo.svg', // 设置项目的 Logo 图片，路径为 'logo.svg'
title: 'YY接口测试平台', // 设置项目的标题
pwa: false, // 是否开启 Progressive Web App（渐进式网络应用），这里设置为 false，即不开启
};
export default Settings;
- 在app.ts中新增layout方法
编辑abandon-web/src/app.tsx文件，新增layout方法
export const layout: RunTimeLayoutConfig = ({initialState, setInitialState}) => {
return {
siderWidth: 216,// 侧边栏的宽度
// 自定义 403 页面
childrenRender: (children) => {
if (initialState?.loading) return <PageLoading/>;
return (
<ConfigProvider
renderEmpty={() => <Empty imageStyle={{height: 160}}
description="暂无数据"/>}>
{children}
</ConfigProvider>
);
},
...initialState?.settings,// 将 initialState.settings 中的其他配置项合并到布局中
};
};
验证
最终实现效果，与目标相同，则成功。如图所示：
加群一起讨论相关问题呀！如果群二维码过期了，可以加我个人微信: yyi11yy 我拉你进群~
