여러분 안녕하세요
토픽 목록에서 하위 카테고리를 “숨기고” 대신 토픽 제목 아래에 상위 카테고리를 표시할 수 있는 방법이 있을까요?
원하는 결과는 루트 카테고리가 있고, 그 안에 n개의 하위 카테고리가 있는 구조입니다. 이 하위 카테고리는 프론트엔드에서 표시되지 않아야 합니다. 이들은 그룹 소속에 기반하여 게시물 접근을 제한하는 데만 사용됩니다.
토픽 목록에서는 하위 카테고리가 아닌 상위 카테고리를 토픽 제목 아래에 표시하고 싶습니다.
태그를 사용하는 것도 고려해 보았지만, 불행히도 그 방식으로 토픽 접근을 제한할 수 없습니다.
토픽 목록의 항목 템플릿은 다음과 같이 토픽의 카테고리 링크만 표시합니다:
{{category-link topic.category}}
따라서 상위 카테고리 링크를 표시하려면 이 템플릿을 수정해야 합니다:
{{#if topic.category.parentCategory}}
{{category-link topic.category.parentCategory}}
{{else}}
{{category-link topic.category}}
{{/if}}
하지만 특정 상위 카테고리에 대해서만 이렇게 하려면 더 많은 로직을 추가해야 합니다. 이를 위한 권장 방식이 무엇인지, 핸들바 헬퍼를 등록하는 것이 좋은지 저는 잘 모르겠습니다.
다른 방법으로는 항상 카테고리 및 상위 링크를 모두 표시한 후, CSS를 사용하여 표시하지 않으려는 링크를 숨기는 방식을 사용할 수 있습니다.
확인해 보진 않았지만, CSS로 숨길 수 있을 것 같아요.
이 접근 방식에도 템플릿을 수정해야 하나요? 관리자 화면에서 해당 사이트 설정을 찾을 수 없었습니다.
부모 카테고리는 기본 템플릿에 포함되어 있지 않으므로, 템플릿을 수정해야 할 것 같습니다. 적어도 더 가벼운 방식으로 이를 달성할 수 있는 방법은 제가 아는限り 없습니다.
템플릿을 수정할 수 있는 사이트 설정은 없으며, DM으로 코드를 보내드릴 테니 테스트해 보시기 바랍니다.
일반적으로 템플릿 전체를 오버라이드하는 것은 유지보수가 필요하기 때문에 피해야 합니다. Discourse 업데이트가 테마를 깨뜨리면 diff를 실행하여 무엇이 변경되었는지 확인해야 하므로, 대신 템플릿에 전달되는 데이터를 수정하는 방식으로 접근하는 것이 좋습니다.
topic-list-item은 Ember 컴포넌트이므로, 원하는 변경 사항을 적용하기 위해 api.modifyClass를 사용할 수 있습니다.
예를 들어, 아래 스니펫은 서브카테고리 토픽의 제목 아래에 상위 카테고리 배지를 표시합니다. 토픽이 메인 카테고리에 있는 경우 이 코드는 아무 효과도 없습니다.
<script type="text/discourse-plugin" version="0.8">
const { on } = require("discourse-common/utils/decorators");
// parent category ids
const targetCategoryIds = [9, 15, 50];
const useParentCategory = function () {
const parentCategory = this.attrs.topic.category.parentCategory;
const switchToParent = parentCategory && targetCategoryIds.includes(parentCategory.id)
if (switchToParent) {
this.attrs.topic.set("category", parentCategory);
}
};
api.modifyClass("component:topic-list-item", {
@on("didReceiveAttrs")
setCategory() {
useParentCategory.call(this);
}
});
api.modifyClass("component:latest-topic-list-item", {
@on("didReceiveAttrs")
setCategory() {
useParentCategory.call(this);
}
});
</script>
정말 멋지네요!
특정 카테고리 하나나 여러 개로 제한하는 방법이 있을까요?
목표에 따라 이 문제를 해결하는 두 가지 다른 방법이 있습니다. 원하는 결과는 무엇인가요?
이 부분이 우리가 찾고 있는 내용입니다
위 스니펫을 해당 변경 사항에 맞게 수정했습니다. targetCategoryIds 배열에 상위 카테고리 ID를 추가하기만 하면 됩니다. 카테고리 페이지를 방문하여 URL을 확인하면 카테고리 ID를 찾을 수 있습니다.
https://meta.discourse.org/c/support/6
위 URL 끝의 "6"은 Meta에서 지원 카테고리의 ID입니다.
공유해 주셔서 감사합니다 @Johani ! 이제 막 엠퍼(ember)를 시작하는 중인데… 정말로 많은 도움을 주고 계시네요! 
정말 놀랍네요! 빠른 도움 주셔서 정말 감사합니다.
정말 멋진 것 같아요. 이걸 공유해 주셔서, 그리고 시간을 내어 이런 활동을 할 수 있게 해 주시는 분들에게도 감사드립니다.
@Johani 이 코드 스니펫을 정확히 어디에 넣어야 하나요?
모든 CSS를 저장하는 테마 컴포넌트의 </head> 및 헤더 부분에 넣어 보았지만, 그러면 하위 카테고리의 첫 번째 영향받는 주제가 나열되어야 할 위치에서 주제 목록이 잘려 버립니다.
네, 로컬에서 놓친 카테고리 설정 관련 문제가 있었습니다. 위의 스니펫을 수정했으니 이제 작동할 것입니다.
위의 스니펫은 이 기능이 적용될 카테고리를 설정할 수 있도록 합니다. 모든 카테고리에 적용하려면 다음과 같은 코드를 사용하세요.
<script type="text/discourse-plugin" version="0.8">
const { on } = require("discourse-common/utils/decorators");
const useParentCategory = function () {
const parentCategory = this.attrs.topic.category.parentCategory;
if (parentCategory) {
this.attrs.topic.set("category", parentCategory);
}
};
api.modifyClass("component:topic-list-item", {
@on("didReceiveAttrs")
setCategory() {
useParentCategory.call(this);
}
});
api.modifyClass("component:latest-topic-list-item", {
@on("didReceiveAttrs")
setCategory() {
useParentCategory.call(this);
}
});
</script>
도와주셔서 감사합니다, @Johani! 정말 감사해요!