Шаблоны для Url Composer

Настройка Компонент темы
1

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

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

Однако обычно вы захотите быть более конкретными и использовать tag/developers или пересечение, например /tags/intersection/developers/pineapple.

Вы можете использовать его для категорий, таких как c/general, что воссоздаст и переопределит опцию шаблона категорий, так что вы сможете проявить творческий подход и использовать его как условный шаблон в категории.

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

image
image949×249 11 KB

Текст шаблона может появляться:

  • только если в этом месте еще нет тем/обсуждений
  • всегда

image
image802×193 11 KB

В планах: добавлять шаблон только если посетитель еще не создавал тему в этом месте, даже если другие уже это сделали. К сожалению, я столкнулся с трудностями в реализации этого и пока не успел добавить эту функциональность.

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

Github: GitHub - focallocal/url-composer-templates: Reads url strings and adds template text to the composer if a match is found · GitHub

URL Composer Templates

Компонент темы Discourse, который автоматически заполняет композер текстом шаблона на основе параметров URL. Предназначен для бесшовной работы с Docuss, обеспечивая контекстно-зависимые шаблоны для различных типов взаимодействий.

Возможности

  • Поддержка параметров URL: Автоматически определяет ?composer_template=X в URL и применяет соответствующий шаблон
  • Несколько типов шаблонов: Настройка до 6 различных шаблонов для разных целей (отчет, участие, приглашение, пользовательские шаблоны)
  • Автооткрытие композера: Опциональное автоматическое открытие композера при переходе по ссылке Docuss, если тем еще нет
  • Гибкое применение: Шаблоны можно применять только к первому посту, ко всем ответам или к обоим
  • Сохранение сессии: Использует sessionStorage для сохранения выбора шаблона при навигации между страницами
  • Режим отладки: Включение подробного логирования в консоли для устранения проблем с применением шаблонов

Установка

  1. Установите компонент темы на Discourse:

    • Перейдите в Администрирование → Настройка → Темы
    • Нажмите «Установить» → «Из репозитория Git»
    • Введите: https://github.com/focallocal/url-composer-templates
    • Добавьте компонент в вашу активную тему

  2. Пересборка плагина не требуется! Поддержка параметра composer_template уже реализована в dcs-discourse-plugin и dcs-client.

  3. Разверните ваше React-приложение (fl-maps) с обновленными компонентами DCSLink, которые передают проп composerTemplate.

  4. Настройте шаблоны в параметрах компонента (Администрирование → Настройка → Темы → ваша тема → url-composer-templates → Параметры).

Настройка

Параметры шаблонов

image
image739×771 13.2 KB

Каждый шаблон имеет три параметра настройки:

Шаблон 1 (Отчет)

  • template_1_id: report — Значение параметра URL для активации этого шаблона
  • template_1_text: Текст для предварительного заполнения в композере
  • template_1_use_for: first_post — Применять только при создании новых тем

Шаблон 2 (Участие)

  • template_2_id: going — Для взаимодействий типа «Я участвую»
  • template_2_text: Предварительно заполненный текст для подтверждения участия
  • template_2_use_for: all_replies — Применять ко всем ответам (не к первым постам)

Шаблон 3 (Приглашение)

  • template_3_id: invite — Для взаимодействий с приглашением
  • template_3_text: Предварительно заполненный текст для приглашений
  • template_3_use_for: all_replies — Применять ко всем ответам

Шаблоны 4–6 (Пользовательские)

  • По умолчанию отключены
  • Могут быть включены и настроены для конкретных случаев использования
  • Настройте ID, текст и область применения по необходимости

Параметры автооткрытия

  • enable_auto_open_composer: true — При включении автоматически открывает композер, если:
    • Нажата ссылка Docuss (URL содержит ?composer_template=X)
    • Для данной комбинации тегов еще нет тем
    • Помогает пользователям сразу начать обсуждение

Режим отладки

  • debug_mode: false — Включите для просмотра подробных логов в консоли с префиксами в виде эмодзи:
    • :artist_palette: Логи применения шаблонов
    • :rocket: Логи автооткрытия композера

Интеграция с Docuss

Автоматическая интеграция

Компонент url-composer-templates разработан для автоматической работы с Docuss. Когда у вас установлены:

  • Этот компонент на вашем экземпляре Discourse
  • Обновленный клиент и плагин Docuss (с поддержкой composer_template)

Шаблоны будут автоматически применяться на основе:

  1. Режима взаимодействия:
    • Режим DISCUSS → Использует подсказки triggerId (going, invite) или по умолчанию report
    • Режим COMMENT → Использует шаблон report

Пользовательские шаблоны через HTML-атрибуты

Для более точного контроля вы можете указать шаблоны напрямую в HTML, используя атрибут data-dcs-composer-template:

<!-- Пример: Кнопка отчета -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="issue-report"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="report">
  Сообщить о проблеме
</div>

<!-- Пример: Кнопка участия -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="event-rsvp"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="going">
  Я участвую!
</div>

<!-- Пример: Кнопка приглашения -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="invite-friends"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="invite">
  Пригласить друзей
</div>

<!-- Пример: Пользовательский шаблон -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="feedback"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="custom1">
  Оставить отзыв
</div>

Соответствие ID шаблонов

Компонент сопоставляет ID шаблонов из параметра URL с настроенными ID шаблонов:

Параметр URL Параметр шаблона Назначение по умолчанию
?composer_template=report template_1_id Отчеты об ошибках, проблемы
?composer_template=going template_2_id Подтверждения участия в событиях
?composer_template=invite template_3_id Приглашения
?composer_template=custom1 template_4_id Пользовательское использование
?composer_template=custom2 template_5_id Пользовательское использование
?composer_template=custom3 template_6_id Пользовательское использование

Как это работает

Процесс применения шаблона

  1. Обнаружение URL: Когда пользователь переходит по URL с ?composer_template=X, компонент сохраняет ID шаблона в sessionStorage
  2. Перехват композера: При открытии композера компонент проверяет наличие сохраненного ID шаблона
  3. Сопоставление шаблона: Находит соответствующий шаблон по ID
  4. Проверка области применения: Проверяет, должен ли шаблон применяться (первый пост, ответ или оба)
  5. Вставка текста: Предварительно заполняет композер текстом шаблона
  6. Очистка: Помечает шаблон как примененный, чтобы избежать повторного применения

Процесс автооткрытия

  1. Обнаружение параметра: Проверяет, содержит ли URL ?composer_template=X, и включено ли автооткрытие
  2. Поиск тем: Ищет существующие темы с текущей комбинацией тегов
  3. Открытие композера: Если тем не найдено, автоматически открывает композер
  4. Применение шаблона: Затем применяется шаблон через описанный выше обычный процесс

Примеры использования

Сайт мероприятия

# settings.yml
template_2_id: "going"
template_2_text: "Я планирую присутствовать! 🎉\n\nС нетерпением жду встречи со всеми."
template_2_use_for: "all_replies"

template_3_id: "invite"
template_3_text: "Я хотел бы пригласить друзей на это мероприятие.\n\nКого я приглашаю:\n- \n\nПочему им стоит прийти:\n"
template_3_use_for: "first_post"

Отслеживание проблем

template_1_id: "bug"
template_1_text: "**Описание ошибки:**\n\n**Шаги воспроизведения:**\n1. \n2. \n3. \n\n**Ожидаемое поведение:**\n\n**Фактическое поведение:**\n"
template_1_use_for: "first_post"

template_4_enabled: true
template_4_id: "feature"
template_4_text: "**Запрос на новую функцию:**\n\n**Случай использования:**\n\n**Предлагаемое решение:**\n"
template_4_use_for: "first_post"

Вовлечение сообщества

template_1_id: "question"
template_1_text: "**Мой вопрос:**\n\n**Что я уже пробовал:**\n\n**Дополнительный контекст:**\n"
template_1_use_for: "first_post"

template_2_id: "answer"
template_2_text: "Вот что сработало для меня:\n\n**Решение:**\n\n**Почему это работает:**\n"
template_2_use_for: "all_replies"

Устранение неполадок

Шаблоны не применяются

  1. Проверьте параметр URL: Убедитесь, что URL содержит ?composer_template=X, где X соответствует ID шаблона
  2. Включите режим отладки: Включите debug_mode в настройках, чтобы увидеть логи в консоли
  3. Проверьте область применения шаблона: Убедитесь, что параметр use_for соответствует вашему действию (создание темы или ответ)
  4. Очистите SessionStorage: Откройте консоль браузера и выполните: sessionStorage.clear()

Автооткрытие не работает

  1. Проверьте настройку: Убедитесь, что enable_auto_open_composer установлено в true
  2. Проверьте URL: Автооткрытие работает только если URL содержит ?composer_template=X
  3. Проверьте существующие темы: Автооткрытие срабатывает только если тем с данной комбинацией тегов еще нет
  4. Включите режим отладки: Ищите логи с эмодзи :rocket: в консоли

Применяется неверный шаблон

  1. Проверьте ID шаблонов: Убедитесь, что параметр URL точно соответствует ID шаблона (регистрозависимо)
  2. Проверьте приоритет: Если несколько шаблонов могут подойти, используется первый совпавший
  3. Очистите сессию: SessionStorage может содержать старые значения: sessionStorage.clear()

Проблемы с интеграцией Docuss

  1. Обновите Docuss: Убедитесь, что у вас установлены последние версии:
    • dcs-client (с поддержкой composerTemplate в HtmlBased.js)
    • dcs-discourse-plugin (с генерацией параметров URL в DcsIFrame.js.es6)
  2. Проверьте HTML-атрибуты: Убедитесь, что data-dcs-composer-template установлен правильно на триггерах
  3. Проверьте сеть: Откройте вкладку Network в инструментах разработчика браузера, чтобы увидеть, добавляются ли параметры URL

История версий

v1.0.0 (Текущая)

  • Первичный релиз
  • Поддержка 6 настраиваемых шаблонов
  • Выбор шаблона на основе параметров URL
  • Автооткрытие композера для ссылок Docuss
  • Сохранение через SessionStorage
  • Режим отладки для устранения неполадок

Вклад в проект

Нашли ошибку или у вас есть предложение по новой функции? Пожалуйста, создайте issue в репозитории GitHub.

Лицензия

Этот компонент является открытым исходным кодом и доступен по лицензии MIT.

Благодарности

Разработано Andy@Focallocal и отлично работает с Docuss — системой для встраивания обсуждений Discourse на любой веб-сайт.

1 лайк
2

Значит, этот компонент должен использоваться с установленным плагином и настроенным React-приложением? Есть ли какая-то дополнительная информация об этом? Возможно, это стоит подчеркнуть более явно.

2 лайка
3

Спасибо, что обратили на это внимание, @NateDhaliwal

Нет, он просто анализирует URL, ища определённую строку, и автоматически заполняет редактор одним из нескольких шаблонов, когда находит эту строку.

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

Например, вы можете указать ему искать: ‘/tag/introductions’, и он станет компонентом шаблона для тегов. Или вы можете использовать его так, как это делаю я, чтобы вставить этот шаблон в пересечения тегов, например: tags/intersection/introductions/webdevs.

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

1 лайк
Embed additional explainer text in Form Template
Setting Form Templates with a tag
4

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

1 лайк
5

Выглядит отлично. Но, возможно, стоит добавить скриншоты настроек — они смотрятся чище, чем блоки с текстом.

Очень здорово. Мне теперь предстоит много работы. :grin:

1 лайк