> ## Documentation Index
> Fetch the complete documentation index at: https://docs-loja.usecorvex.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://docs-loja.usecorvex.com.br/cookbook/overview.md). Campos do objeto: [Blog](https://docs-loja.usecorvex.com.br/data/resources/blog.md). Menus e preview: [Menus e blog](https://docs-loja.usecorvex.com.br/data/menus-blog.md).

## 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`.

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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.

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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](https://docs-loja.usecorvex.com.br/reference/contracts/page.md)
* [Contexto de página](https://docs-loja.usecorvex.com.br/data/page-context.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.