 |
Кратко | Поддержка сообщества — настраиваемые пожертвования |
 |
Предпросмотр | Theme Creator |
 |
Репозиторий | GitHub - VaperinaDEV/community-support: Community Support - configurable donation · GitHub |
 |
Было полезно? | ./support --coffee |
 |
Гид по установке | Как установить тему или компонент темы |
 |
Новичок в темах Discourse? | Начальное руководство по использованию тем Discourse |
Установить этот компонент темы
Привет 
Целью было сделать компонент достаточно гибким, чтобы он подходил для самых разных дизайнов и сценариев использования сообществ, при этом вся настройка оставалась в рамках настроек темы.
Возможности
Модальное окно для пожертвований / поддержки
Компонент может автоматически отображать модальное окно для поддержки.
Автоматическое модальное окно поддерживает:
- настраиваемую задержку открытия
- видимость на основе URL/пути
- видимость для участников/анонимных пользователей
- минимальный уровень доверия
- исключаемые группы
- настраиваемый срок жизни cookie для закрытия
- три размера модального окна:
normal,large,maximized
Модальное окно также можно открыть вручную из любого места с помощью:
#donate
Это намеренно независимо от правил автоматической видимости, чтобы сообщество могло делиться ссылкой #donate или добавлять её в боковую панель, продолжая контролировать, где появляются автоматические призывы к поддержке.
Способы пожертвований / поддержки
Несколько способов поддержки можно настроить с помощью редактора объектов в настройках Discourse.
Каждый способ может иметь:
- название
- описание
- провайдера
- владельца
- иконку
- URL
- текст кнопки
- копируемое значение
- статус «выбранное» (featured)
- переводы
Это не зависит от конкретного провайдера, поэтому компоненту не требуется определенный платежный провайдер.
Например, способ может просто указывать на существующую страницу PayPal, Revolut, Wise или другую страницу для оплаты/поддержки.
Локализация для каждого способа
Способы пожертвований поддерживают собственные переводы.
Селектор локалей включает доступные локали Discourse, и для каждого способа можно перевести:
- название
- описание
- текст кнопки
- метку копирования
- владельца
- провайдера
Если точная локаль недоступна, компонент использует базовую локаль, а затем английский язык или другой доступный перевод.
Цель поддержки и прогресс-бар
Компонент включает опциональную цель поддержки и прогресс-бар.
Вы можете настроить:
- текущую сумму
- целевую сумму
- валюту
- метку поддержки
- период поддержки
- отображение прогресса
- место появления полосы поддержки
Поддерживаемые периоды:
- разовый
- ежемесячный
- ежегодный
Прогресс-бар также обрабатывает превышение цели.
Вместо того чтобы просто останавливаться на 100%, отображается фактический процент:
75% → обычный прогресс
100% → цель достигнута
125% → 25% в следующий цикл целей
220% → 20% в третий цикл целей
Визуальный прогресс-бар остается единой компактной полосой.
До первой цели:
background: tertiary-low
fill: tertiary
Ровно на 100%, 200%, 300% и т.д.:
background: success
fill: success
Между вехами:
background: success-low
fill: success
Это означает, что сообщество может продолжать показывать значимый прогресс, даже если оно значительно превышает свою исходную цель.
Аватары сторонников
Полоса поддержки может опционально отображать аватары сторонников.
Сторонники в настоящее время настраиваются вручную через объектную настройку supporters.
Каждый сторонник может иметь:
- имя пользователя
- сумму взноса
- валюту
Имя пользователя сопоставляется с профилем пользователя, поэтому информация о профиле/аватаре пользователя может отображаться автоматически.
Количество аватаров, отображаемых непосредственно в полосе поддержки, настраивается.
Например:
◉ ◉ ◉ ◉ ◉ +8
Если сторонников больше, чем настроенное количество видимых аватаров, остальные сторонники доступны через DMenu.
Меню сторонников может отображать:
- аватар
- имя пользователя
- ссылку на профиль
- сумму взноса
- валюту
Суммы взносов можно включать или отключать независимо.
Сторонников также можно заполнять из одной или нескольких групп, используя настройку supporter_groups. Это дополняет, а не заменяет вручную настроенный список сторонников.
Несколько дизайнов
Компонент включает три независимых визуальных дизайна:
- Classic: сбалансированное представление в стиле сообщества
- Minimal: уменьшенная визуальная отделка и компактное представление
- Modern: более сильная иерархия и более заметные карточки
Дизайн независим от выбранного вида, поэтому их можно свободно комбинировать.
Несколько видов
Компонент поддерживает несколько режимов представления:
- Full: полное содержимое поддержки с hero-блоком, выбранным способом и способами пожертвований
- Compact: уменьшенное представление для небольших размещений
- Minimal: представление, сфокусированное на способах
- Progress: только цель поддержки и прогресс
Это позволяет использовать один и тот же компонент в очень разных местах без дублирования настроек или стилей.
Встраивание в посты
Содержимое поддержки можно встраивать непосредственно в посты.
Включите enable_post_embed, затем используйте:
[wrap=donate]
[/wrap]
Дополнительные виды доступны непосредственно через обертку:
[wrap=donate-compact]
[/wrap]
[wrap=donate-minimal]
[/wrap]
[wrap=donate-progress]
[/wrap]
Обертка управляет видом, а глобальная настройка design управляет визуальным дизайном.
Это полезно, когда содержимое поддержки должно быть частью контекста конкретного поста, а не появляться как глобальный элемент интерфейса.
Поддержка plugin outlets
Компонент может рендерить виджет поддержки через plugin outlets.
Включите outlet_enabled и укажите желаемые имена outlets в outlet_locations, разделенные |.
Вид и дизайн outlet можно настроить независимо:
outlet_viewoutlet_design
Это позволяет использовать компонент поддержки в таких местах, как списки тем, заголовки, подвалы и другие поддерживаемые outlets.
Совместимость с Discourse Ads
Компонент также можно использовать с плагином Discourse Ads.
Вместо прямой зависимости от плагина Ads, Community Support предоставляет стабильный маркер HTML для встраивания:
<div data-donation-widget="support"></div>
Его можно скопировать в HTML-рекламу и разместить в нужном Ads outlet.
Компонент владеет разметкой и CSS, поэтому нет необходимости дублировать стилизацию пожертвований внутри самой рекламы.
Вид и дизайн можно опционально переопределить:
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>
Это означает, что одна и та же система поддержки может использоваться в разных размещениях Ads, сохраняя при этом единый дизайн.
Универсальные HTML-встраивания
Тот же механизм встраивания можно использовать и в других местах, поддерживающих HTML:
<div data-donation-widget="support"></div>
HTML-маркер намеренно остается простым, в то время как компонент темы обрабатывает фактический рендеринг.
Это позволяет менять дизайн или реализацию компонента, не переписывая каждое отдельное встраивание.
Управление видимостью
Автоматическое и глобально отображаемое содержимое поддержки можно контролировать с помощью нескольких настроек:
- Показывать участникам
- Показывать анонимным пользователям
- Минимальный уровень доверия
- Исключаемые группы
- Отображать на главной странице
- Сопоставление URL/пути
Исключаемые группы применяются к автоматически отображаемому содержимому поддержки, такому как модальные окна, виджеты plugin outlet и универсальные встраивания.
Контекстное содержимое остается доступным:
#donate[wrap=donate]
Это позволяет исключать определенных пользователей из рекламного/автоматического UI поддержки, не мешая им получать доступ к явно распространенной ссылке на поддержку или контекстному блоку поддержки.
Управление закрытием / cookie
Когда автоматически открытое модальное окно закрывается, компонент может запомнить это решение.
Срок жизни cookie можно настроить как:
- none (нет)
- minute (минута)
- day (день)
- week (неделя)
- month (месяц)
- year (год)
Это предотвращает повторное появление автоматического модального окна для одного и того же посетителя в соответствии с выбранным сроком жизни.
Базовые примеры
Открыть модальное окно поддержки
#donate
Встроить содержимое поддержки в пост
[wrap=donate]
[/wrap]
Компактная версия для поста
[wrap=donate-compact]
[/wrap]
Универсальное HTML-встраивание
<div data-donation-widget="support"></div>
Встраивание с настраиваемым представлением
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>