更改Azure DevOps Server的原生界面（三、更改网站logo)

1. 场景说明

首先说明，本文中使用的需求场景描述只是个虚拟假设，不是实际的需求场景，避免大家产生误解。
按照公司设计部门的统一规划，需要将Azure DevOps Server的图标修改为公司统一的图标。

  • 首先，需要更改Azure DevOps Server 的Logo图形
    image
  • 其次，Azure DevOps Server 的Logo的颜色
    image

2. 操作方式

2.1 更改Logo图形：

  • 字体图标的存储路径是：
C:\Program Files\Azure DevOps Server 2020\Application Tier\Web Services\_static\tfs\Dev18.M181.6\_ext\ms.vss-features\ui-core-content\Components\Icon\fonts\AzDevMDL2.woff

  • 什么是woff文件？
    woff是Web Open Font Format的简写，中文翻译为Web开放字体格式；它是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由万维网联盟的Web字体工作小组标准化，以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小，并且不包含加密也不受DRM（数位著作权管理）限制。
    目前主流的网页浏览器，都支持woff格式的字体图标

  • 如何编辑woff文件？
    从Azure DevOps Server应用服务器中复制AzDevMDL2.woff（也可以从网页下载）后，使用专门的字体图标编辑器更改。
    笔者从网上找到了一个功能强大的编辑器软件FontCreator,但是这个软件是收费的，只能使用它的试用版本；试用版本在使用过程中没有任何功能限制，但是在输出或保存的时候，会打上这个产品的水印。下面介绍以下使用FontCreator修改Azure DevOps Server的字体图标，以Logo为例：

    • 运行FontCreator后，打开AzDevMDL2.woff文件
      image
    • 找到Logo所在的图标编号，双击打开图标，导入自己的图标
      image
      image
      删除原来的字体，再调整字体大写
      image
    • 保存文档即可；
    • 将新的woff文件覆盖应用服务器中的对应文件，大功告成。
      image

2.2 更改logo图像的颜色

  • 字体图标的特征是，可以使用CSS定义图标的颜色、大小等，下面介绍更改Logo的默认颜色（蔚蓝色）

  • 找到应用层服务器中的样式文件：C:\Program Files\Azure DevOps Server 2020\Application Tier\Web Services_static\tfs\Dev18.M181.6_ext\ms.vss-tfs-web\frame-content\ms.vss-tfs-web.frame-content.min.css

  • 更改上述文件中的样样式“.suite-logo .suite-image”

更改前为：

.suite-logo .suite-image{font-size:1.3125rem;}

更改后为：

.suite-logo .suite-image{font-size:1.3125rem;color:red;}

3. 其他演示

如果需要，你还可以从微软Azure DevOps Server 的在线文档，查询更多的权威资料，也欢迎通过下面的联系方式与我沟通，相互学习，相互提高！

https://www.cnblogs.com/danzhang
Azure DevOps MVP 张洪君
在这里插入图片描述

posted on 2022-02-02 12:09  danzhang  阅读(178)  评论(0)  编辑  收藏  举报

导航