Blog e artigo

Listagem de artigos e página de artigo com usePage. Templates blog e article são recomendados, não obrigatórios.

Uma listagem mostra os artigos de um blog. A página de artigo mostra um texto. Os dois usam o contexto da página atual, não uma chamada manual à API.

Índice: Cookbooks. Campos do objeto: Blog. Menus e preview: Menus e blog.

O que você precisa

• Templates templates/blog.json e templates/article.json. O validador os trata como recomendados (page, blog, article, 404), não como os cinco obrigatórios.
• Uma seção com enabledOn em blog ou article.
• usePage de @corvex/theme-sdk.

O runtime carrega o blog pelo parâmetro ?blog= ou pelo primeiro blog da loja. Na listagem, a plataforma pede até 12 artigos. Esse número não vem de um setting do tema.

Listagem

usePage ignora o texto do argumento e devolve o contexto da página aberta. No template blog, leia blog e articles.

import { usePage } from '@corvex/theme-sdk';

export default function BlogListingSection() {
  const { blog, articles } = usePage('blog');
  const nodes = articles?.nodes ?? [];

  return (
    <section>
      <h1>{blog?.title}</h1>
      <ul>
        {nodes.map((article) => (
          <li key={article.id}>
            <a href={article.url}>{article.title}</a>
            {article.excerpt ? <p>{article.excerpt}</p> : null}
          </li>
        ))}
      </ul>
    </section>
  );
}

A listagem não traz bodyHtml. Cada item é um resumo: title, excerpt, url, featuredImageUrl, publishedAt.

Artigo

No template article, leia article e blog. Se a URL tiver ?article=, o runtime devolve o artigo e não a lista.

import { usePage } from '@corvex/theme-sdk';

export default function ArticleSection() {
  const { article, blog } = usePage('article');

  if (!article) {
    return <p>Artigo não encontrado.</p>;
  }

  return (
    <article>
      <p>{blog?.title}</p>
      <h1>{article.title}</h1>
      {article.bodyHtml ? (
        <div dangerouslySetInnerHTML={{ __html: article.bodyHtml }} />
      ) : (
        <p>{article.excerpt}</p>
      )}
    </article>
  );
}

bodyHtml é o HTML que a API envia (bodyHtml ou contentHtml no payload). O mapper não sanitiza esse HTML. Se a seção injetar o valor, o tema assume o conteúdo da plataforma. Não foi verificado se a API já filtra o HTML.

Preview

Parâmetro	Exemplo
Blog	?blog=news
Artigo	?blog=news&article=como-escolher-tamanho

Rotas que o mapper monta: /blogs/{handle} e /blogs/{blog}/articles/{artigo}. Esta página não confirma que a loja publicada serve essas rotas.

Checklist

• Templates blog.json e article.json existem se a loja usa blog
• A listagem usa articles?.nodes e não espera bodyHtml
• A página de artigo trata article ausente
• corvex validate .

Veja também

• Contrato da página
• Contexto de página