如何更改Azure DevOps Wiki文档列表中的主图标？

先明确核心限制 #

默认ADO Wiki没有官方提供的自定义左侧图标的配置功能，且无Wiki设置权限的话，无法通过内置配置页操作。下面是几种实际可用的解决思路：

方案1：浏览器扩展+命名规则（无需权限） #

这是最适合无权限用户的方案：

• 第一步：给带子页面的父页面统一加前缀，比如[文件夹]页面名称，普通页面保持原名
• 第二步：安装Stylus这类自定义样式浏览器扩展，针对ADO Wiki页面添加以下CSS规则：

  /* 替换带[文件夹]前缀页面的图标为内置文件夹图标 */
  .wiki-page-tree-item:has(.wiki-page-link-text:contains("[文件夹]")) .ms-Icon--Document {
    content: "\E8B7" !important;
  }
  /* 隐藏前缀文字，避免影响显示 */
  .wiki-page-link-text:contains("[文件夹]") {
    text-indent: -24px;
    padding-left: 24px;
  }
  

  注：如果DOM类名和你的ADO环境不一致，按F12打开开发者工具，自行核对元素类名调整规则。

方案2：请求管理员配置自定义脚本（需权限协助） #

如果能联系到有Wiki设置权限的管理员，可让他们执行以下操作：

• 进入Wiki设置页，找到「自定义脚本」选项
• 添加以下JS脚本，自动识别带子页面的父节点并替换图标：

  // 初始化替换已有页面图标
  document.querySelectorAll('.wiki-page-tree-item').forEach(item => {
    // 通过展开/折叠按钮判断是否有子页面
    if (item.querySelector('.ms-Icon--ChevronRight') || item.querySelector('.ms-Icon--ChevronDown')) {
      item.querySelector('.ms-Icon--Document').classList.replace('ms-Icon--Document', 'ms-Icon--Folder');
    }
  });
  // 监听页面动态变化（比如展开折叠新节点）
  const observer = new MutationObserver(() => {
    document.querySelectorAll('.wiki-page-tree-item').forEach(item => {
      const hasChildren = item.querySelector('.ms-Icon--ChevronRight') || item.querySelector('.ms-Icon--ChevronDown');
      const isFolderIcon = item.querySelector('.ms-Icon--Folder');
      if (hasChildren && !isFolderIcon) {
        item.querySelector('.ms-Icon--Document').classList.replace('ms-Icon--Document', 'ms-Icon--Folder');
      }
    });
  });
  observer.observe(document.querySelector('.wiki-page-tree'), { childList: true, subtree: true });
  

  这种方式无需修改页面名称，能自动识别父页面，体验更顺畅。

方案3：标题加图标符号（轻量无权限） #

如果不想折腾扩展，直接在带子页面的父页面标题前加📁，普通页面加📄，虽然不是替换左侧默认图标，但能快速区分层级，操作简单，完全不需要权限。

内容的提问来源于stack exchange，提问作者Bruno DaSilva