Очень распространённая ситуация, с которой вы столкнётесь как разработчик темы, — это необходимость создать контент, который отображается только на главной странице вашего сообщества.
Вы можете добавить некоторый HTML в раздел «After Header» вашей темы, и тогда он будет появляться на каждой странице. Вы можете потратить много времени на 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. Вы можете добавить любой HTML между блоками {{#if}}.
Теперь, когда наш компонент создан, нам нужно добавить его в Discourse в нужное место. Для этого шага вам нужно решить, какой плагинный отсек (plugin outlet) использовать. Это области в Discourse, где мы добавили немного кода, чтобы разработчики могли подключаться к ним. Вы можете поискать их в 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.
