Estilização de post de blog

[Discourse]

	Resumo	O Blog Post Styling permite designar uma categoria de blog, alterando a aparência dos tópicos dentro dela para se assemelhar mais a posts de blog tradicionais.
	Pré-visualização	Pré-visualizar no theme-creator.discourse.org
	Repositório	github.com/discourse/discourse-blog-post-styling
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

Instalar este componente de tema

O componente de tema Blog Post Styling transforma os tópicos do Discourse em um layout tradicional de post de blog. Quando aplicado a uma categoria, a primeira imagem de cada tópico é promovida a um destaque de largura total acima do título, e o conteúdo é estilizado com tipografia e exibição de metadados adequados a blogs.

Configurações

Abaixo estão as diversas configurações associadas a este componente de tema:

• Categoria de blog: Tópicos que pertencem a qualquer uma das categorias selecionadas terão o estilo de post de blog aplicado.

• Tag de blog: Escolha uma ou mais tags que, ao serem aplicadas a um tópico, atribuirão a ele o estilo de post de blog.

• Tamanho da imagem: Decida como a imagem de destaque preenche a área do cabeçalho:

  • Sem imagem: Oculta a imagem de destaque.
  • Largura total (padrão): A imagem ocupa toda a área de conteúdo.
  • Centralizada: A imagem mantém a proporção e é centralizada na área de conteúdo.

• Posição da imagem: Decida onde mostrar a imagem em relação ao título:

  • Acima do título (padrão): Mostra a imagem acima do título do tópico.
  • Abaixo do título: Mostra a imagem abaixo do título do tópico. Quando selecionada, você também pode incluir um resumo que será exibido entre o título e a imagem. Abaixo, você pode ver como a imagem se parece quando a configuração posição da imagem está definida como acima do título e abaixo do título:

• Dropcap ativado: Quando ativado, a primeira letra do post de blog terá um estilo ampliado, como este:
  
  
• Mobilidade ativada: Quando ativado, o estilo de post de blog é aplicado ao ler o tópico em dispositivos móveis.

Escrevendo um Post de Blog

Depois de configurar sua categoria de blog (ou aplicar sua tag de post de blog), há algumas coisas especiais a observar sobre o funcionamento do tópico de post de blog.

Imagem de destaque

Coloque a imagem que deseja usar como destaque na primeira linha do post, seguida de uma linha em branco antes do início do seu conteúdo:

![descrição da imagem|1100x440](upload://hash-da-sua-imagem.jpg)

O conteúdo do seu post começa aqui...

O componente posiciona automaticamente essa imagem com base na configuração posição da imagem (veja acima). Se qualquer outro conteúdo — incluindo linhas em branco — aparecer antes da imagem, ela não será promovida à posição de destaque.

Após publicar um post pela primeira vez, atualize a página para ver a imagem aparecer na posição designada. (Isso afeta apenas o autor do post na publicação inicial; membros que acessam o post devem ver a imagem no lugar correto imediatamente.)

Dicas de dimensionamento de imagem

O contêiner da imagem tem 440px de altura e 100% de largura. Para melhores resultados quando a configuração tamanho da imagem está definida como largura total:

• Use ou recorte imagens para 1100x400px antes de fazer o upload para evitar recortes, ou
• Escolha imagens com um assunto centralizado ou conteúdo não específico (paisagens, padrões) para que o recorte não remova detalhes importantes.

Resumos

Quando a configuração posição da imagem está definida como abaixo do título, você pode adicionar um resumo opcional ao seu post de blog, que aparecerá entre o título e a imagem de destaque.

Para fazer isso, envolva o conteúdo que deseja que apareça no seu resumo da seguinte forma:

[summary] Aqui está o conteúdo que será seu resumo. [/summary]

Citações estilizadas

Ao criar tópicos em uma categoria de blog, as citações recebem um estilo especial. Você pode criar citações no compositor usando o símbolo > ou o botão da barra de ferramentas do compositor “.

Configuração de categoria recomendada

Nas configurações da sua categoria de blog, considere ativar a configuração de categoria Navegar para o primeiro post após os tópicos serem lidos. Isso envia leitores recorrentes diretamente ao conteúdo do post de blog, em vez de sua última posição lida.

Blog Post Styling + Miniaturas da Lista de Tópicos

Este componente é compatível com Miniaturas da Lista de Tópicos, que destaca a imagem de destaque do seu post de blog na lista de tópicos:

Nota: O componente Miniaturas da Lista de Tópicos não é compatível com o tema Horizon. A captura de tela acima está usando o tema Foundation.

[amotl (Andreas Motl)]

@amotl

After bumping the defined sizes manually just slightly in the markup, the headline-image-expansion feature works flawlessly – [at least with] images [that] are actually large enough (> 690px wide).

We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

after the respective image had been uploaded beforehand as

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

This is cute and makes us happy.

---

JeeLink

[ohellno]

Olá, e muito obrigado por dedicar seu tempo a criar isso e liberá-lo gratuitamente.

Eu estava apenas me perguntando se seria possível mudar isso de alguma forma para usar uma tag específica em vez de uma categoria particular?

Acabei de configurar um novo site do Discourse, mas tenho escrito muitos “posts de blog” e ainda gostaria que eles aparecessem nas outras categorias apropriadas, para que pareça um pouco mais integrado.

Atualmente, tenho publicado eles em sua própria categoria de blog-posts, que limitei para que apenas eu pudesse postar lá, mas acabei de configurar um grupo de tags e tornei-o acessível apenas à equipe.

Obrigado novamente!

[Howaids (Martin)]

Muito obrigado, @tshenry. Todos os componentes do seu tema estão perfeitos. E também a @sam e a @codinghorror por compartilharem um aplicativo incrível!! Sua generosidade, incluindo o suporte no meta, é sincera. O Discourse é, de fato, feito para a internet mais atenciosa do futuro.

[LoganRTW (Ward)]

Existe alguma maneira de fazer isso funcionar com um vídeo como conteúdo em destaque, em vez de uma imagem? Eu deletaria meu site WordPress se pudesse apenas postar o YouTube/Vimeo etc. e ter isso como o conteúdo principal. Alguma ideia?

[Howaids (Martin)]

Com certeza! Ótima sugestão @LoganRTW. Está com meu voto @tshenry. É possível fazer isso?

[tshenry (Taylor)]

Atualização

Se você puder acreditar

Comecei a refatorar e limpar o componente para usar a estrutura de arquivos no estilo de plugin e aproveitar as novas miniaturas de tópicos.

FEATURE: Include optimized thumbnails for topics (#9215)

Também adicionei algumas novas funcionalidades:

• Novas configurações

  • image_display_style - existem duas opções com isso. O padrão deve ser o comportamento que o componente sempre teve. A alternativa garantirá que não haja recorte e que a imagem completa seja exibida. É difícil dizer qual é “melhor”, então você deverá fazer alguns testes e ver o que funciona melhor para o seu fluxo de trabalho e imagens do blog.

    

  • mobile_enabled - esta é uma primeira versão do estilo de postagens de blog para dispositivos móveis. Gostaria de ouvir quaisquer relatórios de bugs ou ideias para melhorias nisso!

    

Ainda quero continuar refatorando e limpando o código, mas isso deve ser um bom começo.

Introduce mobile, image display options, and refactor

---

@Varhall

Seria legal adicionar a marcação schema.org para esse tipo de tópico. Está nos planos?

Não há planos para isso no momento, receio!

[torstensson (Per Torstensson)]

Obrigado por um componente realmente inspirador e agradável @tshenry

Na minha avaliação, identifiquei dois problemas;

1. Sem imagem de blog em subcategorias - após uma solução de problemas bastante extensa com diferentes temas e ativando/desativando ambos os plugins e outros componentes, acredito que posso afirmar com quase certeza que as imagens de blog não serão renderizadas para subcategorias. A primeira imagem/a imagem de blog pretendida, no entanto, ainda está oculta.

2. Primeira imagem não oculta em conformidade com o DiscoTOC - Quando o Estilo de Postagem do Blog é usado juntamente com o DiscoTOC, a imagem do blog é renderizada acima do título corretamente - no entanto, ela é renderizada duas vezes, pois ainda é exibida em sua posição original também.

[tshenry (Taylor)]

Muito obrigado pelo feedback, @torstensson! Ambos os pontos eram, de fato, bugs e já devem estar corrigidos:

Bug fixes

Por favor, me avise se você continuar enfrentando algum problema.

---

Para todos que estão usando este componente:

Se você não estiver incluindo atualmente uma imagem destacada no topo de todos os posts do blog, isso é para você!

Este componente foi criado com a intenção de exibir uma imagem acima de cada tópico de post do blog. Dito isso, era possível criar um post do blog sem exibir uma imagem destacada, bastando não incluir uma imagem na primeira linha do post. Esse comportamento mudou.

A implementação mais recente melhora muito o desempenho, mas usa um valor predefinido em vez de analisar o conteúdo do post em si. O valor predefinido é gerado a partir da primeira imagem encontrada no post. Ao contrário do que acontecia antes, ela não está necessariamente limitada a uma imagem que aparece como a primeira linha do post. Isso significa que, se você criar um post sem uma imagem na primeira linha, mas incluir uma única imagem no final do post, essa imagem no final também será exibida acima do tópico.

Incluí uma configuração de “tudo ou nada” que pode ativar/desativar a “imagem destacada”, permitindo que você tenha todo o estilo, exceto a imagem destacada, se essa for sua preferência.

Vou atualizar a OP com todas as novas considerações e recomendações, mas, resumidamente, certifique-se de incluir uma imagem na primeira linha do post (essa posição ainda é usada para garantir que a imagem não seja repetida). Você pode achar útil usar uma imagem de marcação no modelo de tópico da categoria que possa ser usada como padrão caso nenhuma imagem seja fornecida.

[torstensson (Per Torstensson)]

@tshenry

Muito obrigado pelo feedback, @torstensson! Ambos os pontos eram, de fato, bugs e já devem estar corrigidos. Por favor, avise se ainda tiver algum problema.

Incrível, obrigado, @tshenry Posso confirmar com prazer que ambos os problemas foram resolvidos com a atualização e, novamente, obrigado por um componente realmente excelente, não apenas em funcionalidade, mas também como inspiração

[core]

Um recurso anunciado recentemente pode funcionar como uma alternativa a este componente de tema. Deixamos aqui para quem tiver interesse.

Page Publishing

This guide covers how to use the Page Publishing feature on Discourse. This feature allows Staff users to convert a topic into a standalone static page with custom styling. Examples include the Terms of Service and Privacy Policy pages. Required user level: Staff Publishing static pages on Discourse Page Publishing allows Staff users to create standalone static pages from topics. This is similar to the process for creating Terms of Service or Privacy Policy …

[nityeshaga (Nityesh Agarwal)]

@tshenry Muito obrigado por este componente! Estamos usando-o juntamente com o plugin Topic List Previews para criar uma seção de Artigos para estudantes na Comunidade Dataquest.

Tenho uma solicitação de recurso para você considerar em futuras iterações deste componente — Poderia adicionar a capacidade de incluir URLs canônicas nos artigos?

Os mecanismos de busca usam links canônicos para determinar e priorizar a fonte definitiva do conteúdo, eliminando confusão quando há múltiplas cópias do mesmo documento em locais diferentes.

Obrigado!

[sebastianh (Rebastion)]

Então, acho que este é um ótimo componente. Na verdade, estou testando agora em um Discourse em produção e explorando suas funcionalidades. Sem uma ordem específica, gostaria de compartilhar minhas primeiras impressões e feedbacks, espero que ajudem — peço desculpas se algumas delas forem mais perguntas do que sugestões:

• A forma como o autor é exibido está um pouco fora do lugar e poderia ser resolvida de maneira mais eficiente em termos de espaço, integrando-se melhor ao título, à tag de categoria etc. Também há bastante espaço em branco entre a linha que encerra as informações do autor e o início do texto.
• É difícil para um visitante que chega diretamente a uma postagem de blog perceber onde está, pois não há um caminho de navegação claro ou algo similar. A principal razão é que a barra de título parece estar inativa, enquanto em tópicos normais ela se transforma e inclui o título, a categoria etc.
• Seria ótimo se a visualização de categorias tivesse mais cara de blog, com pequenas imagens de pré-visualização e coisas assim. Seria difícil implementar isso?
• Não vejo uma descrição da categoria na visualização de categorias.

[sebastianh (Rebastion)]

@nityeshaga

uma seção de Artigos para estudantes na Comunidade Dataquest.

Uau, qual componente de tema é usado para essa visualização de categoria? Parece legal.

[tshenry (Taylor)]

Obrigado pelo feedback

@sebastianh

• A forma como o autor é exibido está um pouco fora de lugar e poderia, talvez, ser resolvida de maneira mais eficiente em termos de espaço, para integrá-la melhor ao título, à tag de categoria etc… Também há bastante espaço em branco entre a linha que encerra as informações do autor e o início do texto.

Concordo que há bastante espaço em branco ao redor da área do autor/título. Vou levar esse feedback em consideração na próxima vez que trabalhar nesse componente e ver se consigo encontrar uma solução.

@sebastianh

É difícil para um visitante direcionado diretamente a uma postagem de blog perceber onde está, pois não há um caminho de navegação claro ou algo do tipo. O principal motivo é que a barra de título parece estar desativada, enquanto em tópicos normais ela se transforma e inclui o título, a categoria etc.

Não tenho 100% de certeza sobre o que você quis dizer aqui. O cabeçalho alternará para incluir o título/caminho de navegação assim que você rolar para baixo, passando pela imagem e pelo título do blog. Você tem razão de que, no topo da página, não é especialmente óbvio, no entanto. Vou levar isso em consideração também.

@sebastianh

• Seria ótimo se a visualização de categorias pudesse ter mais uma aparência de blog, com pequenas imagens de prévia e coisas assim. Seria difícil fazer isso?
• Não vejo uma descrição da categoria na visualização de categorias.

Essas funcionalidades estariam fora do escopo deste componente. Para a visualização de categorias, você pode querer dar uma olhada em: Topic List Thumbnails

[sebastianh (Rebastion)]

Obrigado pelo feedback Acredito que a maioria das dúvidas foi esclarecida, e agora consigo ver também a descrição da categoria. Não tenho certeza do motivo pelo qual ela não estava visível antes; achei que tivesse algo a ver com o componente. Vou continuar testando e compartilharei mais feedback mais tarde. Excelente trabalho!

[sebastianh (Rebastion)]

Acho que o espaço excessivo no topo vem do espaço que sobra após a imagem ser “movida” para o cabeçalho da postagem no blog, resultando não em espaço ganho abaixo, mas em um vazio.

Mas notei um problema real: se eu postar links para tal postagem em outros tópicos, não há miniatura, veja aqui

[sebastianh (Rebastion)]

@sebastianh

Acho que o espaço em excesso no topo vem do espaço que sobra depois que a imagem é “movida” para o cabeçalho da postagem do blog, resultando não em espaço gained abaixo, mas sim ficando vazio.

Aqui está uma captura de tela do que quero dizer:

[tshenry (Taylor)]

Tenho quase certeza de que isso se deve à sua exclusão de uma quebra de linha entre o link de upload da imagem e o primeiro parágrafo. Pode tentar editá-lo para corresponder ao seguinte:

![spagh|690x390](upload://nVi42gGIwt03DAYSzVEc4RvwS6h.jpeg) 

<big>Embora</big> haja espaço de sobra na web para postar, blogar, compartilhar, twittar e tudo mais, meu lugar favorito para trocar ideias com todos vocês no spaghetti western é este fórum. Alguns de vocês podem se lembrar de um esforço de vários anos atrás, chamado "Planet Spaghetti Western", e a ideia era ter um blog que agregasse automaticamente postagens de todos os blogs de spaghetti western da internet e as apresentasse como um resumo. Era bastante complicado do ponto de vista técnico e, no final, deu mais trabalho do que valia a pena, então tive que desativá-lo.

Se isso funcionar, adicionarei uma nota no OP sobre esse requisito.

[sebastianh (Rebastion)]

Olá. Isso realmente reduz um pouco a margem, obrigado. Eu fiz exatamente o oposto no editor: deixei o mínimo de espaço possível entre a imagem e o início do texto.