Обновлённая иконка пользовательского заголовка: отправка данных через URL

[littleviolette]

Discourse недавно объявил об устаревании api.decorateWidget, который я использовал для вставки пользовательских иконок в заголовок и отправки имени текущего пользователя через URL.

Меня интересует, как теперь отправлять имя текущего пользователя через HTTP с использованием нового API headerIcons. Я не смог найти никакой документации или примеров по реализации этого. Также я не нашёл способа сделать это через плагин Custom Header Links.

Буду признателен за помощь! Ниже приведён мой текущий код, использующий API decorateWidget для отправки имени пользователя:

<script type="text/discourse-plugin" version="0.12">
    const { iconNode } = require("discourse-common/lib/icon-library");

    let icon = iconNode('calculator');

    var currentUser = api.getCurrentUser();
    var username = currentUser.username;

    api.decorateWidget('header-icons:before', helper => {
        const showExtraInfo = helper.attrs.minimized;
            if(!showExtraInfo) {
                return helper.h('li#calculator', [
                    helper.h('form#header-calculator.icon', {
                        action:'https://example.com/',
                        method:'post'
                    }, [
                        helper.h('button', {name:'u', value: username},[
                            iconNode('calculator'),
                        ])

                    ])
                ]);

            }
    });


</script>

[Arkshine]

Привет,

Я помогу тебе, но не мог бы ты сначала объяснить, что именно ты пытаешься сделать?

Ты хочешь отобразить меню с формой внутри?

Например:

Или это просто кнопка с именем пользователя в качестве метки, которая перенаправляет на какой-то URL?

[littleviolette]

Это означает, что нужно нажать на иконку в заголовке >> отправить имя пользователя на указанный URL.

Форма на самом деле не отображается. Отображается только иконка в заголовке. Действие отправки выполняется в фоновом режиме. Извините за путаницу. Позвольте мне удалить слово “форма” из заголовка моего сообщения.

[Arkshine]

Хорошо, вот перенаправление на внешний URL, содержащий имя пользователя.

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

import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = <template>
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Калькулятор"
        target="_blank"
      />
    </li>
  </template>;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});

• calculator — это уникальное имя.
• iconComponent ссылается на встроенный glimmer <template>, как вы видите здесь, но он также может ссылаться на glimmer-классовый компонент, который вы создадите в директории components.
• Вы можете выбрать место размещения своего значка, используя before или after, за которыми следует уникальное имя значка в заголовке.

Не стесняйтесь вносить изменения!

Примечание:

• Синтаксис glimmer <template> не будет работать через UI.

  Вам потребуется создать компонент темы с отдельными файлами. Чтобы быстро создать TC, вы можете использовать Discourse CLI и легко разрабатывать с ним в своём редакторе кода. Я настоятельно рекомендую это.

  Вы также можете использовать шаблон на Github: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub.

  • Для использования glimmer-компонента расширение файла должно быть .gjs.

Дайте знать, если понадобится дальнейшая помощь!

[littleviolette]

Привет, @Arkshine,

Большое спасибо за подробное описание. Я попытался внедрить код в тег , но иконка не отображается. Что я сделал не так?

<script type="text/discourse-plugin">
    import { apiInitializer } from "discourse/lib/api";
    import DButton from "discourse/components/d-button";
    
    export default apiInitializer("1.8.0", (api) => {
      const currentUser = api.getCurrentUser();
    
      if (!currentUser) {
        return;
      }
    
      const url =
        "https://example.com/?u=" + encodeURIComponent(currentUser.username);
      console.log("url: " + url)
      const iconComponent = <template>
        <li class="calculator">
          <DButton
            @href={{url}}
            @icon="calculator"
            class="icon btn-flat"
            title="Calculator"
            target="_blank"
          />
        </li>
      </template>;
    
      api.headerIcons.add("calculator", iconComponent, { before: "search" });
    });    
</script>

[Arkshine]

@littleviolette Привет, это нельзя запустить в интерфейсе администратора здесь.

С помощью Theme CLI вы можете легко создать компонент темы на своём компьютере.

Затем откройте файл в текстовом редакторе по вашему выбору (например, VS Code) и добавьте код в инициализатор. Создайте файл в /javascripts/discourse/api-initializers/my-header-icon.gjs и вставьте в него код. Вы также можете изменить значения по умолчанию в about.json.

Следующий шаг — установка компонента на ваш продакшн-форум:

• вы можете разместить компонент на GitHub и в интерфейсе администратора использовать ссылку на репозиторий для установки;
• или заархивировать директорию на своём компьютере и в интерфейсе администратора установить её с устройства.

Попробуйте и дайте знать, если возникнут проблемы!