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

Разработка
4

Хорошо, вот перенаправление на внешний 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, за которыми следует уникальное имя значка в заголовке.

NVIDIA_Share_rvsjetCtUy

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

Примечание:

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

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

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

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

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