自定义Harbor外观，当Harbor遇上"神仙姐姐"

Posted 2022-09-17 键客李大白

---

功能介绍

1.1 效果

这是我的Harbor：

VS你的Harbor： 如果你认为这是我PS的，那你就大错特错了，这是我阅读官方文档中自定义Harbor外观而冥思苦想实验出来的。

1.2 功能实现

可以从官方文档中得出Harbor一个有意思的功能：自定义外观。然而对其介绍却寥寥几笔，并不够详细。

本篇文章则对其进行详细的剖析，该功能适用于企业自定义Harbor UI与公司Logo。

1.3 注意事项

Harbor的主要外观支持通过几个简单的步骤进行自定义。 配置中的所有相关自定义都保存在文件$HARBOR_DIR/src/portal/src夹下的setting.json文件中，并在Harbor启动时加载。

打开setting.json文件，你会看到默认的内容如下图：

  "headerBgColor": 
    "darkMode": "",
    "lightMode": ""
  ,
  "loginBgImg": "",
  "loginTitle": "",
  "product": 
    "name": "",
    "logo": "",
    "introduction": ""
  

如果要将默认样式覆盖为您自己的样式，请更改配置的值。以下是参考资料：

---

操作步骤

下面将详细介绍操作步骤：

2.1 查询容器ID

通过Harbor架构可以看出，Harbor的前端主要由portal组件实现,可以查看portal容器中前端页面的配置消息。

$ docker ps -a |  grep   portal
8b8f3d83cd02        goharbor/harbor-portal:v2.6.0          "nginx -g daemon of…"   13 minutes ago      Up 13 minutes (healthy)                                                                                                 harbor-portal
$ docker exec -it  8b8f3d83cd02  /bin/bash
nginx [ / ]$ cat /usr/share/nginx/html/setting.json

  "headerBgColor": 
    "darkMode": "",
    "lightMode": ""
  ,
  "loginBgImg": "",
  "loginTitle": "",
  "product": 
    "name": "",
    "logo": "",
    "introduction": ""
  

nginx [ / ]$ exit

进入容器后便可以看到/usr/share/nginx/html/setting.json默认的Harbor外观配置。

2.2 手动创建setting.json文件

$ cat <<EOF > setting.json


  "headerBgColor": 
    "darkMode": "",
    "lightMode": "rgb(139,241.217)"
  ,
  "loginBgImg": "login_bg.png",
  "loginTitle": "宇宙第一深情",
  "product": 
    "name": "",
    "logo": "",
    "introduction": ""
  

EOF

2.3 将文件复制到容器

将刚才创建好的配置文件拷贝到portal容器内，覆盖掉原来默认的配置文件。

$ docker cp setting.json 8b8f3d83cd02:/usr/share/nginx/html/

8b8f3d83cd02为portal容器的ID。

2.4 上传背景图片

在百度上找到女神-刘亦菲的剧照并截取为800px * 600px尺寸的png图片，并命名为login_bg.png(setting.json文件中loginBgImg参数的值)。 然后上传到主机上，再将背景图片传送到容器内：

$ docker cp login_bg.png 8b8f3d83cd02:/usr/share/nginx/html/images

8b8f3d83cd02为portal容器的ID。

2.5 浏览器访问页面

在浏览器访问Harbor UI或者刷新页面后可以发现Harbor的登录界面已经变成我们想要的样式了。

更多Harbor优质文章可阅读：