Использование Discourse для создания блога или платформы с прокруткой в стиле Reddit, X или Facebook

Я начинаю эту тему, чтобы задокументировать свой путь в попытке превратить Discourse в более визуальную, бесконечно прокручиваемую платформу — нечто, ближе к опыту просмотра, который предлагают Reddit, X и Facebook.

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

Точкой отсчета для этого проекта стало правило 90–9–1.

Оно гласит, что на большинстве социальных сетей, блогов и т. д.:

  • 90% пользователей в основном просматривают и потребляют контент.

  • 9% изредка реагируют, ставят лайки, делятся или комментируют.

  • 1% активно создают большую часть контента.

Конечно, точные проценты будут варьироваться от сообщества к сообществу, но принцип остается актуальным: большинство посетителей — это читатели, а не авторы.

Discourse отлично справляется с обслуживанием тех 9% и 1%. Он построен вокруг обсуждений, ответов и активного участия. Однако я хочу сделать его таким же привлекательным и для гораздо более крупной группы людей, которые просто хотят открыть сайт и просматривать интересный свежий контент.

Что я пытаюсь построить

Я хочу использовать Discourse для создания более визуальной, непрерывной (в стиле doom scrolling) ленты, похожей на ленты в Reddit, X или Facebook.

В идеале этот опыт должен выглядеть примерно так:

  • Открыть главную страницу и сразу увидеть ленту с релевантными темами.

  • Непрерывно прокручивать от одной темы к другой.

  • Просматривать содержимое темы, не открывая отдельную страницу.

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

  • Ставить лайки, добавлять в закладки или отвечать, когда что-то привлекает внимание.

  • Автоматически убирать ранее просмотренный контент из поля зрения.

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

  • Постепенно персонализировать ленту с использованием категорий, тегов и тем, с которыми пользователь взаимодействует.

Некоторые могут назвать это «doom scrolling», но это также просто то, как огромное количество людей теперь потребляют онлайн-контент. Они могут читать десятки сообщений, никогда не комментируя, но при этом остаются настоящими пользователями, генерирующими просмотры, делящимися ссылками и потенциально возвращающимися каждый день.

Зачем строить это на базе Discourse?

Discourse уже предоставляет большинство сложных компонентов:

  • Пользовательские аккаунты и профили

  • Категории и теги

  • Лайки, закладки и уведомления

  • Уровни доверия и модерация

  • Создание тем и ответы

  • Отслеживание прочитанного и непрочитанного

  • Рекомендуемые и связанные темы

  • Зрелая система плагинов и компонентов темы

Кажется, чего не хватает, так это ленты, спроектированной в первую очередь для открытия нового и пассивного потребления. (конечно, Discourse не был создан для этого)

На каком я сейчас этапе

  1. Я начал с отличной темы Redditish от @awesomerobot, которую мне пришлось форкнуть, чтобы я мог редактировать различные аспекты, такие как удаление пользовательского бокового меню. Я также сильно отредактировал CSS, чтобы оформить его так, как мы хотели.
  2. Включение Nested Views было необходимо, так как это покрывает стиль, необходимый для такого типа сайта.
  3. Я создал и добавил прокручиваемое меню в стиле YouTube, которое показывает все категории и пользовательские ссылки. Я использовал Custom Top Navigation Links, чтобы настроить и добавить ссылки.
  4. Модальное окно предпросмотра темы было необходимо, и я начал проектировать его, но легенда @Don создала более лучшую версию, которую можно найти здесь
  5. Статический кэшированный правый сайдбар везде был необходим, поэтому я начал с блоков правого сайдбара, а затем создал компонент темы, чтобы показывать его на страницах тем и т. д.
  6. Используя кастомные ссылки в шапке (иконки), я добавил кнопку «Создать пост» в шапку, чтобы сделать интерфейс чище.
  7. Изображения в постах выровнены по центру с размытым фоном, чтобы выглядеть аккуратнее (похоже на Reddit)
  8. Установка отрывков тем на 150 символов и их отображение между заголовком и изображением на карточках тем было необходимо (похоже на Facebook и X)

Следующими шагами станет выделенная лента, которая сможет:

  1. Начинаться с недавнего контента за определенный период, например за предыдущие 14 дней.

  2. Приоритизировать темы из категорий и тегов, за которыми следит пользователь.

  3. Смешивать популярные или трендовые темы для открытия нового.

  4. Фиксировать, когда тема действительно была просмотрена или пролистана.

  5. Снижать приоритет просмотренных тем, не скрывая их навсегда.

  6. Позволять прямые реакции и ответы из ленты.

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

Следите за путешествием

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

Мне также было бы интересно услышать от всех, кто пытался что-то подобное, особенно по вопросам:

  • Могут ли существующие данные об отслеживании прочтения поддерживать это.

  • Как лента могла бы работать для анонимных и новых зарегистрированных пользователей.

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

  • Создают ли непрерывные предпросмотры тем значительные проблемы с производительностью.

Цель состоит в том, чтобы признать, что «немолчаливые» 90% являются важной частью сообщества, и дать им опыт, спроектированный в соответствии с тем, как они на самом деле используют интернет.

Тестовый сайт, который я буду использовать для этого проекта:

https://www.m8wtf.com/

11 лайков

Мне очень нравится — я слежу за этим. Я очень быстро посмотрел ваш демо-пример, и он отличный! Я загляну, когда у меня будет время.

4 лайка

Мы попробовали использовать страницу Unified New в Discourse в качестве главной, поскольку она, казалось, предлагала именно тот фид, который нам нужен. С плагином, который убирает сообщения из /new, когда пользователь прокручивает их за пределы видимой области. (@Don помог нам это настроить)

Смущение возникло из-за того, что я всегда тестировал Discourse, используя уже существующий аккаунт с логином, поэтому моя страница Unified New всегда была заполнена сообщениями. Я не до конца понимал, как она работает для совершенно новых пользователей.

После создания нового тестового аккаунта мы обнаружили, что Unified New была полностью пустой, потому что старые темы не считались «новыми» для этого пользователя. Это означает, что в настоящее время она не может обеспечить заполненный фид главной страницы, который мы планировали.

Вау, большое спасибо за комментарий и за тёплые слова! Я понимаю, что это не совсем в твоём вкусе и что это не соответствует первоначальному назначению Discourse.

@don работает над новым плагином, который вводит новую систему /feed и главную страницу. Она показывает пользователям действительно новые сообщения, а затем удаляет их из списка, если пользователь прокрутил их мимо (используя область видимости). Если все сообщения уже просмотрены, происходит перенаправление на /latest. Работа над плагином ещё ведётся.

1 лайк

Огромное спасибо @don и его новому, ещё не выпущенному плагину: теперь лента работает так, что пользователи всегда видят свежий контент. При этом ответы по-прежнему ведут себя как раньше — они не исчезают при прокрутке.

Новые пользователи при регистрации теперь видят все посты за последние 14 дней, но это можно настроить в параметрах «Диапазон по умолчанию на главной странице».

2 лайка

Следующий пункт повестки дня — создание компонента/плагина для персонализации ленты, что-то вроде:

Оценка ленты =

40% интересы
25% свежесть
15% предыдущее поведение
10% популярность сайта
10% случайность/открытие нового

Так лента будет выглядеть примерно так:

WARDOGS Early Access запускается в четверг
Новое обновление PS5 вызывает странный баг с контроллером
Кто-то собрал электросамокат со скоростью 70 миль в час
Netflix подтверждает новый сериал Inbetweeners
История из Глазго WTF
Случайная популярная история из раздела «Еда и напитки»

Для нового пользователя что-то вроде:

25% Игры
15% ТВ и кино
15% Новости WTF
15% Технологии
10% Еда и напитки
10% Спорт
10% Колёса и адреналин

Затем, после того как пользователь просмотрит 30–50 постов, его лента начнёт адаптироваться.

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

Что вам интересно?

:check_box_with_check: Игры
:check_box_with_check: Новости WTF
:check_box_with_check: Технологии
☐ Политика
:check_box_with_check: ТВ и кино
☐ Спорт
:check_box_with_check: Колёса и адреналин
☐ Еда и напитки

Это займёт время и потребует тестирования

1 лайк

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

1 лайк

Это из-за темовой компоненты @don :wink: Topic Preview Modal

2 лайка

Какова цель этого пути? Это тема, компонент или что-то единое? Тема, объединённая с компонентами, и так далее?

Я ждал именно такого решения уже много лет. UX в Discourse каждый раз мешал мне им пользоваться. Он… правда не… настолько же крутой, сам по себе Discourse.

Удачи вам в этом путешествии.

Ваш демо выглядит отлично на мобильных устройствах.

1 лайк

Появится руководство :slight_smile: Я загрузлю все компоненты, которые я создал, на GitHub, вместе со ссылками на компоненты, которые уже созданы или создаются другими людьми. Было бы неправильно, если бы я собрал всё воедино, ведь другие внесли значительный вклад.

Именно это. Каркас отличный, поэтому я и использую Discourse, чтобы проверить, смогу ли я создать что-то приличное, а не стандартный Discourse.

1 лайк

Существуют темы, в которые уже включены компоненты. Возможно, стоит это учесть. А также, возможно, стоит использовать иконки lucide?

1 лайк

Выглядит очень хорошо. Есть тема theme-creator для оформления сообщений автора после его первого поста.

Хорошо, смотрю другую тему с ответами. Вижу, что, возможно, вы уже используете бейдж автора Don’s TC.

Очень красивая работа.

2 лайка

Нет, это просто какой-то пользовательский CSS, который я использовал до установки.

1 лайк

Как в Topic List Previews (TLP)?

Хороший пример здесь: https://www.starzen.space/

Скорее нет, тут больше бэкенд, чем визуальная часть

1 лайк

О, ладно, это заявление заставило меня пойти по определенному пути. Если я буду оценивать TLP по вашим другим требованиям:

  • Открыть главную страницу и сразу увидеть ленту с релевантными темами.

    :white_check_mark:

  • Бесконечно прокручивать от одной темы к другой.

    :white_check_mark:

  • Просматривать содержимое темы, не открывая отдельную страницу.

    :white_check_mark: (хотя можно сделать и более изощренно — я работал над форком Discourse с гораздо более продвинутой версией этой функции)

  • Видеть изображения, видео и цитаты непосредственно в ленте.

    2/3 :slight_smile: (я работал над форком Discourse с гораздо более продвинутой версией этой функции, которая воспроизводит живое видео в списке тем :+1:)

  • Лайкать, добавлять в закладки или отвечать, когда что-то привлекло ваше внимание.

    :white_check_mark:

  • Автоматически убирать ранее просмотренный контент из поля зрения.

    :white_check_mark:

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

    :white_check_mark:

  • Постепенно персонализировать ленту с помощью категорий, тегов и тем, с которыми пользователь взаимодействует.

    :cross_mark: пока нет, хотя на уровне бэкенда это уже возможно.

кстати, это уже поднималось ранее, например:

Я прочитал их все, но никто этого на самом деле не делал

1 лайк

Мне известно как минимум об одном, но это закрытый исходный код.