1 前端开发环境搭建
（1）拉取分支代码
（2）前端开发推荐使用VsCode编辑器打开项目
打开 harbor\src\portal 文件夹，该文件夹为Harbor对应的前端代码所在位置
（3）在portal文件夹下创建名为 proxy.config.json 的文件，该文件用于代理请求到后端
proxy.config.json具体内容如下，将hostname替换为对应的后端服务地址即可
{
"/api/*": {
"target": "https://hostname",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
},
"/service/*": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/c/login": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/c/oidc/login": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/sign_in": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/c/log_out": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/sendEmail": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/language": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/reset": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/c/userExists": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/reset_password": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/i18n/lang/*.json": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/swagger.json": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/swagger2.json": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/chartrepo/*": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
},
"/LICENSE": {
"target": "https://hostname",
"secure": false,
"logLevel": "debug"
}
}
（4）打开终端，切换到portal文件夹，运行 npm install 命令安装项目依赖的npm包
（5）运行项目
npm相关依赖包安装完成后，使用npm run start命令启动项目
出现下图内容时，表示项目启动成功。
项目启动成功后，浏览器地址栏输入 https://localhost:4200 即可看到Harbor的UI界面
2 修改示例
2.1 关于官方提供的修改说明
官方在 https://goharbor.io/docs/2.6.0/build-customize-contribute/customize-look-feel/ 给出的关于修改UI界面和背景的说明。相关配置均保存在 harbor\src\portal\src\目录下的 setting.json 配置文件，这个配置文件在Harbor启动时加载。
setting.json 配置文件内容如下
{
"headerBgColor": {
"darkMode": "",
"lightMode": ""
},
"loginBgImg": "",
"loginTitle": "",
"product": {
"name": "",
"logo": "",
"introduction": ""
}
}其中，各个字段解释如下
headerBgColor : 页眉的背景颜色，支持 HEX 或 RGB 值。例如：#004a70和rgb(210,110,235)。
darkMode：暗模式页眉的背景颜色。
lightMode：浅色模式页眉的背景颜色。
loginBgImg：登录页面显示的背景图片的名称路径，例如：‘login_bg.png’。图像文件应放在images文件夹中。建议此图片的大小应大于 800px*600px。
loginTitle：登录页面中显示的完整产品标题。
Product：包含产品的元数据/描述。
name：产品的名称。
logo：产品标志的名称路径，例如：logo.png。图像文件应放在images文件夹中。
introduction: 产品介绍，显示在About对话框中。
2.2 登录页面修改
（1）logo + title修改
将logo文件放入 harbor\src\portal\src\images 文件夹下
修改setting.json文件如下
{
"headerBgColor": {
"darkMode": "",
"lightMode": ""
},
"loginBgImg": "",
"loginTitle": "xxxxx", //登录页显示的名称
"product": {
"name": "xxxxx", //首页显示的名称
"logo": "logo.svg",
"introduction": ""
}
}如果还需调整一下logo的样式
样式文件路径
harbor\src\portal\src\app\shared\components\navigator\navigator.component.scss修改样式如下，主要是调整元素的宽度
.headerLogo {
width: xxxpx;
height: xxpx;
object-fit: fill;
}同时，登录页面右下方有更多信息的跳转链接，需要去除该信息
在 harbor\src\portal\src\app\account\sign-in\sign-in.component.html 文件中，屏蔽下面代码即可
2.3 关于页面修改
关于页面主要分为 版本号、介绍、开源/第三方许可协议 这3部分内容
（1）修改或屏蔽版本号
代码路径
harbor\src\portal\src\app\shared\components\about-dialog\about-dialog.component.html找到下面的代码片段，注释或者修改这段代码即可改动版本号相关内容
<div>
<span class="p5 about-version">{{'ABOUT.VERSION' | translate}} {{version}}</span>
</div>屏蔽版本号效果如下
（2）修改Harbor的介绍说明
修改setting.json文件的 product中的 introduction字段
{
"headerBgColor": {
"darkMode": "",
"lightMode": ""
},
"loginBgImg": "",
"loginTitle": "xxxxxx",
"product": {
"name": "xxxxxx",
"logo": "logo.svg",
"introduction": "Harbor说明测试"
}
}
修改效果如下
注：修改了introduction字段后，相应的 开源/第三方许可协议 默认不再显示
也可以修改下面文件路径中的内容
harbor\src\portal\src\i18n\lang\zh-cn-lang.json
（3）屏蔽 开源/第三方许可协议
代码路径
harbor\src\portal\src\app\shared\components\about-dialog\about-dialog.component.html找到下面的代码片段，注释或者修改这段代码即可改动版本号相关内容
<p class="p5">
<a routerLink="/license" target="_blank">{{'ABOUT.OPEN_SOURCE_LICENSE' | translate}}</a>
</p>
屏蔽开源/第三方许可协议效果如下
2.4 首页中Harbor API V2.0跳转屏蔽
首页中，左下角有 Harbor API V2.0 ，点击会跳转到 api 的说明文档中
api说明文档页面
如果需要屏蔽此功能，需要找到harbor-shell.component.html文件
harbor-shell.component.html文件路径
harbor\src\portal\src\app\base\harbor-shell\harbor-shell.component.html在文件中找到下面的代码片段，注释该代码片段即可
<a clrVerticalNavLink routerLinkActive="active" target="_blank" routerLink="/devcenter-api-2.0">
<clr-icon shape="network-globe" clrVerticalNavIcon></clr-icon>
{{'SIDE_NAV.HARBOR_API_MANAGEMENT' | translate}}
</a>
