# Встраивание списка тем Discourse на другой сайт
**URL:** https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911
**Category:** Announcements
**Tags:** embedding
**Created:** [15.Август.2019 17:53:02 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911 "2019-08-15T17:53:02Z")
**Posts on this page:** 1
**Showing post:** 1
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [15.Август.2019 17:53:02 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/1 "2019-08-15T17:53:02Z")
Если вы скачаете последние сборки Discourse, вы получите [возможность встраивать списки тем](https://github.com/discourse/discourse/commit/23367e79ea735598766ec6f507f6132e0bad3dba) на других сайтах с помощью простого JavaScript и HTML.
Типичный сценарий использования — блог или другой контент-ориентированный сайт, где вы хотите разместить виджет на боковой панели экрана со списком тем. Вы можете фильтровать по категории, тегу или [любым другим публичным](https://github.com/discourse/discourse/blob/master/lib/topic_query.rb#L51-L73) доступным параметрам фильтрации.
### Как встроить список тем
Сначала необходимо включить настройку сайта `embed topics list`.
Затем в вашем HTML добавьте тег ``
Замените `URL` на адрес форума, включая подпапку, если она существует.
После этого в теге `` вашего HTML-документа добавьте тег `d-topics-list`, чтобы указать список тем, который вы хотите встроить. Здесь также нужно заменить `URL` на базовый URL вашего сайта:
``
Любые предоставленные вами атрибуты (кроме обязательного `discourse-url`) будут преобразованы в параметры запроса для поиска тем. Таким образом, если вы хотите искать темы по тегу, вы можете сделать следующее:
``
Если параметр запроса содержит подчеркивания, замените их дефисами. В приведенном выше примере вы, вероятно, заметили, что `per_page` стало `per-page`.
В контекстах [SameSite](https://web.dev/same-site-same-origin/#same-site-cross-site) (т. е. когда встраиваемый сайт и ваш форум имеют общий родительский домен) Discourse определит, авторизованы ли вы на форуме, и отобразит результаты соответствующим образом. Не удивляйтесь, если вы увидите защищённые категории и тому подобное при входе в систему — анонимные пользователи не смогут этого сделать!
### Список параметров
`template`: `complete` или `basic` (по умолчанию). Пока `basic` представляет собой просто список заголовков тем, `complete` включает заголовок, имя пользователя, аватар пользователя, дату создания и миниатюру темы.
`per-page`: Число. Определяет количество возвращаемых тем.
`category`: Число. Ограничивает темы одной категорией. Передайте `id` целевой категории.
`allow-create`: Булево значение. Если включено, во встроенном виджете появится кнопка «Новая тема».
`tags`: Строка. Ограничивает темы теми, которые связаны с этим тегом.
`top_period`: Одно из значений `all, yearly, quarterly, monthly, weekly, daily`. Если включено, будут возвращены «Лучшие» темы за указанный период.
### Примеры
Я создал пример сайта здесь:
[https://embed.eviltrout.com](https://embed.eviltrout.com)
Вы можете просмотреть исходный код в браузере, чтобы увидеть код, но весь исходный код также доступен на GitHub:
> **[GitHub - eviltrout/embed-topics: Examples for Embedding Discourse Topics](https://github.com/eviltrout/embed-topics)**
>
> Examples for Embedding Discourse Topics
Это совершенно новая функция, поэтому любые отзывы и предложения будут очень полезны.
### Стилизация списка
Вы можете использовать существующую функцию тем для добавления пользовательских стилей для встроенного списка.
Например, по умолчанию наш встроенный список с использованием шаблона `complete` выглядит так:
Если вы хотите, чтобы он выглядел, например, как сетка, вы можете добавить пользовательский SCSS в Раздел \> Общий \> Встроенный CSS:
```scss
.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%;
}
}
}
}
```
Это сделает его похожим на следующее:
---
_[View the full topic](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911)._