В первом посте есть ссылка на GitHub с комментариями, объясняющими функцию. Я полагаю, что это всё ещё экспериментальная функция, и для её проверки необходимо использовать CLI-консольное приложение Discourse Theme для помощи в создании тем.
Спасибо за ответ, Мануэль. Я уже использую CLI. В документации по Git показано, как добавить кастомный HTML, а не реальный компонент. Я хочу добавить поисковый баннер, который уже установлен на форуме. Могу ли я вызвать его в home.hbs, или мне нужно создать новый HTML-баннер для поиска?
А как насчёт того, чтобы показать его на главной странице?
Да, это именно та проблема. Мне нужно добавить её на главную страницу. Я уже добавил одну кастомную, теперь их две. Позвольте мне удалить одну из темы. Спасибо ещё раз, очень ценю вашу помощь.
Как упоминалось ранее, при нескольких итерациях фильтр работает на последующих, но не применяется только в первый раз. Таким образом, это сработает, если я добавлю начальную пробную загрузку в хранилище:
Я не знаю, как правильно отладить это, но, возможно, это поможет сузить круг проблемы.
Звучит как кэш, который нужно прогреть.
Да, это связано с тем, как мы предварительно загружаем данные. У меня есть готовый 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 к тегу <body> и класс active к ссылке в боковой панели с href="/custom". Эти функции, вероятно, можно сделать настройками по умолчанию для модификатора?
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?)
Быстрый первый отрисованный кадр (FCP)
Я не совсем понимаю, как технически подойти к этой задаче. Но мне интересно: если мы попадаем на пользовательскую домашнюю страницу, которая обычно отображает ограниченный набор контента, можем ли мы улучшить показатель FCP для домашней страницы и начать её отрисовку ещё до того, как загрузится остальная часть приложения? Возможно, я неправильно понимаю архитектуру единого приложения здесь… Просто немного обидно сначала видеть анимацию загрузки, а затем оказаться на довольно простой странице, которая сама по себе могла бы появиться практически мгновенно.
Возможно… не уверен. Сейчас довольно легко добавить этот класс к любому шаблону компонента — достаточно использовать хелпер bodyClass. Например, в отдельной теме мы делаем так:
<template>
{{bodyClass "custom-homepage"}}
...
</template>
Это даёт тот же результат, что и хук onPageChange, но работает надёжнее. Класс будет добавлен к тегу body только пока компонент отображается.
Если компонент уже имеет все необходимые данные, то да, нет причин, по которым он не мог бы быть отрендерен вместе с остальной частью приложения. Однако в большинстве случаев компоненту потребуется сделать запрос для получения дополнительных данных, что вызывает отображение индикатора загрузки. Честно говоря, я не могу придумать простого способа ускорить эту загрузку.
Кстати, мы внесли дополнительное улучшение в эту функцию. До недавнего времени представление для краулера настраиваемой домашней страницы нельзя было изменить. Теперь это возможно через серверный HTML-выход: DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub
Раньше я изменял свою тему через административный интерфейс, но поскольку теперь получаю предупреждение об устаревании, рассматриваю вариант с кастомной домашней страницей.
Я перенёс свой <head> и CSS, следуя этому примеру. Моя попытка находится здесь. Пока всё хорошо.
Проблема теперь в том, как вставить строку поиска и компонент «Кто онлайн». В моём предыдущем <head> я просто добавлял {{whos-online}} и {{search-menu}} в нужные места в коде, но здесь это не работает — я не могу найти правильный способ их внедрения.
Может ли кто-нибудь подсказать мне правильное направление или знать правильный синтаксис?
Итоговый результат должен выглядеть так (в данный момент я вернулся к своему предыдущему коду, который скоро будет устаревшим).
Я быстро посмотрел локально и столкнулся с проблемой компонента WhosOnline. Однако после перезапуска сервера всё заработало нормально. Код, который я использовал в компоненте главной страницы, был таким:
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
Однако имейте в виду, что SearchMenu всегда присутствует, так как он является частью ядра, тогда как <WhosOnline /> берётся из плагина и регистрируется только если плагин включён.
Это решило проблему с «Кто онлайн» и меню поиска! Отлично. Теперь мне осталось разобраться с синтаксисом для получения ленты, которую я сейчас вижу здесь.
В данный момент она отображается просто путём скрытия всего остального на странице, кроме ленты, вставки главного блока, раздела «Кто онлайн», меню поиска и ссылок, а затем позиционирования ленты относительно них путём переопределения CSS. Это не очень хорошо.
Я почти могу создать макет главной страницы, где все элементы будут размещены на своих местах, но не знаю, как получить саму ленту. Я пытался проанализировать текущую страницу с помощью Ember и изучил компоненты приложения Discourse, чтобы понять, как их импортировать, но безрезультатно.
Есть какие-то подсказки?
Я бы использовал компонент Featured Lists для отображения списка тем с ограниченным количеством тем на главной странице. Насколько я знаю, если вставить основной список, вы получите бесконечный список с ленивой загрузкой. Возможно, это именно то, что вам нужно? Хотя зачем тогда добавлять отдельную главную страницу, если можно просто доработать вашу посадочную страницу прямо в этом представлении списка тем?
Также вы можете обратить внимание на мой компонент Homepage Blocks для настройки макета главной страницы. Вы можете добавлять компоненты и менять их порядок через редактор. Этот компонент также добавляет класс тела homepage и дополнительный обёрточный элемент homepage-blocks, которые можно использовать для более гибкой адаптивной стилизации. Например, вы можете задать сетку для обёртки и изменять макет в зависимости от ширины экрана: на широких экранах — макет с боковой панелью и основным контентом, а на более узких — однострочный макет, где весь контент выстроен в столбик. Сейчас элементы боковой панели просто сжимаются, что на некоторых ширинах может выглядеть неидеально.
Вот простой пример сетки главной страницы, которая меняет макет в зависимости от ширины: https://forum.zolidar.com.