Ícone atualizado do cabeçalho personalizado: enviar dados do post via URL

Dev
4

Ok, então um redirecionamento para um URL externo que contém o nome de usuário.

Aqui está um exemplo básico de como você pode fazer isso, usando a nova 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="Calculator"
        target="_blank"
      />
    </li>
  </template>`;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});
  • calculator é um nome único
  • iconComponent refere-se a um glimmer inline <template> como você vê aqui, mas também pode se referir a um componente de classe glimmer que você cria no diretório components.
  • Você pode escolher onde colocar seu ícone usando before ou after seguido pelo nome único do ícone do cabeçalho.

NVIDIA_Share_rvsjetCtUy

Sinta-se à vontade para ajustar!

Observação:

  • A sintaxe do glimmer <template> não funcionará usando a UI.

    Você precisará criar um componente de tema com arquivos separados. Para gerar um TC rapidamente, você pode usar o Discourse CLI e desenvolver com ele com muita facilidade com seu editor de código. Eu recomendo muito.

    Você também pode usar o template no Github: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes.

    • Para usar um componente glimmer, a extensão do arquivo deve ser .gjs.

Me avise se precisar de mais ajuda!

3 curtidas