介绍

由于工作需要，需要将 Rancher 中登录页面问候语以及这个网站的 logo进行定制。

操作方法

1. 使用命令启动 rancher 服务
   $ docker run -p 8080:8080 rancher/server
2. 启动成功后使用命令查看使用 docker 启动的所有镜像
   $ docker ps
3. 通过 CONTAINER ID 在容器中开启一个交互模式的终端
   $ docker exec -it ad7b46ed0ab4 /bin/bash
4. 进入到目录 /usr/share/cattle/4d602577b2712b79505f4ba184626708/assets/images/下，注意：每次 4d602577b2712b79505f4ba184626708 都不一样需要先进入到
   /usr/share/cattle/ 目录下查看具体的目录是多少
5. 使用 docker cp命令替换 favion.ico 与 main.svg 文件，favion.ico 为网站的图标，main.svg 为网站上使用的 logo
   favion.ico
   
   屏幕快照 2018-11-02 下午5.10.01.png
   
   main.svg
   
   屏幕快照 2018-11-02 下午5.14.29.png
6. 进入到目录 /usr/share/cattle/4d602577b2712b79505f4ba184626708 下，注意：每次 4d602577b2712b79505f4ba184626708 都不一样需要先进 入到 /usr/share/cattle/ 目录下查看具体的目录是多少
7. 修改 index.html 文件，增加以下代码，来修改问候语

<script>
    window.onload=function(){
      setTimeout(function () {
        document.title = 'TsingdataCloud';
        //document.getElementsByTagName('h1').innerHTML = `问候语
         //<div class="logo"></div>`
        document.getElementsByClassName('login')[0].firstElementChild.innerHTML = `问候语
          <div class="logo"></div>`
      },500)
    }
  </script>

8. 刷新 rancher 页面，将会看到具体效果

效果实现

原始效果

屏幕快照 2018-11-05 下午5.15.44.png

定制后效果

屏幕快照 2018-11-05 下午5.15.27.png