Как добавить пользовательскую кнопку в карточку профиля пользователя?

Разработка
1

Как я могу добавить пользовательскую кнопку в сводку профиля пользователя и виджет карточки?
Мы хотим добавить призыв к действию (CTA), который будет выполнять какое-то действие (например, перенаправление), но не сохранять данные…

image
image1812×800 88.3 KB

а также в карточке профиля:

image
image946×252 49.6 KB

Мой первоначальный код ниже почти решает задачу, но он размещается в секции заголовка, и я не смог найти способ сделать это в сводке профиля пользователя и в карточке:

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // сделайте что-то здесь...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
2

Здравствуйте, добро пожаловать! :wave:

В этом месте вам нужно использовать плагины-выходы, а именно user-profile-controls.

Вы можете посмотреть пример здесь:

3

Спасибо @Arkshine! Я очень новичок в работе с этими плагинами, поэтому подумал, что это должно было быть сделано аналогично кнопкам в заголовке.

В любом случае, user-profile-controls — это плагин? Можете ли вы подсказать, как это реализовать?

4

Я рекомендую вам прочитать Using Plugin Outlet Connectors from a Theme or Plugin; это ответит на ваш вопрос!

По сути, плагин-аутлет — это способ внедрить код в определённое место.

Рекомендуется создать компонент темы с помощью CLI для тем и использовать отдельные файлы, как я сделал в своём компоненте темы здесь (не стесняйтесь клонировать мой репозиторий, чтобы вы могли протестировать или изменить его):

Однако вы всё ещё можете протестировать это, используя тег <script>:

В вашем случае вы напишете:

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Содержимое шаблона здесь
</script>

Обратите внимание на первую строку. Мы используем user-profile-controls как имя коннектора, а my_connector_name может быть любым именем, которое вы хотите.

5

Отлично! Теперь я понимаю суть, и раз это можно протестировать прямо в теге script, то хотя бы мы сможем проверить это заранее, прежде чем создавать компонент. Ещё раз спасибо :beers: