(Substituído) Link para site externo a partir do logo principal do Discourse

Dev
1

:information_source: O Discourse agora oferece um componente de tema official para suportar este caso de uso:

Conteúdo Original

Não tenho certeza se ter o logotipo principal do Discourse vinculado a um site externo é uma boa ideia para a maioria dos sites, mas existem exceções em que faz sentido levar os usuários a um site externo quando eles clicam no logotipo principal do Discourse. Se você quiser fazer isso, veja como.

Criar um novo componente de tema

:warning: note, esta seção do guia será extraída para um tópico dedicado em breve.

Clique no link "Componentes" na barra lateral da sua página Admin / Personalizar / Temas. Em seguida, na parte inferior da barra lateral, clique no botão "Instalar":

image
image1227×685 65.1 KB

Na janela modal que se abre, clique no link "Criar Novo":

image
image840×1019 114 KB

Dê um nome ao seu componente de tema e certifique-se de que o tipo "Componente" esteja selecionado. Em seguida, clique no botão "Criar":

image
image862×394 28.6 KB

Você será levado à página principal do componente de tema.

Adicionar o código ao componente de tema

O código para substituir o URL padrão do logotipo principal precisa ser adicionado à seção HEAD do seu componente de tema. Para acessar o editor do componente, clique no botão "Editar CSS/HTML":

image
image1201×804 72.6 KB

No editor que se abre, clique no link "Head":

image
image1196×513 33.5 KB

Dependendo de várias condições, adicione os seguintes trechos de código à seção HEAD do editor para modificar o URL para o qual o logotipo inicial aponta. Observe que você precisa substituir https://example.com no código pelo URL completo da página inicial do seu site externo:

  • para alterar o link para um URL estático:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => "https://example.com")
</script>
  • para retornar um URL dinâmico com base no usuário atual:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      const currentUser = api.getCurrentUser();
      return `https://example.com/${currentUser.username}`;
    })
</script>
  • para retornar um URL com base em uma configuração de componente de tema:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      return settings.example_logo_url_setting;
    })
</script>

Clique no botão "Salvar" para salvar suas alterações. Volte para a página principal do componente de tema depois de fazer isso, em seguida, clique no link "Adicionar a todos os temas" para adicionar o novo componente a todos os temas do seu site:

image
image1192×530 53.6 KB

11 curtidas
3

:+1: muito obrigado por compartilhar!

5

image
image1816×312 30 KB

Eu adicionei na tag do cabeçalho, mas não teve efeito

6

Para mim funciona perfeitamente.
Você fez um “hard refresh” no seu site com Ctrl + F5?

7

image
image359×153 17.5 KB

Usei command+R e até ativei o modo anônimo, mas ainda não funcionou

1 curtida
8

Obrigado por compartilhar este tutorial! Preciso alterar o logotipo principal da comunidade e ele funciona perfeitamente usando o trecho de código.

No entanto, percebi que ele também mudará o link do pequeno logotipo que substitui o logotipo completo quando um título de tópico é exibido no cabeçalho. Por exemplo, o ícone aqui no meta:

image

Isso parece pouco intuitivo. É possível adicionar um argumento adicional à função para que ela não afete o small-logo?

9

Por causa de Upcoming Header Changes - Preparing Themes and Plugins, acho que isso precisa ser alterado para

<script type="text/discourse-plugin" version="1.34.0">
    api.registerValueTransformer("home-logo-href", () => "<full_url_of_your_website_homepage>");
</script>
2 curtidas