Adicionar conteúdo personalizado que aparece apenas na sua página inicial

Uma situação muito comum em que você se encontrará como desenvolvedor de temas é a necessidade de criar conteúdo que apareça apenas na página inicial da sua comunidade.

Você pode adicionar algum HTML à seção “After Header” (Depois do Cabeçalho) do seu tema, que aparecerá em todas as páginas. Você pode fazer alguns malabarismos com CSS para ocultar isso em todos os lugares, exceto na página inicial… mas, em vez disso, vamos usar um tema do Discourse para criar um componente com conteúdo que é visível apenas na sua página inicial.

Se você não está familiarizado com os temas do Discourse, consulte Beginner's guide to using Discourse Themes e Structure of themes and theme components

No seu tema do Discourse, você precisará configurar a seguinte estrutura de diretórios:

:file_folder: javascripts/discourse/components/
:file_folder: javascripts/discourse/connectors/

A partir daqui, vamos criar um componente Ember. Você pode encontrar mais informações sobre componentes Ember na documentação deles: Ember.js Guides - Guides and Tutorials - Ember Guides

Mas, por enquanto, este será um componente simples. O componente consistirá em dois arquivos, um contendo a lógica e outro o template.

:page_facing_up: javascripts/discourse/components/custom-homepage-content.js

import Component from "@glimmer/component";
import { service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";

export default class CustomHomepageContent extends Component {
  @service router;

  get isHomepage() {
    const { currentRouteName } = this.router;
    return currentRouteName === `discovery.${defaultHomepage()}`;
  }
}

Isso cria um getter isHomepage, que verifica o serviço de roteador para o currentRouteName — se o nome da rota corresponder à sua página inicial (conforme ditado pelas configurações do site), ele retornará true

Agora precisamos do nosso template

:page_facing_up: javascripts/discourse/components/custom-homepage-content.hbs

{{#if this.isHomepage}}
  <h1>Este é o meu conteúdo HTML da página inicial</h1>
{{/if}}

O template verifica o getter isHomepage e exibirá seu conteúdo se for true. Você pode adicionar qualquer HTML que desejar entre os blocos {{#if}}.

Agora que nosso componente foi criado, precisamos adicioná-lo ao Discourse em algum lugar. Para esta etapa, você precisará decidir qual plugin outlet utilizar. Estas são áreas em todo o Discourse onde adicionamos um pouco de código para os desenvolvedores se conectarem. Você pode pesquisar por eles no Github, ou navegá-los usando (deprecated) Plugin outlet locations theme component.

Para páginas iniciais personalizadas, above-main-container é uma escolha comum, então vamos usar essa.

Precisamos criar nosso arquivo de conector no diretório correto:

:page_facing_up: javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs

<CustomHomepageContent />

:point_up: e é isso, precisa apenas de uma única linha chamando seu componente :tada:


Este documento é controlado por versão - sugira alterações no github.

47 curtidas

Olá @awesomerobot,

Obrigado pela explicação. Tentei os passos que você sugeriu, mas o after_header que implementei ainda está aparecendo nas páginas de detalhes das postagens. Você pode recomendar como posso corrigir isso para que apareça apenas na minha página inicial?

1 curtida

Oi @Cornelius, posso ver seu código?

2 curtidas

Seria ótimo reescrever isso para o uso moderno do sistema de arquivos em vez de colocar tudo nas tags de cabeçalho.

A maioria desses guias antigos para temas está desatualizada em relação a como as coisas são feitas agora.

7 curtidas

Sim, isso estava bastante desatualizado! Atualizei para refletir a estrutura de temas remotos e nossos componentes Ember modernos.

6 curtidas

Isso é incrível!

E esse getter é a mesma coisa que isso http://ember-cli-page-object.js.org/docs/v1.11.x/api/getter.html? Eu sei o suficiente para ser perigoso. Se for o mesmo, então editarei o OP para vinculá-lo.

3 curtidas

@awesomerobot Olá Kris, instalei o Discourse localmente no meu sistema. Qual é o caminho correto para adicionar esses arquivos na minha instância local do Discourse? Eu queria adicionar um novo componente de tema na minha instância local do Discourse.

1 curtida

Você criaria seu componente de tema e o instalaria através do ux.

Instalar um tema ou componente de tema

Instalar o aplicativo de console Discourse Theme CLI para ajudá-lo a criar temas

4 curtidas

Se eu construir minha página inicial em cima da visualização de categoria, consequentemente ainda receberei meu conteúdo personalizado, mesmo que eu vá para /categories, que não é o URL inicial. Quero limitar isso apenas ao URL raiz /, que acredito ser o que o código anterior estava fazendo, mas me pergunto se defaultHomepage() deveria fazer isso.

3 curtidas

discovery.${defaultHomepage()} corresponderá à rota definida como rota de aterrissagem pela configuração top-menu. Ela corresponderá tanto à URL raiz / QUANTO à rota específica, como /categories.

Na minha experiência, há duas complicações ao construir uma página inicial personalizada com base em defaultHomepage():

  • a rota em que ela é construída não está mais disponível como uma visualização de lista simples
  • os membros podem definir sua própria página inicial padrão nas configurações de sua interface. Portanto, é preciso desativar esse recurso ou ter um conceito de página inicial que funcione em qualquer uma das rotas do menu superior

Para construir uma página inicial personalizada apenas na URL raiz, pode-se verificar router.currentURL === '/'. Por padrão, isso corresponde apenas à URL raiz / e não à rota de aterrissagem definida pela configuração do menu superior. No entanto, agora existe uma lógica nos links da barra lateral que também visa corresponder a uma determinada URL a uma rota. Portanto, por padrão, não funcionará nos links da barra lateral. Acabei de postar um tópico sobre isso: Posso ter links na barra lateral que não resolvem uma URL para uma rota?

Pelo que entendo, atualmente não há uma maneira padrão de construir uma página inicial personalizada na URL raiz sem direcionar também uma rota do menu superior ou ter problemas com a barra lateral. Seria ótimo ter essa opção.

4 curtidas

Certo, é um tipo de solução alternativa de longa data que / e a rota correspondente /route possam renderizar conteúdo diferente. Temos um “a fazer”:

  1. Permitir que a página inicial seja definida independentemente da configuração top_menu.
  2. Adicionar um novo modelo de página inicial autônomo que possa ser personalizado sem assumir uma rota existente.

Páginas iniciais personalizadas são uma solicitação muito comum neste momento, então certamente poderíamos usar mais flexibilidade aqui.

6 curtidas