Очень часто в роли разработчика тем вы столкнетесь с необходимостью создавать контент, который отображается только на главной странице вашего сообщества.
Вы можете добавить 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>Это мой HTML-контент главной страницы</h1>
{{/if}}
</template>
}
Это создает геттер isHomepage, который проверяет сервис роутера на наличие currentRouteName. Если имя маршрута совпадает с именем вашей главной страницы (как задано в настройках сайта), он вернет true. Шаблон внутри <template>...</template> проверяет этот геттер и отображает ваш контент только тогда, когда значение 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.
