BlogList

BlogList lista os posts de um blog. Ela tem três formatos: revista, com um post em destaque grande seguido de uma grade; lista, com cada post numa linha dentro de uma coluna de leitura; e grade, com duas ou três colunas. Pode ter um título, uma linha de filtros por categoria e a paginação do blog.

Quando usar

Use em qualquer página que liste posts: a início, uma página de arquivo (categoria, tag, autor ou série) ou uma série. Os três modelos do blog (revista, autor e central) já usam a seção nas páginas delas (ver a seção «Onde aparece» abaixo). Os modelos do template do blog são os de templates/blog/manifest.ts, que os lista como revista, autor e central.

Regras que o componente aplica:

• featured só aparece no formato revista; os outros formatos ignoram o campo (ui/sections/blog-list/blog-list.ts:20).
• columns vale para a grade e para a grade da revista: 2 ou 3, com 3 por padrão (ui/sections/blog-list/blog-list.ts:17).
• align: "inicio" faz a coluna da lista começar na primeira coluna, sob um título que também começa ali. Sem ele, a coluna é centralizada (ui/sections/blog-list/blog-list.ts:27).
• Sem nenhum post (e sem destaque), a seção mostra «Nenhum post por aqui ainda.» (ui/sections/blog-list/blog-list.ts:62).
• Sem heading, a seção serve para as páginas de arquivo, que já têm o título no cabeçalho da página. Com heading, o título vira h2 e os cartões passam a h3 (ui/sections/blog-list/blog-list.ts:38 e :45).
• A paginação tem dois tipos. numerada usa o paginador comum. carregar-mais mostra o link «Carregar mais posts», que aponta para nextHref (ui/sections/blog-list/pager.ts:16 e :31).

Onde aparece no blog pronto

Os modelos do blog montam a seção nestas páginas (cada linha cita o arquivo do projeto gerado, em templates/blog/files/src/site/models/):

• revista, início: revista/home.ts:32, no formato revista com destaque e «Carregar mais».
• revista, arquivos: revista/archive.ts:12, no formato grade com três colunas.
• central, início: central/home.ts:45, no formato grade com três colunas.
• central, arquivos: central/archive.ts:14, no formato lista.
• autor, início: autor/home.ts:69, no formato lista com align: "inicio".
• autor, arquivos: autor/archive.ts:12, no formato lista com align: "inicio".

A descrição do modelo revista (revista/home.ts:24) diz o que a página mostra: o nome do blog, o destaque, a grade, os filtros por categoria e «Carregar mais».

Variantes e propriedades

BlogList

Pasta: ui/sections/blog-list

Variantes

Id	Variante	Tom
blog-list-revista-light	revista	light
blog-list-lista-light	lista	light
blog-list-grade-light	grade	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
variant	BlogListVariant	Sim	—
columns	2 | 3	Não	Desktop columns of the grid (`grade` and the grid of `revista`); 3 by default.
items	readonly PostCard[]	Sim	—
featured	PostCard	Não	The large post of `revista`; the other variants ignore it.
filters	readonly BlogListFilter[]	Não	—
pagination	BlogListPagination	Sim	—
heading	string	Não	Optional h2; an archive screen has the page header's h1 instead and leaves it out.
align	"inicio"	Não	`inicio`: the `lista` column starts at the first column, under a heading that does; centered by default.
tone	Tone	Não	—
density	Density	Não	—
width	Width	Não	—
id	string	Não	—

Captura

A primeira variante do catálogo, o formato revista, em 1280 px:

A mesma variante em 360 px, com os cartões empilhados:

Origem

• ui/sections/blog-list/blog-list.ts: BlogList e BlogListProps.
• ui/sections/blog-list/post-card.ts: o cartão de cada post.
• ui/sections/blog-list/pager.ts: os filtros e a paginação.
• ui/sections/blog-list/blog-list.gallery.ts: as variantes do catálogo.