다음과 같이 커스텀 홈페이지를 만들었습니다:
a) 랜딩 페이지에 .custom-homepage 클래스를 추가했습니다. 이를 통해 해당 특정 페이지에서 숨기거나 조정하려는 콘텐츠를 커스텀 CSS로 쉽게 지정할 수 있습니다.
b) 기본 테마의 커스텀 HTML head 파일에 새 컴포넌트를 직접 추가했습니다.
다음과 같이 보입니다:
<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-main-container", "custom-homepage", {
setupComponent(args, component) {
var topMenuRoutes =
component.siteSettings.top_menu.split('|')
.map(function(route) {return '/' + route});
// 'top_menu' 설정에 나열된 첫 번째 페이지가 홈페이지입니다
var homeRoute = topMenuRoutes[0];
// 페이지가 변경될 때마다 코드를 호출합니다
api.onPageChange((url) => {
// 홈페이지에 있는지 확인합니다
if (url === "/" || url === homeRoute ){
// 홈페이지인 경우 HTML 태그에 'custom-homepage' 클래스를 추가하고
// 'displayCustomHomepage'를 true로 설정합니다
document.querySelector("html").classList.add("custom-homepage");
component.set("displayCustomHomepage", true);
} else {
// 홈페이지가 아닌 경우 클래스를 제거하고
// `displayCustomHomepage`를 false로 설정합니다
document.querySelector("html").classList.remove("custom-homepage");
component.set("displayCustomHomepage", false);
}
});
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/custom-homepage">
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper mask-polygon">
<div class="custom-welcome-banner">
<h1 class="welcome-header-text">Välkommen till Sveriges idéburna byggrörelse</h1>
<p>Här kan du se färdiga och planerade projekt, hitta kunskap, få råd - och få kontakt med andra som bygger och bor ihop över hela landet.</p>
</div>
</div>
{{whos-online}}
{{search-menu}}
<div class="two-column-layout">
<div>
(지도 이미지에 대한 제 코드는 여기에 있습니다. 생략합니다)
</div>
<WANTED DIV>
(여기에 피드를 넣으려고 합니다. 아마도 {{categories-topic- list topics=latest filter=“latest” limit=“10” … }} 같은 것일 겁니다)
</WANTED DIV>
</div>
{{/if}}
</script>
지금까지는 잘 되고 있습니다. 페이지는 다음과 같이 보입니다:
문제는 현재 피드에 대한 제어 권한이 없다는 점입니다. 이는 제 커스텀 CSS에서 .custom-homepage + 클래스를 사용하여 너비와 위치를 대략적으로 지정하여 왼쪽 지도를 위한 공간을 확보한 기본 피드일 뿐입니다. 예를 들어, 현재는 무한 스크롤 상태입니다. 최신 10개의 게시글만 표시되도록 해야 합니다.
제 질문은 다음과 같습니다:
- 현재 피드를 숨기려면 어떤 클래스를 숨겨야 하나요?
- 제 코드로 최신 게시글을 추가하는 올바른 구문은 무엇인가요? 위 코드의 ‘WANTED DIV’ 섹션을 참조하십시오.
라이브 사이트: https://bygg.boihop.co/
도움 주시면 감사하겠습니다.