通过 nginx 配置替换返回结果实现全局引入一个css文件，通过css样式来隐藏 Gitlab 一些不需要的功能。
具体操作：
nginx 配置 sub_filter 过滤器
sub_filter 函数属于 ngx_http_sub_module 模块，该模块是一个过滤器，它通过将一个指定的字符串替换为另一个来修改响应。
句法： sub_filter [string] [replacement];
语境： http, server, location
1
2
3
4
5
6
7
8
| location /
{
...
sub_filter '</head>' '\n<link rel="stylesheet" media="all" href="https://your domain.com/gitlab-custom-ui-custom.css?t=$msec" type="text/css" />\n<script src="https://your domain.com/gitlab-custom-ui-custom.js?t=$msec"></script>\n</head>';
...
}
|
其中 $msec 为 nginx 全局时间戳，用于测试期间清除缓存。
我的 gitlab-custom-ui-custom.css 内容为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| .issue-details .js-issue-widgets .gl-mt-4,.gl-card,.emoji-block{
display: none;
}
[data-track-label="service_desk"] {
display: none;
}
[data-track-label="milestones"] {
display: none;
}
[data-track-label="snippets_menu"] {
display: none;
}
[data-track-label="milestones_menu"] {
display: none;
}
[data-track-label="merge_requests_menu"] {
display: none;
}
.issuable-sidebar .milestone,.with-sub-blocks,.js-issuable-move-block,.confidentiality,.time-tracking {
display: none;
}
.user-counter .dashboard-shortcuts-merge_requests {
display: none;
}
.header-help .header-help-dropdown-toggle{
display: none;
}
.container-fluid .navbar-collapse, .header-new .header-new-dropdown-toggle{
display: none;
}
.header-search-new {
display: none;
}
.project-repo-buttons {
display: none;
}
.tree-content-holder,.project-last-commit,.tree-ref-container,.tree-controls,.project-stats, .footer-links {
display: none;
}
.download_excel_template_btn {
margin-right: 10px;
}
|
gitlab-custom-ui-custom.js内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| document.addEventListener('DOMContentLoaded', function() {
const discussionDropdown = document.getElementById('discussion-preferences-dropdown');
const btn = document.createElement('button');
btn.classList.add('btn');
btn.classList.add('btn-sm');
btn.classList.add('download_excel_template_btn');
btn.textContent = '下载Excel模板';
btn.addEventListener('click', () => {
window.open('https://quote.aoidata.com/模板.xlsx', '_blank');
});
discussionDropdown.insertAdjacentElement('beforebegin', btn);
});
|
效果
参考
http://nginx.org/en/docs/http/ngx_http_sub_module.html
https://gitlab.com/gitlab-org/gitlab/-/issues/15199
https://macteo.it/2019/02/23/customize-gitlab-interface