Estilização de Post de Blog

[Discourse]

	Resumo	Blog Post Styling (Estilização de Post de Blog) permite que você designe uma categoria de blog, o que altera a aparência dos tópicos dentro da categoria para se parecerem mais com posts de blog tradicionais.
	Prévia	Prévia em theme-creator.discourse.org
	Repositório	github.com/discourse/discourse-blog-post-styling
	Novo no Discourse Themes?	Guia para iniciantes sobre como usar os Temas do Discourse

Instalar este componente de tema

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

Configurações

Aqui estão as várias configurações associadas a este componente de tema:

• Categoria do blog: O slug da categoria que deve usar a estilização de post de blog. Para adicionar a mais de uma categoria, use uma lista separada por vírgulas sem espaços (ex: blog,announcements). Para encontrar o slug:

  • Para categorias, pegue o caminho da URL após o /c/ — então, para /c/blog/, o slug é blog.
  • Para subcategorias, pegue o caminho da URL após o /c/ e substitua qualquer / por -. Por exemplo, uma categoria em /c/blog/tutorials se torna blog-tutorials.

• Tag de blog: Escolha uma ou mais tags que, quando aplicadas a um tópico, darão a ele a estilização de post de blog.

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

  • No image (Sem imagem): Oculta a imagem em destaque.
  • Full width (Largura total) (padrão): A imagem se estende por toda a área de conteúdo.
  • Centered (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:

  • Above title (Acima do título) (padrão): Mostra a imagem acima do título do tópico.
  • Below title (Abaixo do título): Mostra a imagem abaixo do título do tópico. Quando selecionado, você também pode incluir um resumo que é exibido entre o título e a imagem. Abaixo, você pode ver como a imagem fica quando a configuração image position está configurada como above title e below title:

• Dropcap enabled (Letra capitular ativada): Quando ativado, a primeira letra do post do blog terá um estilo ampliado, assim:
  
  
• Mobile enabled (Celular ativado): Quando ativado, a estilização de post de blog é aplicada 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 serem observadas sobre como o tópico do post de blog funcionará.

Imagem em destaque

Coloque a imagem que você deseja como imagem hero na primeira linha do post, seguida por uma linha em branco antes que seu conteúdo comece:

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

Seu conteúdo do post começa aqui...

O componente posiciona automaticamente esta imagem com base na configuração image position (veja acima). Se qualquer outro conteúdo — incluindo linhas em branco — aparecer antes da imagem, ela não será promovida para a posição hero.

Após publicar um post pela primeira vez, recarregue a página para ver a imagem aparecer na posição designada. (Isso afeta apenas o autor do post na publicação inicial; os membros que acessam o post devem ver a imagem no lugar certo 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 image size estiver definida como full width:

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

Resumos

Quando a configuração image position estiver definida como below title, você pode adicionar um resumo opcional ao seu post de blog, que aparecerá entre o título e a imagem em destaque.

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

[summary] Este é o conteúdo que será seu resumo. [/summary]

Blocos de citação estilizados

Ao criar tópicos em uma categoria de blog, os blocos de citação recebem estilização especial. Você pode criar blocos de citação no compositor com o símbolo > ou usando o botão da barra de ferramentas do compositor <kbd>“</kbd>.

Configuração de categoria recomendada

Nas configurações da sua categoria de blog, considere ativar a configuração de categoria Navigate to first post after topics are read (Navegar para o primeiro post após a leitura dos tópicos). Isso envia leitores recorrentes diretamente para o conteúdo do post do blog em vez de sua última posição de leitura.

Blog Post Styling + Miniaturas da Lista de Tópicos

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

Nota: O componente Topic List Thumbnails não é compatível com o tema Horizon. A captura de tela acima está usando o tema Foundation.