Kris님의 이전 게시물을 확인하고, 이를 기반으로 직접 수정하여 여러분이 활용할 수 있는 기초 자료로 만들었습니다. 여기에서 다루는 내용 대부분은 원래 토픽에서 Kris님이 이미 설명해 주셨습니다.
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
모든 코드는 테마의 </head> (head_tag.html) 섹션에 추가됩니다.
첫 번째 섹션은 현재 있는 페이지가 "홈 페이지"인지 확인합니다.
그 다음 Category.list() 메서드를 사용하여 사이트의 카테고리를 가져옵니다.
이후 가져온 카테고리들을 특징적으로 표시하고자 하는 카테고리와 비교합니다. 이 비교 대상은 아래 코드에 정의된 definedFeaturedCategories 배열에 위치합니다. 허용된 카테고리들은 렌더링을 위해 템플릿으로 전달될 컴포넌트에 설정됩니다.
<script type="text/discourse-plugin" version="0.8">
const Category = require("discourse/models/category").default;
// 사이트 카테고리를 가져오기 위해 Category 모델을 사용할 것입니다
api.registerConnectorClass('above-main-container', 'featured-categories', {
// above-main-container는 플러그인 아웃렛이고,
// featured-topics는 사용자 정의 컴포넌트 이름입니다
setupComponent(args, component) {
api.onPageChange((url, title) => {
console.log(url,title)
if ((url === "/") || (url === "/latest") ) {
// 페이지 변경 시 URL이 일치하는지 확인합니다.
// 홈 페이지가 /latest가 아니라면 /categories로 변경하세요.
$('html').addClass('custom-featured-categories');
// CSS 타겟팅을 쉽게 하기 위해 HTML 태그에 클래스를 추가합니다.
let definedFeaturedCategories = ["uncategorized","blog","two"]
// 특징적으로 표시하고자 하는 카테고리 배열
// 카테고리 이름을 소문자로 입력하는 것을 확인하세요.
let featuredCategories = [];
categories = Category.list();
for (let cat of categories) {
if (definedFeaturedCategories.includes(cat.name.toLowerCase())) {
// 렌더링될 배열에 특징적으로 표시하고자 하는 카테고리만 push합니다.
featuredCategories.push(cat)
}
}
component.set('featuredCategories', featuredCategories)
} else {
// 위의 URL과 페이지가 일치하지 않는 경우 다음을 수행합니다:
$('html').removeClass('custom-featured-categories');
// 사용자 정의 클래스를 제거합니다.
component.set('categories',[])
// 렌더링을 비활성화하기 위해 카테고리를 빈 배열로 설정합니다.
}
});
}
});
</script>
다음 섹션은 위에서 생성된 컴포넌트의 템플릿을 플러그인 아웃렛 above-main-container에 주입합니다. 세 번째 단계에서 생성된 사용자 정의 categories-wrapper를 호출하고, categories를 위에서 생성된 featuredCategories로 정의합니다.
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/featured-categories">
<div class="custom-featured-categories-wrapper">
{{categories-wrapper categories=featuredCategories}}
<!-- 아래에서 생성된 categories-wrapper 템플릿을 사용합니다. -->
<!-- categories를 위에서 스크립트로 생성된 featuredCategories로 정의합니다. -->
</div>
</script>
세 번째 섹션은 특징적인 카테고리를 렌더링하기 위한 사용자 정의 categories-wrapper handlebars 템플릿을 생성합니다. 이 부분은 Discourse의 categories-only.hbs Discourse의 카테고리 페이지에서 사용됨에서 직접 수정되었습니다.
<script type="text/x-handlebars" data-template-name="components/categories-wrapper">
<!-- 'categories wrapper'라는 이름의 컴포넌트 템플릿을 생성합니다. -->
<!-- 이 템플릿 코드의 모든 부분은 Discourse 자체의 카테고리 페이지 템플릿에서 수정되었습니다.
https://github.com/discourse/discourse/blob/acd1693dac1bff6ff50250d942134bc48a27ff14/app/assets/javascripts/discourse/templates/components/categories-only.hbs -->
<div class="top-categories-wrapper">
{{#each categories as |c|}}
<div class="top-category-column-one">
{{category-title-link category=c}}
{{#if c.escription}}
<div class="category-description">
{{dir-span c.description}}
</div>
{{/if}}
{{#if c.isGrandParent}}
<table class="category-list subcategories-with-subcategories">
<tbody>
{{#each c.subcategories as |subcategory|}}
<tr
data-category-id={{subcategory.id}}
data-notification-level={{subcategory.notificationLevelString
}}
class="{{if
subcategory.description_excerpt
"has-description"
"no-description"
}}
{{if subcategory.uploaded_logo.url "has-logo" "no-logo"}}"
>
<td
class="category"
style={{border-color subcategory.color}}
>
{{category-title-link tagName="h4" category=subcategory}}
{{#if subcategory.description_excerpt}}
<div
class="category-description subcategory-description"
>
{{{dir-span subcategory.description_excerpt}}}
</div>
{{/if}}
{{#if subcategory.subcategories}}
<div class="subcategories">
{{#each subcategory.subcategories as |subsubcategory|
}}
{{#unless subsubcategory.isMuted}}
<span class="subcategory">
{{category-title-before category=subsubcategory
}}
{{category-link subsubcategory hideParent="true"
}}
</span>
{{/unless}}
{{/each}}
</div>
{{else if subcategory.description_excerpt}}
<div
class="category-description subcategory-description"
>
{{{dir-span subcategory.description_excerpt}}}
</div>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{else if c.subcategories}}
<div class="subcategories">
{{#each c.subcategories as |subcategory|}}
{{#unless subcategory.isMuted}}
<span class="subcategory">
{{category-title-before category=subcategory}}
{{category-link subcategory hideParent="true"}}
{{category-unread category=subcategory}}
</span>
{{/unless}}
{{/each}}
</div>
{{/if}}
</div>
<div class="top-category-column-two">
<span class="topics-header">
Topics
</span>
<span class="topics-count">
{{c.topic_count}}
</span>
{{category-unread category=c tagName="div" class="unread-new"}}
</div>
{{/each}}
</div>
</script>
이것은 OP에서 요청하신 작업을 시작하는 데 도움이 될 것입니다.
세 번째 섹션에서 각 카테고리 박스의 색상을 사용자 정의된 색상으로 스타일링하려면, # + c.color를 사용하여 카테고리의 색상 코드에 접근하여 스타일을 하드코딩할 수 있습니다.
그 외의 스타일링은 common.scss 파일에서 수행할 수 있습니다.