GitLab - отличное решение для организации командной работы при разработке ПО. Он включает в себя git-репозиторий, issue tracker, систему непрерывной интеграции и множество других модулей, позволяющих эффективно сопровождать разработку даже достаточно крупных программных продуктов. При этом гитлаб ещё и является открытым ПО, не накладывая каких-либо ограничений на своё использование в т.ч. и в коммерческих проектах.

Тем не менее, у гитлаба есть и ряд существенных недостатков. Помимо "хипстерской" архитектуры (что субъективно) и недостаточно мощного issue tracker'а (по сравнению с теми же продуктами Atlassian), к ним можно отнести слабую кастомизируемость интерфейса. Понятно, что этот недостаток не является особо критичным - на эффективность управления исходным кодом и организацию командной работы он никак не влияет - однако, в некоторых случаях, особенно, когда заказчик имеет доступ в репозиторий, невозможность "перекрасить" навигационную панель или поменять содержимое футера не может не раздражать. Хорошо, что эту проблему можно достаточно легко решить правкой шаблонов страниц, о чём я и расскажу в этой заметке.

Постановка задачи

Рассмотрим конкретный пример. Допустим, у нас есть GitLab CE, установленный с использованием официального образа для Docker'а, и заказчик требует от нас модифицировать нижнюю навигационную панель страницы авторизации. По умолчанию эта панель выглядит так:

Заказчик хочет добавить туда ссылку на свой блог, расположенный по адресу https://myblog.com. Что для этого нужно сделать?

Решение

Разметка интерфейса гитлаба формируется с помощью Haml-шаблонов, расположенных в каталоге $GITLAB_BIN_HOME/gitlab-rails/app/views/. Конкретное имя каталога определяется особенностями установки гитлаба - к примеру, внутри официального образа для Docker'а полный путь к шаблонам будет выглядеть как /opt/gitlab/embedded/service/gitlab-rails/app/views/. Наиболее интересные среди них - это шаблоны разметки основных страниц гитлаба, они лежат в подкаталоге layouts.

Если мы хотим изменить навигацию в футере страницы навигации, то нам нужно поправить файл devise.html.haml. По умолчанию его содержимое (для GitLab CE 10.7) выглядит так:

!!! 5
%html.devise-layout-html{ class: system_message_class }
  = render "layouts/head"
  %body.ui_indigo.login-page.application.navless{ data: { page: body_data_page } }
    .page-wrap
      = render "layouts/header/empty"
      .login-page-broadcast
        = render "layouts/broadcast"
      .container.navless-container
        .content
          = render "layouts/flash"
          .row
            .col-sm-5.pull-right.new-session-forms-container
              = yield
            .col-sm-7.brand-holder.pull-left
              %h1
                = brand_title
              = brand_image
              - if current_appearance&.description?
                = brand_text
              - else
                %h3 Open source software to collaborate on code

                %p
                  Manage Git repositories with fine-grained access controls that keep your code secure.
                  Perform code reviews and enhance collaboration with merge requests.
                  Each project can also have an issue tracker and a wiki.

              - if Gitlab::CurrentSettings.sign_in_text.present?
                = markdown_field(Gitlab::CurrentSettings.current_application_settings, :sign_in_text)

      %hr.footer-fixed
      .container.footer-container
        .footer-links
          = link_to "Explore", explore_root_path
          = link_to "Help", help_path
          = link_to "About GitLab", "https://about.gitlab.com/"

Добавим в футер новую ссылку. Т.к. текст ссылки содержит кириллицу, а интернационализацию и локализацию в шаблоны страниц гитлаба пока что не завезли, нам придётся вверстать её соответствующими кодами юникодных символов. Таким образом, в соответствии с синтаксисом Haml, исходный код модифицированного шаблона примет следующий вид (добавилась одна строчка в конце):

!!! 5
%html.devise-layout-html{ class: system_message_class }
  = render "layouts/head"
  %body.ui_indigo.login-page.application.navless{ data: { page: body_data_page } }
    .page-wrap
      = render "layouts/header/empty"
      .login-page-broadcast
        = render "layouts/broadcast"
      .container.navless-container
        .content
          = render "layouts/flash"
          .row
            .col-sm-5.pull-right.new-session-forms-container
              = yield
            .col-sm-7.brand-holder.pull-left
              %h1
                = brand_title
              = brand_image
              - if current_appearance&.description?
                = brand_text
              - else
                %h3 Open source software to collaborate on code

                %p
                  Manage Git repositories with fine-grained access controls that keep your code secure.
                  Perform code reviews and enhance collaboration with merge requests.
                  Each project can also have an issue tracker and a wiki.

              - if Gitlab::CurrentSettings.sign_in_text.present?
                = markdown_field(Gitlab::CurrentSettings.current_application_settings, :sign_in_text)

      %hr.footer-fixed
      .container.footer-container
        .footer-links
          = link_to "Explore", explore_root_path
          = link_to "Help", help_path
          = link_to "About GitLab", "https://about.gitlab.com/"
          = link_to "My Blog", "https://myblog.com/"

Сохраняем изменения в файле, проверяем, как будет выглядеть новая навигация в футере:

Ничего не изменилось! Правильно, т.к. для того, чтобы были загружены новые шаблоны, нужно перезапустить гитлаб. Перезапускаем Docker-контейнер:

www@helios:~$ sudo docker restart gitlab

Проверяем страницу в браузере:

Ура! Новый пункт добавился в навигационную панель, задача решена. Теперь осталось где-то сохранить модифицированный нами файл devise.html.haml, т.к. при апгрейде на следующую версию гитлаба образ будет загружен заново, вследствие чего все шаблоны сбросятся в "дефолтное" состояние.