Предпросмотр списка тем (TLP)

Это компонент темы (Theme Component), но с возможностью добавить дополнительный плагин.

:information_source: Краткое описание Исходный компонент «Предпросмотр тем», позволяющий добавлять изображения и выдержки (и многое другое!) в список тем, при этом можно настроить, какие дополнения отображаются в каком списке.
:hammer_and_wrench: Ссылка на репозиторий GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub
:open_book: Гид по установке Installing a theme or theme component
:heart: Спонсорство Пожалуйста, рассмотрите возможность стать постоянным спонсором моей работы с открытым исходным кодом на уровне, который соответствует ресурсам и потребностям вас или вашей организации, чтобы обеспечить этому компоненту необходимую поддержку и гарантировать его стабильную работу на вашем сайте в будущем.

Вам нравится этот компонент темы? Пожалуйста, поставьте :star: на GitHub

Установить этот компонент темы

Отлично работает в связке с Discourse Bars 🍻 🍸 (a sidebar framework)!

Обзор

Topic List Previews позволяет вам:

  • Добавлять миниатюры, выдержки, аватары участников и статистику тем в списки тем
  • Использовать традиционные строки, адаптивные плитки или макеты в стиле «кирпичная кладка» (masonry)
  • Настраивать предпросмотры независимо для каждого списка тем, категории и тега
  • Управлять размером, разрешением, резервными изображениями и лимитами отображения миниатюр
  • Подсвечивать выбранные темы с помощью более крупных плиток «Избранное»
  • Добавлять темы «Избранное» над списками тем, с фильтрацией и сортировкой по необходимости
  • Улучшать поиск на полной странице с помощью миниатюр, выдержек и данных об авторах
  • Добавлять «Стену пользователей» на страницы активности — функция «Портфолио»

Плагин-компаньон (Sidecar)

Этот компонент можно дополнить плагином «sidecar»: https://github.com/merefield/discourse-topic-previews-sidecar-pro

В настоящее время это закрытый репозиторий, доступ к которому получают мои спонсоры GitHub, вносящие не менее 7 долларов в месяц.

для добавления следующих функций:

  • «Действия» — добавление в закладки, шаринг и лайки непосредственно из списка тем
  • Выбор миниатюры — выберите любое изображение из всей темы
  • Фоновые цвета на основе доминирующего цвета выбранной миниатюры
  • Автоматическое удаление черных рамок с миниатюр YouTube
  • Необязательное пересоздание миниатюры при перестроении поста темы
  • Настраиваемая длина выдержки и необязательное удаление ссылок
  • Предпросмотры принятых решений и ответов в формате «Вопрос-ответ»
  • Опция показа выдержки из последнего поста
  • Опция направления кликов по предпросмотру к последнему посту
  • Предпросмотры миниатюр в результатах поиска
  • Индивидуальные настройки пользователя для миниатюр с более низким разрешением

Гид по установке плагина: Install plugins on a self-hosted site

Вам как минимум нужен компонент темы, плагин является необязательным.

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

Этот гибкий набор функций позволяет создавать различные стили списков тем, включая:

Базовый стиль

Соответствующие настройки
  • миниатюра списка тем
  • выдержка списка тем
  • действие списка тем

Стиль Pinterest (Masonry), также известный как «плитки»

Соответствующие настройки
  • плитки списка тем
  • миниатюра списка тем
  • выдержка списка тем
  • действие списка тем
  • ширина миниатюры списка тем
  • высота миниатюры списка тем

который имеет опцию широкого формата (за настройкой topic_list_tiles_wide_format):

Это работает адаптивно, поэтому при недостаточной ширине макет свернется в формат «кирпичная кладка» (и наоборот).

Избранные изображения

Соответствующие настройки
  • тег избранных изображений списка тем
  • количество избранных изображений списка тем
  • ширина избранных изображений списка тем
  • высота избранных изображений списка тем
  • заголовок избранных изображений списка тем
  • выдержка избранных изображений списка тем
  • порядок избранных изображений списка тем

Переключение выдержек:

Я представил эту функцию некоторое время назад для использования с моим плагином AI Topic Summaries.

Вы можете использовать его для TLP:

Примеры в дикой природе :seedling:

Поддержка

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

Также есть вариант разового поиска ошибок.

54 лайка
Facebook-like Feed?
Topic List Previews (legacy)
A more social Discourse layout
Discourse AI Topic Summary :robot:
Hi, is there a plugin for user image galleries?
Imageboard layout for topics (topic excerpts)
What are good plugins or theme components for a forum emphasizing pictures?
Changing views to creating date?
New Photography Theme
Search results page displays topics title that I cannot click
I want to create a Theme/Theme component as shown in the picture below!
No Thumbnail for Unlisted Vimeo Videos
Plugin vs. theme component
Discourse.stpl and discourse.tlp
Enabling a plugin for a specific theme only
Undefined column 'boomarks.post_id' after update
Attempted to upgrade and I think I messed something up
Allow users to block keywords
How to display posts as blocks?
Option to select format and compression degree for thumbnails
FKB Pro - Social theme
FKB Pro - Social theme
Multiple installs of user portfolio
Any plugins that show MEDIA on forum index?
FKB Pro - Social theme
Topic List Sort - Random
How can I change the background of a certain topic?
Homepage plugin for displaying recent topics, latest members, popular threads, and similar elements
Some posts showing 'ignored content'
Topic details under title
FKB Pro - Social theme
How to set summary word count?
Ghost Theme
2023: The Year in Review
Can the homepage display images within the Topic feed?
Expand new posts in topics in "Unread" and "New" to full summary
Can we get a custom PROFILE up?
Topic Author
Is it possible to display the thumbnails in Docs?
All links to categories broken?
Discussion grid latest
Is there a Kanban theme for Discourse?
Is it possible to add posts to a profile?
Carousel sliders with Featured Tiles component on mobiles?
How to display posts in grid?
FKB Pro - Social theme
Can discourse be used entirely through the APIs to build a flutter app?
2024: The Year in Review
How can I set the search results displayed in grid or mansionry
Visually better separate topics on the home page
Can Discourse achieve this kind of card UI layout for topics?
Creating a Unique Gallery Layout for a Category
View count on fakebook theme
Display post content in homepage
Create a forum with the same interface and functions
Help with display home screen look
Is there a way to display topic contents in category view?
How can I make my forum look like this one?
Homepage Feature
Cannot see the multiple posts selection icon on desktop view
Fakebook Theme
Video thumbnails issue
Don't show grid, just topics list
Guest Gate Theme Component
Visual newsfeed as community home
Visual newsfeed as community home
Posts appear twice on homepage
Using Discourse to Build a Blog, Reddit, X or Facebook-Style Scrolling Platform
Looking for feedback on my new Discourse site ✨
Featured Topics
PAID - Seeking Discourse Developer for Custom Portfolio Feature
Eliminate YouTube thumbnail black bars
This theme (or component) msg doesn't go away
How to create a banner with link in the image?
Chat channels and chat nav seem to have broken
Topic List Previews (legacy)
Adding Like Dislike Buttons And Inline Replies To Redditish Theme
News on the sidebar
2021: The Year in Review
Topic excerpts appearing after update to Discourse 2.8
Thumbnail of topic
Extend Topic List Thumbnails TC with like button
Infinite scrolling is a total pain
Developing a component or plugin similar to topic list thumbnails or topic list previews

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

Например, если у меня есть 10 изображений и я помечаю 5 из них как избранные, они отображаются в верхней панели. Если я добавлю ещё 5 тегов, они заменят текущие 5. Однако, если в любой из предыдущих 5 тем появятся комментарии или сообщения, соответствующее изображение снова поднимется на первое место.

3 лайка

Тег? Нет, но есть опция сортировки по дате создания:

image

1 лайк

Предупреждение: очень скоро я внесу изменения в макет плиток (элементов). Если у вас есть настройки CSS, их, возможно, придется … э-э … скорректировать:

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

На данный момент изменения находятся в ветке beta.

3 лайка

Да, этот вариант немного помогает, но если в любом из старых постов появятся обновления, он поднимется наверх.

2 лайка

Я использую только встроенные возможности API Discourse (по сути это компонент темы, поэтому изменить API нельзя). Когда у меня будет время, я ещё раз посмотрю на порядок сортировки. Однако этот вопрос уже поднимался некоторое время назад, и я внес изменения, чтобы помочь одному из пользователей: Topic List Previews (legacy) - #1154 by merefield. Меня удивляет, что это не работает согласно спецификации. Разве не логично ожидать, что поле created_at темы останется неизменным, несмотря на новые сообщения? Вы уверены, что изменили настройку и обновили страницу в браузере?

3 лайка

@raghukamath Я только что протестировал это, и всё работает как задумано? Порядок всё ещё не меняется при появлении новых постов и учитывается дата created_at. Пожалуйста, обновите страницу в браузере и попробуйте снова.

3 лайка

Хорошо, без проблем. Я проведу дополнительные тесты. Возможно, я запутался из-за поведения при включённой опции. Извините за беспокойство.

Ещё одна проблема, на которую обратили внимание мои участники, касается того, что исправление CSS для цветов непрочитанных и прочитанных тем не применяется в мобильных браузерах.

1 лайк

Да, это всё ещё оставалось нерешённым, как уже упоминалось ранее. Я постараюсь выпустить это исправление вместе с обновлением макета, описанным выше, вероятно, в течение нескольких дней.

Привет! Я пытался работать с устаревшим плагином git, но не мог переопределить CSS для миниатюры на мобильных устройствах. Стили постоянно возвращались к высоте 80 пикселей. Начал искать информацию и обнаружил, что функционал перенесли в компонент. Возникнет ли у меня та же проблема, и нужно ли клонировать компонент, чтобы изменить его, или есть другое решение? Я хочу, чтобы на мобильном браузере изображение занимало всю ширину.

Разве этот макет не подходит для ваших нужд: Topic List Previews (TLP) - #4 by merefield? У новых плиток есть превью изображений на всю ширину. Сейчас это доступно в ветке beta. Если хотите, установите это как дополнительный компонент темы и попробуйте. Не забудьте указать ветку при установке и измените название компонента темы, чтобы было ясно, что это бета-версия.

1 лайк

Это точно сработало. Теперь у меня это на всю ширину, как я и хотел. Спасибо.

1 лайк

Я объединил ветку beta:

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

Привет!

Спасибо за этот замечательный компонент! Мне очень нравится дизайн :heart_eyes:

Я относительно новичок в Discourse и мало знаю о технических терминах.

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


^ Это предпросмотр компонента

1 лайк


^ Вот так это выглядит, когда я загружаю реальную страницу

Теперь я считаю, что это связано с моими настройками Discourse??

Есть ли какая-то конкретная настройка, которую нужно активировать, чтобы этот компонент работал? Я действительно не понимаю, почему он не работает так, как должен…

1 лайк

Привет! Спасибо за ваш интерес.

Несколько важных моментов:

  • Если вы ранее не устанавливали подобные компоненты или плагины, генерация всех миниатюр может занять некоторое время. Это пакетная обработка, которая требует времени. Процесс должен автоматически запуститься в фоновом режиме после установки компонента и добавления его в тему. Проверьте вашу очередь Sidekiq — возможно, вы увидите много задач в очереди.
  • Компонент не гарантирует совместимость с любой темой; всегда существует вероятность конфликта. Он разработан и оптимизирован для работы с темой по умолчанию. Пожалуйста, сначала протестируйте его на вашем сайте с использованием только этой темы. Вы можете адаптировать его внешний вид, но это должно основываться на специальных элементах данного компонента.
1 лайк

Привет, Роберт,

Спасибо за твой ответ! Я проверю твоё предложение на своём сайте :slight_smile:

1 лайк

Привет, Роберт. Я добавляю таблицу с использованием стороннего JavaScript под заголовком, но скрипт ломает предпросмотр, когда я использую его в компоненте. Есть какие-то идеи, как это обойти?

Если в этом скрипте есть ошибка, которая мешает выполнению JavaScript, это может нарушить работу кода макета TLP, требующего, чтобы JavaScript функционировал без сбоев. Ищите красные сообщения об ошибках в консоли вашего браузера.

1 лайк

Привет! Я включил опцию сортировки по дате создания, как вы и советовали. Это частично решает проблему. Однако мне кажется, что в старом плагине порядок определялся по дате, когда сообщение было помечено тегом. Кроме того, проблема в том, что старые изображения появляются на главной странице при любом обновлении или ответе в теме, из-за чего трудно удержать актуальное изображение в качестве рекомендуемого. Допустим, я помечаю какое-то изображение рекомендуемым, но если на старый пост годичной давности приходит новый ответ, то на главной странице появится рекомендуемое изображение именно этого старого поста. Если же на множество старых постов придут ответы, то недавно помеченное рекомендуемое изображение исчезнет.