안녕하세요,
리뷰 페이지에서만 체크 아이콘을 교체하고 싶습니다. 해당 아이콘은 아래에서 찾을 수 있습니다:
<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 아이콘으로 교체됩니다.
하지만 다른 페이지의 아이콘은 교체하지 않고 싶습니다.
이를 어떻게 수정할 수 있을까요? 답변해 주셔서 감사합니다.
100% 확실하지는 않는데, 아직 시도해 보지 않아서 그렇습니다. 하지만 자바스크립트로 현재 페이지를 가져온 후, 리뷰 페이지인지 확인하고, 그 다음 코드로 아이콘을 변경해 볼 수 있습니다.
기억이 맞다면 메타 어딘가에 API를 사용해 현재 있는 페이지를 가져오는 자바스크립트 예제가 있었던 것 같은데, 다시 찾을 수가 없었습니다.
아니면, 그냥 현재 URL을 반환해서 /review 페이지에 있는지 확인하는 방법도 있을 겁니다.
이렇게 시도해 보았습니다:
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: Unexpected token, expected “,” (97:5)
무언가 잘못한 부분이 있을까요?
코드 끝에 );를 잊어버렸기 때문에 오류가 발생한 것입니다.
다음과 같은 코드가 작동할 수 있습니다 (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로 이동할 때 코드가 작동하지 않는 것 같습니다. 이는 페이지가 로드되었지만 아이콘이 동적으로 변경되지 않기 때문인 것으로 추정됩니다. 따라서 이를 수행하는 다른 방법을 찾아야 합니다. 이 부분에 대해 더 도움을 드릴 수 없어 죄송합니다. 
방법을 아시나요?
안녕하세요,
저도 CSS 해결책을 하나 작성해 보았습니다. 
기본 체크 아이콘을 숨기고 ::before 의사 요소에 사용자 지정 아이콘을 추가하는 방식입니다.
새로운 테마 컴포넌트를 생성합니다.
아이콘을 업로드 섹션에 업로드하고 SCSS 변수 이름을 review-approved-icon으로 지정합니다.
CSS/HTML 편집 버튼을 클릭하고 아래 코드를 Common / CSS 섹션에 붙여넣습니다.
.reviewable {
.status span.approved {
position: relative;
&:before {
content: url($review-approved-icon);
width: 13px;
height: 13px;
top: 0px;
position: absolute;
// var(--success) 라이트 스킴 색상 #090 (사용자 지정 아이콘 색상)
// 새로운 라이트 색상 필터는 여기서 계산할 수 있습니다: 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) 다크 스킴 색상 #1ca551 (사용자 지정 아이콘 색상)
// 새로운 다크 색상 필터는 여기서 계산할 수 있습니다: 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;
}
}
}
