--- title: Páginas Personalizadas description: >- Monte rotas .astro totalmente personalizadas ao lado da sua documentação e leia a configuração, a navegação e o conteúdo do seu site a partir do módulo blume:data. --- A maior parte de um site Blume é Markdown, mas às vezes você precisa de uma rota que _não seja_ um documento — uma landing page, uma página de preços, um índice de blog ou changelog construído à mão, ou um painel interativo. Coloque um arquivo `.astro` dentro da sua pasta **pages** e o Blume o monta como uma rota real, bem ao lado do seu conteúdo. ## Adicionar uma página [#add-a-page] Crie uma pasta `pages/` na raiz do seu projeto e adicione um arquivo `.astro`: ```astro pages/pricing.astro lineNumbers --- import data from "blume:data"; ---

Pricing for {data.config.title}

``` O `blume dev` a detecta imediatamente e o `blume build` a pré-renderiza como HTML estático. O nome da pasta é configurável com [`content.pages`](/docs/configuration#content) (padrão `"pages"`). As páginas personalizadas mantêm sua localização original em disco, então importações relativas, importações de componentes e [`getStaticPaths`](https://docs.astro.build/en/reference/routing-reference/#getstaticpaths) funcionam exatamente como funcionariam em um projeto Astro comum — o Blume monta cada arquivo onde ele está, em vez de copiá-lo. ## Arquivos e rotas [#files-and-routes] O caminho de cada arquivo dentro da pasta pages se torna a sua rota. `index` corresponde à pasta pai, e segmentos dinâmicos `[param]` são preservados: | Arquivo | Rota | | ------------------------- | ------------- | | `pages/pricing.astro` | `/pricing` | | `pages/blog/index.astro` | `/blog` | | `pages/blog/[slug].astro` | `/blog/:slug` | | `pages/changelog.astro` | `/changelog` | Uma página personalizada **prevalece** sobre uma rota gerada no mesmo caminho. Adicionar `pages/changelog.astro`, por exemplo, substitui a [linha do tempo de changelog gerada](/docs/advanced/changelog) pelo Blume pela sua própria. ## Lendo dados do site [#reading-site-data] Importe `blume:data` para ler a mesma configuração resolvida, navegação, rotas e feeds que o restante do site usa: ```astro pages/all-pages.astro lineNumbers --- import data from "blume:data"; ---

All pages

``` Dentro de um projeto Blume, o módulo é tipado automaticamente. Você também pode trazer o formato explicitamente — para helpers tipados, props ou seu próprio tsconfig — com `import type { BlumeData } from "blume"`: ```ts import type { BlumeData, BlumeRoute } from "blume"; const indexable = (data: BlumeData): BlumeRoute[] => data.routes.filter((route) => route.indexable); ``` O módulo expõe: | Prop | Type | Default | Description | | - | - | - | - | | `config` | `BlumeDataConfig` | - | Configurações resolvidas do site: title, description, logo, favicon, appleIcon, banner, theme, site, repoUrl, github (owner, repo, host e a base da api REST — null quando não definido), search, i18n, mcp, ask, og, analytics, feedback, structuredData, toc, codeThemes, codeWrap e imageZoom. | | `navigation` | `Navigation` | - | A barra lateral, as abas e os seletores inferidos do seu conteúdo (idioma padrão). | | `navigationByLocale` | `Record` | - | Árvores de navegação por idioma, indexadas pelo código do idioma. Vazio a menos que o i18n esteja configurado. | | `routes` | `BlumeRoute[]` | - | Todas as páginas de conteúdo: { id, path, title, locale, indexable, hidden, draft, fallback, editUrl, lastModified, alternates, collection, entryId }. | | `feeds` | `BlumeFeed[]` | - | Feeds RSS gerados: { href, title }. | | `fontCssVars` | `string[]` | - | Nomes das variáveis CSS para as fontes configuradas (integração do Astro). | | `ui` | `UIStrings` | - | Textos resolvidos da interface para o idioma padrão (rótulos de busca, barra lateral e rodapé). | | `uiByLocale` | `Record` | - | Textos da interface por idioma, indexados pelo código do idioma. Vazio a menos que o i18n esteja configurado. | `routes` carrega metadados da página, mas não o frontmatter como `type` ou `date`. Para construir uma lista filtrada por tipo de conteúdo — um índice de blog ou changelog — combine-a com a coleção de conteúdo `docs` do Astro, que contém o frontmatter: ```astro pages/blog/index.astro lineNumbers --- import { getCollection } from "astro:content"; import data from "blume:data"; // Each route's id matches its collection entry id. const routeById = new Map(data.routes.map((route) => [route.id, route.path])); const posts = (await getCollection("docs")) .filter((entry) => entry.data.type === "blog" && !entry.data.draft) .map((entry) => ({ description: entry.data.description, href: routeById.get(entry.id), title: entry.data.title, })); ---
    { posts.map((post) => (
  • {post.title}

    {post.description}

    • )) }
``` ## Helpers de runtime [#runtime-helpers] O `blume/runtime` agrupa os padrões de dados mais comuns para que você não precise mexer nos detalhes internos do `blume:data`. **`getBlumeCollection(data, query?)`** seleciona rotas de conteúdo — filtradas por coleção, idioma ou prefixo de caminho, com rascunhos e páginas ocultas excluídos e o resultado ordenado por caminho — que é exatamente o que um índice personalizado precisa: ```astro pages/blog/index.astro lineNumbers --- import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const posts = getBlumeCollection(data, { prefix: "/blog" }); --- ``` **``** renderiza o corpo de uma entrada de conteúdo dentro de uma página personalizada, com os componentes MDX integrados do Blume (callouts, cards, steps…) já conectados — para destacar um documento em uma landing page ou construir um índice sob medida que mostre conteúdo real: ```astro pages/index.astro lineNumbers --- import BlumePage from "blume/components/BlumePage.astro"; import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const [intro] = getBlumeCollection(data, { prefix: "/docs" }); --- {intro && } ``` Passe `components` para adicionar suas próprias substituições ou ilhas (que ficam no runtime gerado e não são importadas por padrão), e `collection` para ler de uma coleção diferente de `"docs"`. ## Usando o layout do site [#using-the-site-layout] O `RootLayout` dá a uma página personalizada toda a estrutura da documentação — cabeçalho, barra lateral, busca, índice e tema — envolvendo-a na mesma grade de 3 colunas que as páginas geradas usam. Para uma landing page ou página de marketing, essa grade atrapalha, então recorra ao **`PageLayout`**: ele fornece a estrutura do documento, o cabeçalho, o tema e as fontes, e depois um único `` de largura total (sem barra lateral, sem prosa, sem índice). Um slot opcional `footer` é renderizado após o `
`: ```astro pages/index.astro lineNumbers --- import PageLayout from "blume/components/layout/PageLayout.astro"; import data from "blume:data"; import Footer from "./_home/Footer.astro"; const { config } = data; ---

Build docs that fly