更改Azure DevOps Server的原生界面(一、概述)
1. 背景说明
在Azure DevOps Server项目的实施推广过程中,经常会有客户向我们提出类似这样的需求“为了与公司其他系统的名称保持一致,是否可以把Logo或产品名称改替换成自己的?”。
是的,这是可以实现的,只需要更改服务器前端页面中对应的文件即可。但是,在更改Azure DevOps Server原生页面中的内容或结构之前,首先要了解它的前端开发技术,以及这种更改带来的影响。
使用Azure DevOps Server(之前的名字叫做Team Foundation Server TFS) 时间比较长的用户知道,在不支持使用Extension插件来扩展TFS前,如果需要对TFS的原生功能或页面做任何修改,只能直接修改TFS的前端页面(HTML、CSS或JavaScript),但是这种修改存在许多隐患,特别是系统升级带来的潜在问题,比如有一个客户在TFS 2013中做了大量的页面定制,结果在升级TFS 2015或更高版本的时候发现之前所有的定制都需要全部重写,这个代价太大,直接导致用户抛弃了之前所有的定制。同样,对Azure DevOps Server原生页面的更改,目前也只能修改前端页面,因此用户在对前端页面做修改前,一定要评估哪些需求通过修改原生页面来实现,哪些不能这样做;本文在后面的示例中做了几种常见的定制,供大家参考。
Azure DevOps Server前端脚本是使用TypeScript技术编写和编译后的JavaScript脚本,脚本经过编译后还进行了压缩;同时,针对不同的语言和不同厂商的浏览器,Azure DevOps Server还有不同的配置文件;例如,在服务器的安装目录中,下面的不同文件夹代表不同的涵义:
- \frame-content\L10N\zh-Hans:表示中文简体语言的本地化配置信息
- \frame-content\L10N\zh-Hant:表示中文繁体语言的本地化配置信息
- \frame-content\L10N\zh-Hans\ms.vss-tfs-web.frame-content.es6.NeRniB0Kwumd6y1t.min.js:表示es6(ECMAScript 6.0 ,是 JavaScript 的下一个版本标准)的脚本代码
- \frame-content\L10N\zh-Hans\ms.vss-tfs-web.frame-content.compat.g07Hxyz1UPTy6uYI.min.js:表示不支持es6的兼容脚本代码
看了上面的示例,有必要说明一下什么是es6,什么是L10N。
- ES6:全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。 参考 https://www.runoob.com/w3cnote/es6-tutorial.html
- L10N:是“Localization” 的缩写,由于“Localization” 单词较长,所以为了书写简便,通常缩写为“L10N” ,中间的 10 代表在首字母“L” 和尾字母“N” 之间省略了 10 个字母。单词“Localization” 翻译成中文是“ 本地化” 的意思,是将产品或软件针对特定国际语言和文化进行加工,使之符合特定区域市场的过程。真正的本地化要考虑目标区域市场的语言、文化、习俗、特征和标准。通常包括改变软件的书写系统(输入法)、键盘使用、字体、日期、时间和货币格式等。
下面以几个常见的场景,说明如何修改Azure DevOps Server原生的页面元素。
另外还需要注意,上面的这种改动,只适用于对内网部署的DevOps Server,不适用于云端的DevOps Service;并且更改的文件都存储在磁盘文件中,不会像控件开发或工作项定制那样存储在数据中,如果我们重新安装了服务器应用层,所有的变更会被系统安装过程覆盖,因此需要自己对变更的文件做好备份。
2. 案例演示
-
更改Azure DevOps Server的原生界面(一、概述)
-
更改Azure DevOps Server的原生界面(二、更改网站图标favorites icon)
-
更改Azure DevOps Server的原生界面(三、更改网站logo)
-
更改Azure DevOps Server的原生界面(四、集合主页的相关页面)
-
更改Azure DevOps Server的原生界面(五、更改网站标题)
-
更改Azure DevOps Server的原生界面(六、更改网站名称)
-
更改Azure DevOps Server的原生界面(七、禁用浏览器下载和以zip格式下载文件)
更改Azure DevOps Server的原生界面(八、禁用网页浏览器查看源代码)
-
如果需要,你还可以从微软Azure DevOps Server 的在线文档,查询更多的权威资料,也欢迎通过下面的联系方式与我沟通,相互学习,相互提高!
https://www.cnblogs.com/danzhang
Azure DevOps MVP 张洪君