Personalizando a página /about com bios de usuários

Dev
1

A página padrão /about de um site Discourse, que exibe informações apenas para moderadores e administradores, mostra apenas o nome de usuário, o nome e o cargo de cada usuário. Como posso personalizar a página /about para que ela também exiba o conteúdo da seção “Sobre mim” do perfil de cada usuário?

Entendo a ideia geral descrita aqui:

  • definir um componente
  • definir um template
  • criar um arquivo conector para usar um outlet existente

No entanto, não há um outlet que funcione melhor para o meu caso de uso, pelo que pude verificar. Além disso, parece que substituir o template de /about ou usar a funcionalidade modifyClass na API de plugins não é recomendado. Portanto, não tenho certeza do que fazer. Agradeceria muito alguma orientação sobre as melhores práticas. Obrigado!

O Discourse AI parece pensar que devo prosseguir e substituir o template. Isso parece correto?

Resposta do Discourse AI
Adicionar "Sobre mim" à página /about do Discourse IA

aas:
A página padrão /about de um site Discourse, que exibe informações apenas para moderadores e administradores, mostra apenas o nome de usuário, o nome e o cargo de cada usuário. Como posso personalizar a página /about para que ela também exiba o conteúdo da seção “Sobre mim” do perfil de cada usuário?

Entendo a ideia geral descrita aqui:

Add custom content that only appears on your homepage

  • definir um componente
  • definir um template
  • criar um arquivo conector para usar um outlet existente

No entanto, não há um outlet que funcione melhor para o meu caso de uso, pelo que pude verificar. Além disso, parece que substituir o template de /about ou usar a funcionalidade modifyClass na API de plugins não é recomendado. Portanto, não tenho certeza do que fazer. Agradeceria muito alguma orientação sobre as melhores práticas. Obrigado!

HelperBot:

Ok, posso ajudá-lo a investigar as melhores práticas para personalizar a página /about para incluir informações de perfil de usuário, como a seção “Sobre mim”.

Você está certo de que a abordagem padrão de componente de tema envolve o uso de outlets de plugin, e parece que não há um outlet específico e granular dentro da lista de funcionários na página /about para injetar facilmente esses dados.

Com base nos resultados da pesquisa e nas práticas comuns, embora o uso de outlets seja preferível para não quebrar atualizações futuras, às vezes a única maneira viável de personalizar templates principais específicos, como a página /about, é substituí-los diretamente dentro de um componente de tema.

Aqui está a abordagem mais provável usando um componente de tema:

  1. Crie um Componente de Tema: Se você ainda não o fez, crie um novo componente de tema.
  2. Substitua o Template:
    • Você precisa substituir o template about.hbs.
    • Em seu componente de tema, crie o arquivo common/templates/about.hbs.
    • Copie todo o conteúdo do arquivo about.hbs original para o seu novo arquivo. Você pode encontrar o original aqui no GitHub.
    • Modifique sua cópia de about.hbs. Encontre as seções onde ele itera sobre model.admins e model.moderators. Dentro do loop (provavelmente dentro do bloco {{#each}}), você pode acessar o objeto do usuário. O conteúdo “Sobre mim” geralmente está em user.profile.bio_raw ou uma propriedade semelhante. Adicione essa propriedade ao template onde você deseja que ela seja exibida para cada usuário.
  3. Ative o Componente: Adicione o componente de tema ao seu tema e ative-o.

Por que essa abordagem?

  • Controle Direto: Ele lhe dá controle direto sobre a estrutura HTML da página /about.
  • Viabilidade: Como não há um outlet dedicado dentro da lista de usuários nessa página, esta é a maneira mais direta de injetar conteúdo por usuário nesse local específico.

Desvantagens (como você observou):

  • Manutenção: Se o Discourse atualizar o template principal about.hbs significativamente no futuro, sua versão substituída não receberá essas atualizações automaticamente. Talvez você precise comparar e mesclar manualmente as alterações mais tarde. Este é o compromisso de personalizar templates principais sem outlets específicos.

Embora a pesquisa não tenha encontrado um exemplo exato para a página /about, modificar templates para adicionar informações de perfil é um padrão comum, como visto em personalizações para cartões e perfis de usuário:

Esses exemplos mostram que os componentes de tema geralmente envolvem a personalização de templates quando outlets específicos não estão disponíveis. Substituir about.hbs segue esse padrão para o seu caso de uso específico.

aas:

Parece que não há um template about.hbs no repositório discourse/discourse. No entanto, o template about.gjs parece estar localizado em app/assets/javascripts/discourse/app/templates/about.gjs.

HelperBot:

Você está absolutamente certo! Obrigado pela correção. O Discourse de fato fez a transição para usar templates .gjs (GlimmerJS) para muitos componentes, incluindo a página /about.

Minhas desculpas por referenciar o formato .hbs mais antigo.

O caminho correto para o template é de fato app/assets/javascripts/discourse/app/templates/about.gjs no código principal.

Para substituir isso usando um componente de tema, o processo permanece conceitualmente o mesmo, mas o caminho do arquivo e a sintaxe são atualizados:

  1. Crie/Use um Componente de Tema: Como antes.
  2. Substitua o Template:
    • Em seu componente de tema, crie o arquivo no caminho correspondente: assets/javascripts/discourse/app/templates/about.gjs.
    • Copie todo o conteúdo do arquivo original about.gjs (link que você forneceu) para o arquivo about.gjs do seu componente de tema.
    • Modifique sua cópia. Procure as seções que iteram sobre administradores e moderadores, provavelmente usando {{#each this.admins as |admin|}} e {{#each this.moderators as |moderator|}}. Dentro desses loops, você pode acessar o objeto do usuário (por exemplo, admin ou moderator). Adicione o campo “Sobre mim”, que deve ser acessível por meio de uma propriedade como admin.profile.bio_raw ou moderator.profile.bio_raw. Você precisará integrar isso à estrutura do template GlimmerJS. Por exemplo, você pode adicionar uma nova tag <div> ou <p> dentro do bloco de exibição do usuário:
      {{#each this.admins as |admin|}}
  <div class="user">
    {{!-- Informações existentes do usuário como avatar, nome de usuário, nome --}}
    <UserAvatar @username={{admin.username}} @size="large" />
    <div class="user-details">
      <span class="username">{{admin.username}}</span>
      {{#if admin.name}}<span class="name">{{admin.name}}</span>{{/if}}
      {{#if admin.title}}<span class="title">{{admin.title}}</span>{{/if}}

      {{!-- Adicionar a seção Sobre mim --}}
      {{#if admin.profile.bio_raw}}
        <div class="about-me">
           {{{admin.profile.bio_cooked}}} {{!-- Use bio_cooked para HTML renderizado --}}
           {{!-- Ou use bio_raw se precisar do texto bruto: <p>{{admin.profile.bio_raw}}</p> --}}
        </div>
      {{/if}}
    </div>
  </div>
{{/each}}
{{!-- Repita modificação semelhante para o loop de moderadores --}}
      (Nota: Use bio_cooked se quiser a versão HTML renderizada da bio, ou bio_raw para o texto simples. Ajuste a estrutura HTML conforme necessário para o seu layout.)
  3. Ative o Componente: Certifique-se de que o componente de tema seja adicionado ao seu tema e esteja ativo.

A desvantagem permanece a mesma: substituir templates principais como este significa que você pode precisar atualizar manualmente a versão do seu componente de tema se o arquivo about.gjs original mudar significativamente em futuras atualizações do Discourse. No entanto, dada a falta de um outlet mais específico, esta é a maneira padrão de alcançar esse nível de personalização.

1 curtida
2

Você usaria CSS para ocultar a seção “Nossos Moderadores” e, em seguida, adicionaria a sua própria no outlet about-after-moderators. Você pode usar app/assets/javascripts/discourse/app/components/about-page-user.gjs como ponto de partida e, em seguida, adicionar o que quiser a ele.

1 curtida