Если вы скачаете последние сборки Discourse, вы получите возможность встраивать списки тем на других сайтах с помощью простого JavaScript и HTML.
Типичный сценарий использования — блог или другой контент-ориентированный сайт, где вы хотите разместить виджет на боковой панели экрана со списком тем. Вы можете фильтровать по категории, тегу или любым другим публичным доступным параметрам фильтрации.
Как встроить список тем
Сначала необходимо включить настройку сайта embed topics list.
Затем в вашем HTML добавьте тег <script>, содержащий JavaScript, необходимый для встраивания тем Discourse. Вы можете добавить его туда, где обычно размещаете скрипты. Например:
<script src="http://URL/javascripts/embed-topics.js"></script>
Замените URL на адрес форума, включая подпапку, если она существует.
После этого в теге <body> вашего HTML-документа добавьте тег d-topics-list, чтобы указать список тем, который вы хотите встроить. Здесь также нужно заменить URL на базовый URL вашего сайта:
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
Любые предоставленные вами атрибуты (кроме обязательного discourse-url) будут преобразованы в параметры запроса для поиска тем. Таким образом, если вы хотите искать темы по тегу, вы можете сделать следующее:
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
Если параметр запроса содержит подчеркивания, замените их дефисами. В приведенном выше примере вы, вероятно, заметили, что per_page стало per-page.
В контекстах SameSite (т. е. когда встраиваемый сайт и ваш форум имеют общий родительский домен) Discourse определит, авторизованы ли вы на форуме, и отобразит результаты соответствующим образом. Не удивляйтесь, если вы увидите защищённые категории и тому подобное при входе в систему — анонимные пользователи не смогут этого сделать!
Список параметров
template: complete или basic (по умолчанию). Пока basic представляет собой просто список заголовков тем, complete включает заголовок, имя пользователя, аватар пользователя, дату создания и миниатюру темы.
per-page: Число. Определяет количество возвращаемых тем.
category: Число. Ограничивает темы одной категорией. Передайте id целевой категории.
allow-create: Булево значение. Если включено, во встроенном виджете появится кнопка «Новая тема».
tags: Строка. Ограничивает темы теми, которые связаны с этим тегом.
top_period: Одно из значений all, yearly, quarterly, monthly, weekly, daily. Если включено, будут возвращены «Лучшие» темы за указанный период.
Примеры
Я создал пример сайта здесь:
Вы можете просмотреть исходный код в браузере, чтобы увидеть код, но весь исходный код также доступен на GitHub:
Это совершенно новая функция, поэтому любые отзывы и предложения будут очень полезны.
Стилизация списка
Вы можете использовать существующую функцию тем для добавления пользовательских стилей для встроенного списка.
Например, по умолчанию наш встроенный список с использованием шаблона complete выглядит так:
Если вы хотите, чтобы он выглядел, например, как сетка, вы можете добавить пользовательский SCSS в Раздел > Общий > Встроенный CSS:
.topics-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
.topic-list-item {
.main-link {
border: 1px dotted gray;
padding: 0;
}
.topic-column-wrapper {
flex-direction: column-reverse;
.topic-column.details-column {
width: 100%;
}
.topic-column.featured-image-column .topic-featured-image img {
max-width: initial;
max-height: initial;
width: 100%;
}
}
}
}
Это сделает его похожим на следующее:
