pfaffman
7월 25, 2024, 8:55오후
1
토픽 목록의 에 몇 가지 내용을 추가하려고 합니다. 제가 영향을 주어야 하는 카테고리에만 CSS를 적용해야 합니다.
영향을 주고 싶은 카테고리의 에 “can-rate” 클래스를 추가하는 방식으로 처리해야 할 것 같습니다.
그림머 컴포넌트(변경 사항을 적용해야 하는지 알 수 있는 곳)에서 처리할 수 있을 것 같지만, 이니셜라이저에서 처리해도 괜찮습니다.
작동하지 않는 방법들을 몇 가지 시도해 보았습니다. 누군가 힌트를 주거나 예시를 알려주실 수 있을까요? https://github.com/discourse/discourse-groups-css-classes-in-body/blob/main/common/header.html 이 올바른 방향인 것 같지만, 이니셜라이저에서 제가 변경하려는 카테고리인지 어떻게 확인해야 하는지 모르겠습니다(그래서 이니셜라이저는 잘못된 위치일까요?).
아마도 Override class list 가 관련 있을 수 있습니다.
Alteras
7월 25, 2024, 9:34오후
2
<tr>에 클래스를 추가하려는 것보다 data-category-id 속성을 직접 대상으로 하는 것이 더 쉬울 수 있습니다.
data-category-id가 없는 tr에 스타일을 추가해야 한다면, 카테고리 아이콘(Category Icons) 테마 컴포넌트가 카테고리 링크 렌더링을 변경하는 방식을 살펴보는 것이 도움이 될 수 있습니다(이는 모든 곳에 영향을 미칩니다). 자식 요소에 클래스/속성을 추가하고 CSS를 통해 스타일을 적용하는 방식(예: tr:has(> .some-class))을 고려해 볼 수 있습니다.
let restricted = get(category, "read_restricted");
let url = opts.url
? opts.url
: getURL(`/c/${Category.slugFor(category)}/${get(category, "id")}`);
let href = opts.link === false ? "" : url;
let tagName =
opts.link === false || opts.link === "false" ? "span" : "a";
let extraClasses = opts.extraClasses ? " " + opts.extraClasses : "";
let html = "";
let parentCat = null;
let categoryDir = "";
let dataAttributes = category
? `data-category-id="${get(category, "id")}"`
: "";
/// Add custom category icon from theme settings
let iconItem = getIconItem(category.slug);
if (!opts.hideParent) {
parentCat = Category.findById(get(category, "parent_category_id"));
}
pfaffman
7월 26, 2024, 6:06오후
3
아하! 제가 필요했던 마법이 바로 그거였군요. 게다가 아주 간단하네요. 거의 다 이해할 뻔했어요. 정말 감사드립니다.