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

**URL:** <https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621>\
**Category:** Development\
**Created:** [2022年十一月24日 07:57 UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621 "2022-11-24T07:57:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joart](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@Joart](https://meta.discourse.org/u/Joart)\
**Post date:** [2022年十一月24日 07:57 UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621/1 "2022-11-24T07:57:57Z")

</div>

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

```plaintext
<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…替换。  
但我不希望替换其他页面的图标。

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

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2022年十一月25日 01:33 UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621/2 "2022-11-25T01:33:37Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![Joart](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@Joart](https://meta.discourse.org/u/Joart)\
**Post date:** [2022年十一月29日 15:17 UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621/3 "2022-11-29T15:17:06Z")

</div>

我试过了：

```plaintext
    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)

我做错什么了吗？

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2022年十一月29日 15:38 UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621/4 "2022-11-29T15:38:44Z")

</div>

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

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

```js
    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 时，代码不起作用，我猜这是因为页面已加载，图标没有动态更改。所以，我们应该找到另一种方法来做到这一点。抱歉我无法提供更多帮助。😔

---

<div class="post-metadata">

**Author:** ![Joart](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@Joart](https://meta.discourse.org/u/Joart)\
**Post date:** [2022年十一月29日 16:27 UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621/5 "2022-11-29T16:27:23Z")

</div>

> [@Canapin](#):
>
> 你应该恢复图标

你知道怎么做吗？

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2022年十一月30日 07:31 UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621/6 "2022-11-30T07:31:58Z")

</div>

你好，

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

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

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

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

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

> **如果您想使用 var(--success) 为自定义图标添加颜色，请使用此项**
>
> ![Screenshot 2022-11-29 at 21.49.31](https://global.discourse-cdn.com/meta/original/4X/7/8/e/78ec9835ee024c652985fe44f84623e78ad83a61.png)
> 
> ```scss
> .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;
> }
> }
> }
> 
> ```

* * *

> **如果您的图标已有想要的颜色，请使用此项**
>
> ```scss
> .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`
> 
> ![Screenshot 2022-11-30 at 8.25.06](https://global.discourse-cdn.com/meta/original/4X/b/9/a/b9a7bf6a16c7377bede7387c5cc40c8cab46a472.png)
> 
> ```scss
> .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;
> }
> }
> }
> 
> ```

* * *

 ![Screenshot 2022-11-29 at 21.38.55](https://global.discourse-cdn.com/meta/original/4X/6/0/0/60064b0b1f81c5b8b62c3368033ad7a543925f83.png)