评论页面独有的自定义图标

[Joart]

您好，
我想仅替换评论页面中的复选标记图标。您可以在此处找到它：

<span class="approved">
        <svg class="fa d-icon d-icon-check svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
          <use href="#check"></use>
        </svg>
        Approved
</span>

如果我使用这个：
api.replaceIcon('check', 'full-circle-icon');
论坛中所有的复选标记都会被full-circle…替换。
但我不希望替换其他页面的图标。

我该如何修改才能实现这个目标？感谢您的回答。

[Canapin (Coin-coin le Canapin)]

不完全确定它是否有效，因为我没有尝试过，但你可以尝试用 JavaScript 获取当前页面，检查它是否是审查页面，然后用你的代码行更改图标。

我相信 meta 上曾经有一个使用 API 获取当前页面的 JS 示例，但我再也找不到它了。

或者也许你只需返回当前 URL 来检查你是否在 /review。

[Joart]

我试过了：

    api.onPageChange((url) => {
       if (window.location.href.indexOf("review") > -1) {
             api.replaceIcon('check', 'full-circle-icon');
       }
    }

但它不起作用……
我遇到了这个错误：

SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: 意外的标记，预期为“,” (97:5)

我做错什么了吗？

[Canapin (Coin-coin le Canapin)]

您在代码末尾忘记了 );，因此出现了错误。

类似这样的代码可能有效（不用在意 URI 解析，有很多方法可以做到）：

    api.onPageChange((url) => {
       if (location.pathname.split('/')[1] == "review") {
            api.replaceIcon('check', 'full-circle-icon');
       }
    });

但请注意，onPageChange 在首次加载页面时不会触发。如果您直接在浏览器中打开 yourforum/reviews，那么 onPageChange 将不会触发，图标也不会被替换。

不过，我不知道如何同时在首次加载页面和页面更改时触发图标更改。也许有相应的 API 方法，但我没有找到。

此外，一旦图标更改，当您导航到其他页面时，它将保持更改状态，因此如果 URL 不是 /review，您应该将图标更改恢复原状。

总之……我认为要使其完全正常工作还需要做一些额外的工作。请注意，我并不是 Discourse 代码或 JavaScript 方面的专家。也许更有知识的人能够提供进一步的帮助。

---

编辑：当我第一次转到 /review 时，代码不起作用，我猜这是因为页面已加载，图标没有动态更改。所以，我们应该找到另一种方法来做到这一点。抱歉我无法提供更多帮助。

[Joart]

@Canapin

你应该恢复图标

你知道怎么做吗？

[Don]

你好，

我也写了一个 CSS 解决方案。

它将隐藏默认的勾选图标，并在 ::before 伪元素中添加自定义图标。

1. 创建一个新的主题组件。

2. 将图标上传到上传部分，并添加 SCSS 变量名：review-approved-icon
   

   

3. 点击 编辑 CSS/HTML 按钮，并将以下代码粘贴到 Common / CSS 部分。

如果您想使用 var(--success) 为自定义图标添加颜色，请使用此项

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) light scheme color #090 (custom icon color)
      // you can calculate new light color filter here: https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
      @media (prefers-color-scheme: dark) {
        // var(--success) dark scheme color #1ca551 (custom icon color)
        // you can calculate new dark color filter here: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

如果您的图标已有想要的颜色，请使用此项

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

如果您想在浅色和深色主题方案中使用不同的图标，请使用此项

如果您选择此项，则需要上传两个具有不同颜色的图标。

SCSS 变量名：review-approved-icon-light 和 review-approved-icon-dark

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon-light);
      @media (prefers-color-scheme: dark) {
        content: url($review-approved-icon-dark);
      }
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---