첫 번째 게시물에는 해당 기능을 설명하는 주석이 포함된 Github 링크가 있습니다. 이 기능은 아직 실험 단계이며, 사용해 보려면 테마 빌드를 돕는 Discourse 테마 CLI 콘솔 앱을 설치해야 합니다.
답변해줘서 고마워, 마누엘. 저는 이미 CLI를 사용 중인데, Git 문서에는 커스텀 HTML을 추가하는 방법은 나와 있지만 실제 컴포넌트를 추가하는 방법은 나와 있지 않아요. 이미 포럼에 설치되어 있는 검색 배너를 홈.hbs에서 호출할 수 있는지, 아니면 검색 배너를 사용하기 위해 새로운 HTML 검색 배너를 만들어야 하는지 궁금합니다.
그렇다면 홈페이지에 표시하는 건 어떨까요?
네, 바로 그 문제입니다. 홈페이지에 추가해야 하는데, 커스텀 항목을 하나 추가했더니 지금 2개가 되었습니다. 테마에서 하나를 제거하겠습니다. 다시 한번 감사드립니다, 정말 감사해요.
언급했듯이 반복이 여러 번 이루어지면 이후 반복에서는 정상적으로 작동하며, 필터가 적용되지 않는 경우는 처음 한 번뿐입니다. 따라서 스토어에 초기 dry run을 추가하면 작동합니다:
이 문제를 어떻게 제대로 디버깅해야 할지 모르지만, 문제 범위를 좁히는 데 도움이 될 수도 있습니다.
따뜻하게 해줘야 할 캐시인 것 같네요.
네, 데이터를 미리 로드하는 방식과 관련이 있습니다. 잠재적인 수정안이 포함된 PR을 준비해 두었습니다: DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub
다음 주 초에 병합할 예정입니다.
위 PR이 이제 병합되었습니다 @manuel. 이로 인해 해당 문제가 수정되어야 합니다. 보고해 주셔서 다시 한번 감사합니다!
오늘 이 테마 수정자를 사용할 때, 새로 권장된 방식으로 루트에 컴포넌트를 추가하는 것이 작동하지 않는다는 것을 알게 되었습니다.
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
작동하는 유일한 방법은 javascripts/connectors/custom-homepage/welcome-banner.hbs를 사용하는 것입니다.
내 환경에서는 잘 작동하는 것 같아.. 다른 컴포넌트를 렌더링하고 있는 건가? 하나만 사용할 때 작동하는 문제가 있었던 것 같아. 아니면 지금 스테이블 버전에서만 사용하고 있어서 그런 걸 수도 있고.
더 테스트를 해봐야 할 것 같아. 왜 지금 안 되는 건지 모르겠거든.
저는 이 기능을 제 Homepage Blocks 컴포넌트와 함께 꽤 많이 사용해 왔습니다. 두 가지 제안이 있습니다:
기본 클래스
컴포넌트를 조정하여 본문에 homepage 클래스를, href="/custom"가 있는 사이드바 링크에 active 클래스를 항상 추가하도록 했습니다. 이러한 기능들은 수정자(modifier)의 기본값으로 설정할 수 있지 않을까요?
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href="/custom"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
*(처음에는 사이드바 링크를 기본적으로 추가하는 것을 원했지만, 인터페이스에서 해당 링크를 편집할 수 없다는 것은 큰 단점으로 느껴집니다. How can I edit sidebar links that are added with api.addCommunitySectionLink? 참조)
빠른 첫 페인트(Snappy First Paint)
이 부분을 기술적으로 어떻게 접근해야 할지 모르겠습니다. 하지만 제한적인 콘텐츠 선택을 보여주는 것이 일반적인 커스텀 홈페이지에 도착할 때, 나머지 앱이 로딩되는 동안 홈페이지를 먼저 렌더링하여 FCP(First Contentful Paint)를 개선할 수 있지 않을까요? 아마도 여기의 단일 앱(Single Page Application) 아키텍처의 특성을 오해하고 있는 것일 수 있습니다. 하지만 로딩 애니메이션을 먼저 본 후, 자체적으로는 거의 즉시 표시될 수 있을 만큼 단순한 페이지에 도달하는 과정은 다소 실망스럽게 느껴집니다.
아마도… 확실하지 않습니다. 지금은 bodyClass 헬퍼만 사용하면 어떤 컴포넌트 템플릿에든 이 클래스를 추가하는 것이 비교적 쉽습니다. 예를 들어, 다른 테마에서는 이렇게 하고 있습니다:
<template>
{{bodyClass "custom-homepage"}}
...
</template>
이것은 onPageChange 훅과 동일한 효과를 내지만, 더 신뢰할 수 있습니다. 이 클래스는 해당 컴포넌트가 렌더링되는 동안에만 body에 설정됩니다.
컴포넌트가 이미 필요한 모든 데이터를 가지고 있다면, 네, 앱의 나머지 부분과 함께 렌더링되지 못할 이유가 없습니다. 하지만 대부분의 경우, 컴포넌트는 추가 데이터를 가져오기 위해 요청을 해야 하며, 이는 로딩 표시자를 트리거합니다. 솔직히 말하면, 이를 더 빠르게 로드하는 쉬운 방법을 떠올리지 못하겠습니다.
여기서 한 가지, 이 기능에 대한 추가적인 개선을 했습니다. 아주 최근까지 커스텀 홈페이지의 크롤러 뷰는 커스터마이징할 수 없었습니다. 하지만 이제는 서버 사이드 HTML 아웃렛을 통해 커스터마이징할 수 있습니다: DEV: Fix custom homepage crawler display and override - Pull Request #31841 - discourse/discourse - GitHub
저는 이전에 관리자 UI를 통해 테마를 수정했지만, 이제 비추천(deprecation) 경고가 뜨고 있어서 custom-homepage 옵션을 사용해보려고 합니다.
이 예제를 따라 <head>와 CSS를 마이그레이션했습니다. 제 시도는 여기에 있습니다. 지금까지는 잘 되고 있습니다.
문제는 이제 검색 바와 ‘Who’s Online’ 구성 요소를 어떻게 삽입하느냐는 것입니다.
이전 <head>에서는 원하시는 위치에 {{whos-online}}와 {{search-menu}}를 단순히 추가했지만, 여기서는 작동하지 않습니다 - 올바르게 주입하는 방법을 찾을 수 없습니다.
혹시 올바른 방향이나 정확한 문법을 알려주실 수 있는 분이 있을까요?
최종 결과는 이렇게 보여야 합니다 (현재는 곧 비추천으로 전환될 이전 코드로 되돌려 놓은 상태입니다).
로컬에서 간단히 확인해 보았으며, WhosOnline 컴포넌트에서 문제가 발생했습니다. 하지만 서버를 재시작한 후에는 정상적으로 작동했습니다. 홈 페이지 컴포넌트에서 사용한 코드는 다음과 같습니다:
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
다만, SearchMenu는 코어에 포함되어 있어 항상 존재하는 반면, <WhosOnline />는 플러그인에서 가져온 것으로, 플러그인이 활성화된 경우에만 등록됨에 유의하시기 바랍니다.
Who’s Online와 검색 메뉴 문제는 해결되었습니다! 훌륭하네요. 이제 제가 현재 보고 있는 피드를 가져오는 구문만 파악하면 됩니다. 여기.
현재는 페이지에서 피드 외의 모든 것을 숨기고, 히어로, Who’s Online, 검색 메뉴 및 링크를 삽입한 뒤, CSS를 오버라이드하여 피드를 해당 요소들에 대해 상대 위치로 설정하는 방식으로 표시되고 있습니다. 완벽하지는 않네요.
모든 요소를 올바른 위치에 배치할 수 있는 사용자 정의 홈 페이지 레이아웃을 만드는 데 거의 성공했지만, 피드를 가져오는 방법을 아직 찾지 못했습니다. Ember로 현재 페이지를 검사하고, discourse 앱 컴포넌트에서 어떻게 가져오는지 확인해 보았지만 성공하지 못했습니다.
어떤 단서가 있을까요?
홈페이지에서 제한된 수의 주제를 강조 표시하는 주제 목록을 위해 Featured Lists와 같은 구성 요소를 사용하는 것이 좋습니다. 핵심 목록을 삽입하면 지연 로딩(lazy load)되는 무한 목록이 생성된다고 생각합니다. 혹시 이것이 원하시는 기능일까요? 그렇다면 별도의 홈페이지를 추가하는 것보다 해당 주제 목록 보기에서 랜딩 페이지를 직접 구축하는 것이 왜 더 나은가요?
홈페이지 레이아웃을 구성하기 위해 제 구성 요소인 Homepage Blocks도 살펴볼 수 있습니다. 이 구성 요소를 사용하면 편집기를 통해 구성 요소를 추가하고 순서를 배열할 수 있습니다. 이 구성 요소는 homepage라는 바디 클래스와 더 나은 반응형 스타일링을 위해 사용할 수 있는 추가 래퍼 요소 homepage-blocks도 추가합니다. 예를 들어 래퍼에 그리드를 정의하고 폭에 따라 레이아웃을 조정하여, 넓은 화면에서는 사이드바와 메인 콘텐츠가 있는 레이아웃을, 더 좁은 화면에서는 모든 콘텐츠가 쌓인 단일 행 레이아웃을 사용할 수 있습니다. 현재 사이드바 항목은 단순히 축소되어 일부 폭에서 이상적으로 보이지 않을 수 있습니다.
폭에 따라 레이아웃이 전환되는 간단한 홈페이지 그리드 예시는 다음과 같습니다: https://forum.zolidar.com.