테마 개발자로서 자주 마주치는 상황 중 하나는 커뮤니티의 홈페이지에서만 표시되는 콘텐츠를 만드는 것입니다.
테마의 “헤더 이후” 섹션에 HTML을 추가하면 해당 콘텐츠가 모든 페이지에 표시됩니다. CSS를 활용하여 홈페이지를 제외한 모든 곳에서 이를 숨기는 방법이 있지만, 대신 Discourse 테마를 사용하여 홈페이지에서만 표시되는 콘텐츠가 포함된 컴포넌트를 만들어 보겠습니다.
Discourse 테마에 익숙하지 않다면 Beginner's guide to using Discourse Themes 과 Structure of themes and theme components 을 확인해 보세요.
Discourse 테마에서 다음 디렉터리 구조를 설정해야 합니다:
javascripts/discourse/components/
javascripts/discourse/connectors/
이제 Ember 컴포넌트를 생성하겠습니다. Ember 컴포넌트에 대한 자세한 내용은 공식 문서에서 확인할 수 있습니다: Ember.js Guides - Guides and Tutorials - Ember Guides
하지만 지금은 로직과 템플릿이 모두 포함된 단일 .gjs 파일로 작성된 간단한 컴포넌트가 될 것입니다.
javascripts/discourse/components/custom-homepage-content.gjs
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";
export default class CustomHomepageContent extends Component {
@service router;
get isHomepage() {
const { currentRouteName } = this.router;
return currentRouteName === `discovery.${defaultHomepage()}`;
}
<template>
{{#if this.isHomepage}}
<h1>This is my homepage HTML content</h1>
{{/if}}
</template>
}
이것은 isHomepage getter를 생성하며, 라우터 서비스의 currentRouteName을 확인합니다. 라우트 이름이 홈페이지(사이트 설정에 의해 결정됨)와 일치하면 true를 반환합니다. <template>...</template> 내부의 템플릿은 해당 getter를 확인하여 true일 때만 콘텐츠를 표시합니다. {{#if}} 블록 사이에 원하는 HTML을 자유롭게 추가할 수 있습니다.
컴포넌트가 생성되었으니 이제 이를 Discourse 어딘가에 추가해야 합니다. 이 단계에서는 어떤 플러그인 아웃렛을 사용할지 결정해야 합니다. 플러그인 아웃렛은 Discourse 전체에 걸쳐 개발자가 코드에 연결할 수 있도록 추가된 영역입니다. Github에서 Discourse를 검색하여 이를 찾을 수 있습니다 또는 (deprecated) Plugin outlet locations theme component 에서 찾아볼 수 있습니다.
사용자 정의 홈페이지의 경우 above-main-container가 일반적인 선택이므로, 이를 사용하겠습니다.
정확한 디렉터리에 커넥터 파일을 생성해야 합니다:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
그리고 그것이 전부입니다. 컴포넌트를 호출하는 한 줄만 필요합니다 
이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안해 주세요.