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

:information_source: Краткое описание Добавить кнопку или текст в любое место
:hammer_and_wrench: Репозиторий https://github.com/literatecomputing/discourse-custom-components
:question: Инструкция по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

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

Добавляет кнопку-ссылку или произвольный текст в любую точку подключения (plugin outlet). (Игнорируйте водяные знаки на изображениях — эти скриншоты сделаны на тестовом стенде.)

Чтобы узнать, где находятся точки подключения, воспользуйтесь ссылкой Introducing Discourse developer toolbar. Если вы не знаете, что такое точка подключения, ознакомьтесь с материалом Using Plugin Outlet Connectors from a Theme or Plugin. Однако этот компонент позволяет, с некоторыми ограничениями, вставлять текст в любую точку подключения без необходимости программирования или глубокого понимания того, что такое точка подключения.

Я начал разрабатывать этот плагин для человека, который хотел отображать кнопку «Нажмите здесь, чтобы подписаться и отправить личные сообщения» на профилях пользователей и карточках пользователей. Они хотели, чтобы кнопка отображалась, если пользователь не может отправлять личные сообщения. Поскольку я не всегда так умен, как мне хотелось бы думать, я написал компонент, используя группы для определения того, должна ли отображаться кнопка. Одной из проблем такого подхода было то, что сотрудники не входили в группу подписчиков, поэтому они видели кнопку «Нужно подписаться», хотя могли отправлять личные сообщения. Кроме того, группа была скрыта, поэтому использовать её в компоненте темы было невозможно. Я переписал этот компонент темы, чтобы использовать currentUser.can_send_private_messages для определения необходимости отображения кнопки.

Для кого это?

Если вы хотите добавить кнопку со ссылкой или произвольный текст, который отображается или скрывается для определённых групп, этот компонент позволит вам вставить их в любую точку подключения. Хотите добавить кнопку-ссылку «Вам стоит подписаться» под каждым сообщением, кроме тех, кто не является участником? Это решит задачу. Хотите вставить произвольный HTML в точку подключения, чтобы посмотреть, как это будет выглядеть? Это тоже возможно.

Как это помогает разработчикам

Эта тема содержит несколько простых примеров того, как:

  • использовать тип Objects type for theme setting для настроек темы;
  • использовать api.renderInOutlet (как описано здесь), чтобы вставить компонент Glimmer в точку подключения, управляемую настройкой, вместо создания файла в директории connectors;
  • написать простой компонент Glimmer, который обращается к currentUser;
  • обернуть компонент в другой (встроенный) шаблон, чтобы передавать ему данные;
  • отображать произвольный HTML из настройки темы без ограничений Markdown — конечно, можно использовать помощник html-safe в Ember, и он отобразит HTML вместо текста:

однако, если вы пытаетесь сделать это внутри тега <template> внутри файла .gjs, всё работает немного иначе (например, {{htmlSafe component.text}}).

17 лайков

Пробел делает текст не жирным.


Отличный компонент!

5 лайков

Возможно ли добавить плейсхолдеры в URL-адреса кнопок, например, чтобы URL содержал идентификатор темы, в которой находится пользователь?

Я не совсем уверен. Если у вас есть бюджет, я посмотрю.

Что бы делала ваша кнопка, если бы у неё был ID темы?

Если вы разберётесь и захотите создать PR, я, скорее всего, приму его.

Я почти уверен, что ответ — нет, но вы можете использовать обходной путь, описанный здесь:

2 лайка

Привет, @pfaffman

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

Таким образом, наши бизнес-клиенты смогут отправлять нам запросы на закрепление, выделение или «спонсирование» конкретных тем.

1 лайк

Как вы знаете, можно создать URL, который откроет новый редактор темы. Вы можете сделать так, чтобы эта ссылка добавлялась компонентом темы.

Я не думаю, что это возможно сделать без добавления кода в компонент темы (но, возможно, это так?). Возможно, у кого-то есть идея на этот счет, и он предложит решение здесь (или в другой теме). Если нет, вы можете связаться со мной или написать в Marketplace с описанием того, что вам нужно, и указанием бюджета.

3 лайка

Демонстрационный текстовый блок не выровнен с демонстрационной кнопкой и остальным содержимым. Я использую extra-nav-item в блоке outlet.

Думаю, вам нужно добавить класс этих других кнопок к той, которую вы уже добавили.

Что вы имеете в виду? Я попытался использовать тот же класс, что и у кнопки-демонстрации.

Да. Поскольку это текст, а не кнопка, вам нужно добавить немного CSS, чтобы он выглядел как другие элементы, которые являются кнопками.

Компонент темы разместил текст там, где вы хотели, но он не предназначен для стилизации в том виде, который вам нужен.

Добавление этого в ваш CSS в какой-либо теме должно сработать.

.custom-component.btn-custom {
  display: inline-flex;
  align-self: center;
}

Привет, это не работает. Кроме того, даже если для групп текстовых блоков установлено значение «Все», текстовый блок не отображается для гостей.

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

Кроме того, вам следует изменить настройку так, чтобы она СКРЫВАЛА совпадающие группы, а не показывала их.

image

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

Спасибо! Мне удалось заставить CSS работать!

Отлично! Рад, что всё работает! CSS-магия всё ещё вызывает у меня трудности.