做企业网站设计与实现,莆田网站建设方法,中小型企业网站大全,网站背景音乐怎么做1 前端开发环境搭建
#xff08;1#xff09;拉取分支代码
#xff08;2#xff09;前端开发推荐使用VsCode编辑器打开项目
打开 harbor\src\portal 文件夹#xff0c;该文件夹为Harbor对应的前端代码所在位置
#xff08;3#xff09;在portal文件夹下创建名为 pro…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 登录页面修改
1logo 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
找到下面的代码片段注释或者修改这段代码即可改动版本号相关内容
divspan classp5 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 classp5a 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 routerLinkActiveactive target_blank routerLink/devcenter-api-2.0clr-icon shapenetwork-globe clrVerticalNavIcon/clr-icon{{SIDE_NAV.HARBOR_API_MANAGEMENT | translate}}
/a
