在 GitLab UI 上展示GitLab 和 CodeRider 双 Logo

背景

在 GitLab UI 上展示GitLab 和 CodeRider 双 Logo

技术方案

不修改任何 GitLab 源码，不引入代码分叉。借用 Custom HTML header tags 功能，外挂一段 JS 来改动 Logo 样式。

详细操作步骤如下：

1. 在某处托管一段 JS（例如 GitLab Pages）。JS 内容示例：

   document.addEventListener("DOMContentLoaded", function () {
       const logo = document.querySelector('a[data-track-label="gitlab_logo_link"]');
       if (!logo) {
           console.log("没有找到 'a[data-track-label=gitlab_logo_link]'");
           return;
       }
   
       const coderider_logo = logo.cloneNode(true);
       coderider_logo.setAttribute("href", "https://coderider.gitlab.cn/");
       coderider_logo.setAttribute("target", "_blank");
       const svg = coderider_logo.querySelector("svg");
   
       if (!svg) {
           console.log("克隆出来的元素里没有 svg，可以检查下 DOM 结构");
           return;
       }
       const img = document.createElement("img");
       img.setAttribute(
           "src",
           "https://coderider.jihulab.com/chat/_next/static/media/logo_name.fcbfd635.png"
       );
       if (svg.getAttribute("class")) {
           img.setAttribute("class", svg.getAttribute("class"));
       }
       img.setAttribute("height", "40px");
       img.setAttribute("alt", "Coderider");
       svg.replaceWith(img);
   
       logo.insertAdjacentElement("afterend", coderider_logo);
       logo.removeAttribute("width");
   });

2. 配置 Custom HTML header tags 引入这段 JS 即可

   

效果演示 ✨

iShot_2025-12-05_18.09.07