概要
使用 Antd Pro 來開發前端項目時, 生成的項目模板中, 一些基本的元素都是和 Antd Pro 項目相關的. 比如, 系統 title, 圖標, logo, footer 等等.
這些基本的元素在實際的項目都需要替換. Antd Pro 由於大部分元素都基於配置, 想要替換這些通用的元素並不是那么直觀, 這里把替換這些通用元素的方法做個總結.
通用元素
通用元素有 2 個地方, 一個是主頁面, 一個是 loading 的頁面
如上圖, 3 個地方希望切換成自己的元素, 從而和具體項目想匹配
- 標簽頁上的圖標
- logo 和 系統名稱
- footer 上的版權聲明
還有 loading 頁面也是 Antd Pro 的相關信息
修改的方式
主頁面
標簽上的圖標
標簽上的圖標在 /public/favicon.png , 只要替換這個圖片即可.
調整的位置在 /src/pages/document.ejs 中:
1 <title>xxx系統</title>
2 <link rel="icon" href="/favicon.png" type="image/x-icon" />
這里的 xxx 系統 是在頁面加載時, 顯示在 標簽上 的名字
logo 和 系統名稱
logo 圖片的位置在 /src/assets/logo.svg, 替換這個文件就可以改變 logo
系統名稱調整位置在 /config/defaultSettings.js
1 export default {
2 navTheme: 'dark',
3 // 省略部分...
4 title: 'xxx 系統', // 這里配置系統名稱
5 // 省略部分...
6 };
footer 的配置
footer 的配置在 /src/layouts/BasicLayout.jsx
1 const defaultFooterDom = <DefaultFooter copyright="2020 xxxx有限公司" links={[]} />;
刪除 links 中的內容, 就不會有 github 之類的信息了
loading 頁面
loading 頁面的配置比較隱蔽, 在 /src/pages/document.ejs 中:
1 <img src="/logo.svg" alt="logo" width="256" />
2 <div class="page-loading-warp">
3 <div class="ant-spin ant-spin-lg ant-spin-spinning">
4 <span class="ant-spin-dot ant-spin-dot-spin"
5 ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
6 ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
7 ></span>
8 </div>
9 </div>
10 <div style="display: flex; justify-content: center; align-items: center;">
11 <img src="/logo.svg" width="32" style="margin-right: 8px;" />
12 文字文字文字
13 </div>
上面 loading 頁面截圖上紅框內的 Pro 文字其實是圖片, 這里我將其替換成 logo.svg 文件了, 可以根據情況換成其他文件也行
這里需要將 logo.svg 文件在 /src/public 下也放一份
最終效果
