如何在Ubuntu上自定義GitLab界面

如何在Ubuntu上自定義GitLab界面
在Ubuntu系統上，GitLab的自定義界面可通過基礎配置調整、CSS/JS覆蓋、主題定制等方式實現，以下是具體步驟：

1. 基礎界面配置（快速調整）

通過GitLab管理界面可快速修改語言、主題等基礎設置：

• 登錄GitLab管理員賬號，點擊頂部頭像→Settings→Preferences→User Interface。
• 在此可更改：界面語言（如zh_CN）、主題模式（Light/Dark/系統默認）、字體大小（Small/Medium/Large）、導航欄樣式等。
• 修改后無需重啟，直接保存即可生效。

2. 修改配置文件（基礎外觀調整）

通過編輯GitLab主配置文件gitlab.rb，可調整Logo、Favicon、語言等全局設置：

• 打開配置文件：sudo nano /etc/gitlab/gitlab.rb。
• 添加/修改以下參數（示例）：

  # 更改Logo（替換為你的圖片URL）
  gitlab_rails['logo_url'] = 'https://example.com/your_logo.png'
  # 更改Favicon（替換為你的圖標URL）
  gitlab_rails['favicon_url'] = 'https://example.com/your_favicon.ico'
  # 更改界面語言（支持zh_CN、en等）
  gitlab_rails['locale'] = 'zh_CN'
  # 啟用Markdown高級功能（如任務列表、表格）
  gitlab_rails['gitlab_markdown_enable_task_lists'] = true
  gitlab_rails['gitlab_markdown_enable_table'] = true
  

• 保存文件后，執行以下命令使配置生效：

  sudo gitlab-ctl reconfigure
  sudo gitlab-ctl restart
  

3. 自定義CSS/JavaScript（深度樣式調整）

若需修改界面樣式（如導航欄背景、按鈕顏色），可通過添加自定義CSS/JS文件實現：

• 創建自定義CSS文件：

  sudo mkdir -p /etc/gitlab/custom_css
  sudo nano /etc/gitlab/custom_css/application-custom.css
  

  添加自定義樣式（示例）：

  /* 修改導航欄背景顏色 */
  .navbar {
    background-color: #2c3e50 !important;
  }
  /* 修改按鈕主色調 */
  .btn-primary {
    background-color: #3498db !important;
    border-color: #3498db !important;
  }
  

• 配置GitLab加載自定義CSS：
  編輯/etc/gitlab/gitlab.rb，添加：

  gitlab_rails['custom_css'] = '/etc/gitlab/custom_css/application-custom.css'
  

• （可選）添加自定義JavaScript：
  創建/etc/gitlab/custom_js/application-custom.js，添加自定義腳本（示例）：

  // 頁面加載完成后輸出日志
  document.addEventListener('DOMContentLoaded', function() {
    console.log('Custom JavaScript loaded successfully!');
  });
  

  并在gitlab.rb中配置：

  gitlab_rails['custom_js'] = '/etc/gitlab/custom_js/application-custom.js'
  

• 生效配置：

  sudo gitlab-ctl reconfigure
  sudo gitlab-ctl restart
  

4. 安裝第三方主題（快速換膚）

若不想手動修改代碼，可使用社區提供的第三方主題：

• 下載主題：從可信來源（如GitHub）下載主題包（通常包含CSS/JS/圖片文件）。
• 上傳主題文件：將主題文件上傳至服務器指定目錄（如/var/opt/gitlab/gitlab-rails/public/themes/your_theme）。
• 配置GitLab使用主題：
  編輯/etc/gitlab/gitlab.rb，添加：

  gitlab_rails['custom_theme_path'] = '/var/opt/gitlab/gitlab-rails/public/themes/your_theme'
  

• 生效配置：

  sudo gitlab-ctl reconfigure
  sudo gitlab-ctl restart
  

  注：部分主題可能需要修改gitlab.rb中的custom_css/custom_js參數指向主題內的對應文件。

5. 構建專屬主題（進階定制）

若需完全自定義界面布局，可通過以下步驟創建專屬主題：

• 克隆主題倉庫：從GitHub克隆GitLab主題模板（如gitlab-theme-template）。
• 修改主題文件：根據文檔編輯HTML（布局結構）、CSS（樣式）、JavaScript（交互）文件。
• 編譯主題：若使用Sass/Less，執行編譯命令（如sass input.scss output.css）生成最終CSS。
• 部署主題：將編譯后的文件上傳至服務器，修改gitlab.rb中的custom_css/custom_js參數指向新文件。
• 生效配置：重啟GitLab服務。
  注：進階定制需具備HTML/CSS/JavaScript及GitLab內部結構知識，建議參考GitLab官方主題開發文檔。

注意事項

• 備份：修改前務必備份原始文件（如/var/opt/gitlab/gitlab-rails/public/assets/css/application.css），避免出現問題無法恢復。
• 測試：生產環境應用前，建議在測試環境驗證更改，防止界面錯亂。
• 權限：編輯系統文件需使用sudo，確保具有足夠權限。
• 依賴：部分主題可能需要安裝額外工具（如Sass編譯器），需提前安裝。