sitecore - 是否可以在 Sitecore 页面编辑器 "component navigator"中为占位符、组件和编辑框架定义不同的图标？

Question

在 Sitecore 页面编辑器中工作时，我们的编辑器使用蓝色箭头图标打开组件导航器，在占位符、组件和编辑框架树中导航。 组件导航器显示树中的每个祖先(来自编辑器单击的页面区域的上下文)，并带有标题和一个小的蓝色方形项目符号图标:

/sitecore/shell/~/icon/ApplicationsV2/16x16/bullet_square_glass_blue.png.aspx

不幸的是，所有组件、占位符和编辑框架都由相同的图标表示，并且仅通过标题来区分组件和占位符并不总是很容易(编辑框架按钮具有可编辑的标题和工具提示，在核心数据库中)。

理想情况下，我们希望有颜色编码的项目符号图标，以帮助我们的编辑了解他们在哪里以及他们点击了什么。

这些不是内容树中使用的图标。

那么有什么地方可以为每个设置不同的图标吗？如果没有，是否有代码修复？

编辑以澄清:此图像中的蓝色项目符号 - 主体是占位符，第一个图像横幅是一个组件，第二个是编辑框架(将获得新标题)，横幅覆盖是另一个占位符:

Answer 1

您需要做的是编辑所选 ChromeTypes 的 javascript 文件。

转到 sitecore\shell\Applications\Page Modes\ChromeTypes 目录。您看到的是基本 ChromeType 函数和继承函数，例如 PlaceholderChromeType、RenderingChromeType 等。

编辑您想要更改图标的类型。重写 icon 函数，如下所示:

icon: function() {
  return '/sitecore/shell/~/icon/ApplicationsV2/16x16/bullet_square_glass_green.png.aspx';
},

因此，如果您编辑 PlaceholderChromeType.js 文件，它应该像这样开始:

Sitecore.PageModes.ChromeTypes.Placeholder = Sitecore.PageModes.ChromeTypes.ChromeType.extend( {
  constructor: function() {
    this.base();
  },

  icon: function() {
    return '/sitecore/shell/~/icon/ApplicationsV2/16x16/bullet_square_glass_green.png.aspx';
  },

  controlId: function() {
    var marker = this.chrome.openingMarker();

清除浏览器缓存并刷新页面。现在所有占位符图标都将变成绿色。