Предварительный просмотр списков тем (TLP)

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

: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)!

Обзор

Предварительные просмотры списков тем позволяют:

  • Добавлять изображения, краткие выдержки и статистику тем в элементы списка тем; а также
  • Изменять макет и стиль элементов списка тем
  • Добавлять «Избранные» темы над списками тем и самими темами.
  • Добавлять «Стену пользователя» на страницу активности пользователя (также известную как функция «Портфолио»).

Сайдкар

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

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

  • «Действия» (закладки, ссылки и лайки из списка тем)
  • Выбор миниатюры в редакторе метаданных темы. (Выберите любую миниатюру из всей темы с помощью простого интерфейса)
  • Цветовое оформление фона на основе доминирующего цвета миниатюры
  • Обработка миниатюр YouTube для удаления чёрных рамок (критично для определения лучшего доминирующего цвета).
  • Возможность пересоздания миниатюр при перестроении поста темы, чтобы вы могли быстро управлять устранением рамок для каждой темы отдельно.

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

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

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

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

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

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

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

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

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

Это работает адаптивно: при недостаточной ширине формат сворачивается в мasonry (и наоборот).

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

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

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

Я внедрил эту функцию некоторое время назад для использования с моим плагином 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:
Homepage Feature
Hi, is there a plugin for user image galleries?
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!
Changing views to creating date?
What are good plugins or theme components for a forum emphasizing pictures?
Imageboard layout for topics (topic excerpts)
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
Cannot see the multiple posts selection icon on desktop view
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
Video thumbnails issue
Is it possible to add posts to a profile?
Is there a Kanban theme for Discourse?
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
Topic lists preview
Topic lists preview
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?
Carousel sliders with Featured Tiles component on mobiles?
Don't show grid, just topics list
Guest Gate Theme Component
Visual newsfeed as community home
Visual newsfeed as community home
Featured Topics
Looking for feedback on my new Discourse site ✨
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
No Thumbnail for Unlisted Vimeo Videos
Plugin vs. theme component
Discourse.stpl and discourse.tlp
Fakebook Theme
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

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

Например, если у меня есть 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 лайк

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