【摘要】Harbor自定义外观，当搞技术的不正经起来，乐趣也就有了。【文章来源】《Harbor进阶实战》公众号本文已参与「开源摘星计划」，欢迎正在阅读的你加入。活动链接： https://github.com/weopenprojects/WeOpen-Star

功能介绍

1.1 效果

这是我的Harbor：

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

1.2 功能实现

官方文档： https://goharbor.io/docs/2.6.0/build-customize-contribute/customize-look-feel/

可以从官方文档中得出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": ""
  }
}

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

headerBgColor : 页眉的背景颜色，支持 HEX 或 RGB 值。例如：#004a70和rgb(210,110,235)。
darkMode：暗模式页眉的背景颜色。
lightMode：浅色模式页眉的背景颜色。
loginBgImg：登录页面显示的背景图片的名称路径，例如：'login_bg.png'。图像文件应放在images文件夹中。建议此图片的大小应大于800px*600px。
loginTitle：登录页面中显示的完整产品标题。
Product：包含产品的元数据/描述。
name：产品的名称。
logo：产品标志的名称路径，例如：logo.png。图像文件应放在images文件夹中。
introductions: 产品介绍，显示在About对话框中。

操作步骤

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

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优质文章可阅读：扫码_搜索联合传播样式-标准色版.png

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