테마 개발자로 활동하다 보면 커뮤니티의 홈페이지에서만 표시되는 콘텐츠를 생성해야 하는 상황에 자주 직면하게 됩니다.
테마의 “After Header” 섹션에 일부 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의 어딘가에 추가해야 합니다. 이 단계에서는 어떤 플러그인 아웃렛(plugin outlet)을 사용할지 결정해야 합니다. 플러그인 아웃렛은 개발자가 코드를 연결할 수 있도록 Discourse 곳곳에 추가된 영역입니다. Github에서 이를 검색하거나 (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에서 제안해 주세요.