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

Привет,

Я wondered, есть ли способ отображать аватар автора последнего сообщения и категорию постов, как на главной странице форума, вместо того чтобы показывать только названия тем?

3 лайка

Если вы передадите template=complete, в embed будет гораздо больше информации:

3 лайка

Вау, спасибо, это… слишком много информации :laughing: Есть ли что-то среднее, или мне стоит скрыть лишнюю информацию с помощью пользовательского CSS?

Кстати, это отображает автора темы, а не автора последнего сообщения.

3 лайка

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

3 лайка

Это отлично!

Можно ли изменить его ширину?

2 лайка

Это гибкий контейнер, который будет подстраиваться под ширину родительского элемента.

2 лайка

На моём сайте так не происходит. К сожалению, он слишком широк для div-элемента, в котором находится.

2 лайка

Проверьте разметку дважды, скройте и правильно расположите элементы — это должно работать в любом контейнере:

2 лайка

К сожалению, это не работает на моем сайте. Думаю, возможно, стили CSS в адаптивном фреймворке его сбивают. Есть ли способ изменить ширину (например, сделать её на 90% от текущей или даже на несколько пикселей меньше)?

2 лайка

Вы пробовали использовать CSS, например:

d-topics-list iframe {
    padding: 0 5%;
}

?

2 лайка

Это не работает. Однако, если я отредактирую тег iframe в консоли F12 Chrome, добавив width="100%", всё работает нормально… есть ли способ внести это изменение?

2 лайка

Я добавил пример того, как добавить пользовательский CSS, в список в первом сообщении темы.

4 лайка

Спасибо. Я попробовал это. Это действительно заставляет встроенные темы отображаться в виде сетки. К сожалению, ширина сетки (то есть двух тем) по-прежнему такая же, как и раньше — далеко не 100%.

Приведённый выше CSS (d-topics-list iframe) никак не влияет на iframe. Если бы только можно было установить для него “width: 100%”…

Я пробовал это в пустом HTML-документе, и он всё равно остаётся узким. Есть ещё какие-то идеи? :slight_smile:

3 лайка

Мне очень нравится этот виджет… :sparkling_heart:

Несколько замечаний и одна просьба о новой функции…:

  • Если я добавляю параметры allow-create="true" и category="4", то при нажатии на кнопку «+ Создать новую тему» модальное окно/всплывающее окно «Добавить новую тему» не открывается. Оно должно открываться?
  • Если я добавляю параметры allow-create="true" и tags="random-tag", то при нажатии на кнопку «+ Создать новую тему» меня перекидывает в список тем, отфильтрованный по тегу random-tag, но в выпадающем списке тегов не отображается «random-tag», а при нажатии «Добавить новую тему» тег не подставляется автоматически.
  • Можно ли добавить первые, скажем, 100 слов поста в полную тему?
4 лайка

Это было бы здорово!

Также я всё ещё хочу разобраться с вопросом ширины… :slight_smile:

2 лайка

CSS нужно добавить на ваш сайт, а не в встроенный CSS Discourse. Так что у вас будет что-то вроде этого:

<html>
  <head>
    <script src="https://jonathan5-discourse.com/javascripts/embed-topics.js"> 
    </script>
    <style>
      d-topics-list iframe{
        width: 100%!important;
        }
    </style>
  </head>
  <body>
    <d-topics-list discourse-url="https://jonathan5-discourse.com" category="5" per-page="5"></d-topics-list>
  </body>
</html>
6 лайков

Спасибо большое. Теперь это кажется очевидным. Я перешёл от того, что не мог стилизовать внутренний CSS iframe (попытка в рамках моего сайта), к тому, что не мог стилизовать сам iframe (попытка в рамках Discourse). Попробую это и отпишусь!

Обновление: Ваш CSS сработал — огромное спасибо.

4 лайка

Я только что попробовал это. В моём случае это category=5, так как это номер категории, которую я встраиваю. Всплывающее окно не отображается, но открывается новая вкладка с URL https://forum.example.com/new-topic?category_id=5. Возможно, у вас есть настройка браузера, которая блокирует подобные «всплывающие окна»?

2 лайка

Спасибо, что подтвердили, что у вас всё работает, @Jonathan5. Я отключил компонент темы discourse-tag-sidebar, и теперь всплывающее окно работает :sunglasses:

3 лайка

Я займусь этим вопросом :eyes:

4 лайка