更改Azure DevOps Server的原生界面（一、概述）

2023-10-15 11:41:40

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；并且更改的文件都存储在磁盘文件中，不会像控件开发或工作项定制那样存储在数据中，如果我们重新安装了服务器应用层，所有的变更会被系统安装过程覆盖，因此需要自己对变更的文件做好备份。