Встраивание списка тем Discourse на другой сайт

Новости и события Объявления
59

Я не думаю, что это возможно. Код Discourse, используемый для получения тем, извлекает только списки последних тем. Из доступных фильтров для сортировки списков, о которых я знаю, это replies, views, activity, likes. Вы можете попробовать отсортировать списки с помощью одного из этих фильтров, чтобы выбрать лучшие темы. Например:

<d-topics-list discourse-url="http://localhost:3000" category="14" per-page="5" order="replies"></d-topics-list>

Шрифт, используемый во фрейме (iframe), задается в Discourse. В последней версии Discourse у меня возникла проблема с настройкой шрифта при встраивании списка тем на мой сайт WordPress. Я тестирую это локально, а не на рабочем сайте, так что это может быть связано с проблемой. Я обнаружил, что для шрифта фрейма передается следующий стиль:

font-family: var(--font-family);

Этот стиль задается в Discourse, но WordPress не имеет доступа к переменной, поэтому шрифт на моем сайте устанавливается как Times New Roman. Я изучу эту проблему подробнее. (Редактирование: проблема с настройкой шрифта вызвана недавними изменениями в Discourse. Мы исправим это.)

Это может быть непросто. Фрейм (iframe), который создается, находится внутри элемента d-topics-list, который вы добавляете на страницу. Установка значения явной ширины в CSS моего сайта работает у меня. Однако, думаю, это можно улучшить:

d-topics-list iframe{
	width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}
6 лайков
61

В верхнем левом углу iframe отображается число (например, 110.5 мс), которое является ссылкой на /embed/topics. Можно ли его убрать?

Редактирование: Ответ заключается в том, что оно отображается только для «разработчика Discourse»: What is this box at the upper left displaying timings in milliseconds when I am logged in as admin? :slight_smile:

7 лайков
75

Привет! Я пытаюсь встраивать посты на сайт WordPress, и часть с встраиванием у меня уже работает. Можно ли сделать мобильный вид немного привлекательнее? Если у постов есть изображения, макет колонок с изображениями сжимается вместе. Простое решение:

@media (max-width: 768px) {
	.topics-list .topic-list-item .topic-column-wrapper {
	    flex-direction: column;
	}
}

решает эту проблему. Есть ли шанс, что что-то подобное можно будет реализовать?

С уважением, М

3 лайка
76

При редактировании темы вы должны иметь возможность добавлять здесь свой собственный CSS. Есть ли причина, по которой вы хотите разместить его в ядре?

2 лайка
77

О, я не знал, что это загрузит CSS-тему Discourse! Давайте попробую и вернусь к вам с ответом!

2 лайка
78

Для этой цели в разделе тем есть подраздел для встраивания!

4 лайка
79

Привет! Я уже встроил список тем на свой сайт, но теперь пытаюсь выделить только одну тему по тегу. Мне удалось встроить ещё один список (с параметром per-page=1), но проблема в том, что я не могу добавить CSS-классы или ID, поэтому между первым списком и этим нет никакой разницы.

Это означает, что даже такая простая вещь, как использование другого цвета фона для одного из встроенных списков, становится невозможной.

Есть ли какое-то обходное решение?

Буду очень благодарен за вашу помощь.

2 лайка
80

Спасибо @eviltrout, добавление этого кода в «Встроенный CSS» решило проблему!

2 лайка
82

В настоящее время нет способа добавить разные правила CSS к разным вставкам. Вы можете добавить только пользовательские стили, которые применяются ко всем вставкам.

4 лайка
83

При встраивании последних тем на https://vceliquidrecipes.com/ я вижу следующую ошибку:

includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168 POST https://vapingcommunity.co.uk/mini-profiler-resources/results 404

(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168
fetchResults @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:169
initPopupView @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:763
doInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1050
sc.onload.sc.onreadystatechange @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1065
load (async)
load @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1061
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1109
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1089
setTimeout (async)
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1085
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1118
(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1463

Мой код встраивания выглядит так:

<d-topics-list discourse-url="https://vapingcommunity.co.uk" status="open" order="replies" per-page="10"></d-topics-list>
2 лайка
84

Эти ошибки, похоже, связаны с мини-профайлером и, вероятно, не отображаются для обычного пользователя. Я посетил ваш сайт и увидел список тем без ошибок.

4 лайка
85

О, значит, это нормально, они должны отображаться в логах, верно?

2 лайка
86

Не уверен, что это нормально, но беспокоиться не о чем. У большинства пользователей нет доступа к мини-профайлеру, поэтому он, скорее всего, отображается только у вас.

3 лайка
87

Хорошо, спасибо за вашу помощь, она, как всегда, очень ценится. Продолжайте в том же духе!

2 лайка
88

Приветствуем, спасибо за вашу усердную работу над этим.

В Firefox и Chrome список работает не так, как ожидалось. Несмотря на то, что мы настроили его на отображение 10 тем, отображается только 4.

В Chrome при встраивании списка мы наблюдаем эту ошибку JS:

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
    at u (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:105)
    at window.onload (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:515)

Интересно, что это не происходит в Safari.

Список встраивается на этом сайте: https://rebetiko.sealabs.net (в конце страницы, если вы захотите протестировать его самостоятельно).

4 лайка
89

Может ли кто-нибудь из вас воспроизвести эту проблему? :slight_smile:

CC: @JimPas, @simon, @Vaping_Community

3 лайка
90

На странице 10 ссылок на темы, 6 из них по какой-то причине скрыты, я не понимаю, в чём ошибка.

Добавление высоты для iframe позволяет отобразить скрытые ссылки на темы:

d-topics-list iframe {
    height: 380px;
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
}
4 лайка
91

У меня тоже была такая проблема. Иногда всё выглядело нормально, а иногда список тем обрезался (как будто ограничение было по количеству пикселей, а не по количеству тем), и шрифт отображался не так, как ожидалось (детали уже не помню). Я перешёл на использование RSS-ленты Discourse. Я использую только Chrome и не подозревал, что проблема может быть только в нём.

3 лайка
92

Привет!

Есть ли способ исключить темы из списка?

2 лайка
93

Может, для этого подойдут теги? Пометьте темы, которые должны отображаться в списке, и отфильтруйте их по тегам?

5 лайков