안녕하세요, 저는 테마의 사용자 정의 필드에서 Discourse의 외관을 커스터마이징하고 있습니다.
| script type="text/x-handlebars" data-template-name="components/categories-only" |
및 유사한 코드를 사용하여 특정 템플릿을 오버라이드하고 있는데, 홈페이지와 같은 특정 페이지에서만 오버라이드하고, 예를 들어 하위 카테고리 뷰에서는 다른 코드를 사용할 수 있는 방법이 있을까요? 저는 아직 Discourse에 익숙하지 않아, 테마의 사용자 정의 HTML/CSS를 통해 이렇게 하는 것이 올바른 방법인지조차 확실하지 않습니다(업데이트 시 변경 사항이 사라진다는 점은 알고 있습니다). 이 부분에 대해 도움을 주실 수 있다면 정말 감사하겠습니다.
우선 이 부분을 명확히 하겠습니다.
이것은 잘못된 정보입니다. 테마 내에서 변경 사항을 수행한 경우 업데이트 시 변경 사항이 사라지지 않습니다. 변경 사항은 유지됩니다. 변경 사항이 사라지는 유일한 경우는 서버에서 파일을 직접 편집할 때이며, 당연히 이렇게 해서는 안 됩니다.
이제, 템플릿을 오버라이드하는 데에는 특정 수준의 리스크가 수반됩니다. 코어 업데이트로 인해 변경 사항이 더 이상 호환되지 않아 업데이트가 필요할 수 있기 때문입니다. 이러한 리스크를 감수할 수 있다면, 여기에서 요청하신 것을 기술적으로 달성할 수 있습니다.
시작하려면 사용자가 홈페이지에 있는지 구별하는 방법이 필요합니다. 카테고리 전용 컴포넌트の場合, searchContext를 확인하는 한 가지 방법이 있습니다. 하위 카테고리 페이지에 있을 때 검색 컨텍스트는 "category"로 설정됩니다. 검색 컨텍스트가 없다면 홈페이지에 있는 것입니다.
이를 템플릿에 전달하는 방법은 다음과 같은 코드를 추가하는 것입니다.
<script type="text/discourse-plugin"
version="0.8">
const categoriesOnlyComponent = require('discourse/components/categories-only').default;
categoriesOnlyComponent.reopen({
isHomepage: function() {
return !this.parentView.searchService.contextType
}.property()
});
</script>
이 코드는 categories-only 템플릿에서 isHomepage를 사용할 수 있게 해줍니다. 검색 컨텍스트가 없으면(즉, 홈페이지에 있으면) true를 반환하고, 그렇지 않으면 false를 반환합니다.
다음으로, 기본 템플릿을 다음과 같이 복사해야 합니다.
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
... 템플릿의 나머지 부분
{{/if}}
</script>
그리고 방금 추가한 isHomepage를 사용합니다. 이를 위해 handlebars의 {{#if}} 헬퍼를 사용해야 합니다. 기본적으로 필요한 것은 다음과 같은 것입니다.
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
{{#if isHomepage}}
... 홈페이지 전용 템플릿
{{else}}
... 홈페이지가 아닌 경우 기본 템플릿의 나머지 부분
{{/if}}
</script>
이제 isHomepage 섹션에서 원하는 것을 사용할 수 있습니다. 바로在那里 편집하거나, 다음과 같이 해당 섹션을 위한 새로운 템플릿을 만들 수도 있습니다.
<script type='text/x-handlebars'
data-template-name='components/categories-only-homepage'>
<h1>홈페이지에 계십니다!</h1>
<p>
사용자가 홈페이지에 있을 때 카테고리 전용 컴포넌트 템플릿을 렌더링하는 데 이 섹션을 사용하세요.
</p>
</script>
마지막으로 해야 할 일은 categories-only 템플릿의 isHomepage 섹션 내에서 해당 템플릿을 부분 템플릿(partial)으로 호출하는 것입니다.
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
{{#if isHomepage}}
{{partial 'components/categories-only-homepage'}}
{{else}}
... 홈페이지가 아닌 경우 기본 템플릿의 나머지 부분
{{/if}}
</script>
그 결과, 홈페이지를 방문하면 다음과 같은 화면이 표시됩니다.
하지만 하위 카테고리에서의 컴포넌트는 변경되지 않은 상태로 유지됩니다.
이것은 선택 사항이지만, 다음과 같은 링크를 확인하는 것도 도움이 될 수 있습니다.
이것은 테마를 작업하고 script 태그 사용을 피하기 위한 새로운 권장 방식이기 때문입니다.
정말 놀랍네요, 많이 감사합니다! 이제 text/discourse-plugin 사용법도 어느 정도 이해하게 된 것 같아요. 정말 감사드립니다!
안녕하세요, 한 가지 더 질문이 있습니다.
특정 하위 카테고리에서 최신 주제를 가져오는 방법을 알려주실 수 있을까요? category.latestTopic을 사용하면 카테고리의 최신 주제는 가져올 수 있지만, 하위 카테고리에는 적용이 안 되네요. 이 문제를 해결할 수 있는 좋은 우회 방법이 있을까요? 하위 카테고리를 나열할 때 해당 하위 카테고리의 최신 주제를 표시하고 싶습니다.