# Пользовательские компоненты: добавление кнопки или текста в любое место плагина **URL:** https://meta.discourse.org/t/custom-components-add-button-or-text-at-any-plugin-outlet/349629 **Category:** Theme component **Created:** [29.Январь.2025 19:52:10 UTC](https://meta.discourse.org/t/custom-components-add-button-or-text-at-any-plugin-outlet/349629 "2025-01-29T19:52:10Z") **Posts on this page:** 14 **Page:** 1
### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman) #### Post date: [29.Январь.2025 19:52:10 UTC](https://meta.discourse.org/t/custom-components-add-button-or-text-at-any-plugin-outlet/349629/1 "2025-01-29T19:52:10Z")
| | | | | --- | --- | --- | | ℹ | **Краткое описание** | Добавить кнопку или текст в любое место | | 🛠 | **Репозиторий** | [https://github.com/literatecomputing/discourse-custom-components](https://github.com/literatecomputing/discourse-custom-components) | | ❓ | **Инструкция по установке** | [Как установить тему или компонент темы](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | | 📖 | **Новичок в темах Discourse?** | [Руководство для начинающих по использованию тем Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | Установить этот компонент темы Добавляет кнопку-ссылку или произвольный текст в любую точку подключения (plugin outlet). (Игнорируйте водяные знаки на изображениях — эти скриншоты сделаны на тестовом стенде.) Чтобы узнать, где находятся точки подключения, воспользуйтесь ссылкой [Introducing Discourse developer toolbar](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215). Если вы не знаете, что такое точка подключения, ознакомьтесь с материалом [Using Plugin Outlet Connectors from a Theme or Plugin](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727). Однако этот компонент позволяет, с некоторыми ограничениями, вставлять текст в любую точку подключения без необходимости программирования или глубокого понимания того, что такое точка подключения. ![image](https://global.discourse-cdn.com/meta/original/4X/1/c/4/1c40fec47bb1599224c9bc234c686b641db260b8.png) ![На изображении показан интерфейс настроек для пользовательских кнопок, включающий поля для текста кнопки, заголовка, URL, класса, иконки и групп, с примером кнопки под названием «Custom Component Demo Button!». (Подпись сгенерирована ИИ)](https://global.discourse-cdn.com/meta/original/4X/f/6/9/f690cff41846bf4869061a0aa8b89033eec6da24.png) ![На изображении показан интерфейс настроек темы для редактирования пользовательских текстовых блоков в дизайне форума, с опциями отображения конкретных текстовых элементов, настройки точек подключения блоков, применения классов стилей и управления отображением в зависимости от групп пользователей. (Подпись сгенерирована ИИ)](https://global.discourse-cdn.com/meta/original/4X/3/5/2/35224da267b7ac857ca3ad23c3383e8a39c27c1c.png) Я начал разрабатывать этот плагин для человека, который хотел отображать кнопку «Нажмите здесь, чтобы подписаться и отправить личные сообщения» на профилях пользователей и карточках пользователей. Они хотели, чтобы кнопка отображалась, если пользователь не может отправлять личные сообщения. Поскольку я не всегда так умен, как мне хотелось бы думать, я написал компонент, используя группы для определения того, должна ли отображаться кнопка. Одной из проблем такого подхода было то, что сотрудники не входили в группу подписчиков, поэтому они видели кнопку «Нужно подписаться», хотя могли отправлять личные сообщения. Кроме того, группа была скрыта, поэтому использовать её в компоненте темы было невозможно. Я [переписал этот компонент темы](https://github.com/literatecomputing/subscribe-to-message), чтобы использовать `currentUser.can_send_private_messages` для определения необходимости отображения кнопки. ### Для кого это? Если вы хотите добавить кнопку со ссылкой или произвольный текст, который отображается или скрывается для определённых групп, этот компонент позволит вам вставить их в любую точку подключения. Хотите добавить кнопку-ссылку «Вам стоит подписаться» под каждым сообщением, кроме тех, кто не является участником? Это решит задачу. Хотите вставить произвольный HTML в точку подключения, чтобы посмотреть, как это будет выглядеть? Это тоже возможно. ### Как это помогает разработчикам Эта тема содержит несколько простых примеров того, как: - использовать тип [Objects type for theme setting](https://meta.discourse.org/t/objects-type-for-theme-setting/305009) для настроек темы; - использовать `api.renderInOutlet` (как описано [здесь](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727/34?u=pfaffman)), чтобы вставить компонент Glimmer в точку подключения, управляемую настройкой, вместо создания файла в директории `connectors`; - написать [простой компонент Glimmer](https://github.com/literatecomputing/discourse-custom-components/blob/main/javascripts/discourse/components/button-link.gjs), который обращается к `currentUser`; - [обернуть компонент в другой (встроенный) шаблон](https://github.com/literatecomputing/discourse-custom-components/blob/main/javascripts/discourse/api-initializers/custom-components.gjs#L9-L11), чтобы передавать ему данные; - отображать произвольный HTML из настройки темы без ограничений Markdown — конечно, можно использовать помощник `html-safe` в Ember, и он отобразит HTML вместо текста: > [@Discourse](#): > > Здесь можно использовать помощник `html-safe` из Ember, и он отобразит HTML вместо текста. однако, если вы пытаетесь сделать это внутри тега `