As configurações do site guardam valores que se aplicam a todo o site. Templates podem usá-las para identidade do site, paginação, tratamento de datas, perfis sociais e metadados de busca.
Configurar as configurações
Abra Settings no admin do EmDash e escolha a página dos valores de que você precisa:
- General contém o título do site, o slogan, o logo, o favicon, a URL pública, posts por página, formato de data e fuso horário.
- Social contém handles de perfil dos serviços sociais suportados.
- SEO contém o separador de título, a imagem social padrão, valores de verificação e o conteúdo de
robots.txt.
-
Abra a página de configurações relevante.
-
Informe os valores usados pelos templates e metadados do site.
-
Salve a página e recarregue uma página pública que renderize essas configurações.
As configurações são opcionais até serem configuradas. Um template deve fornecer um fallback adequado para qualquer valor de que precise.
Ler configurações em um layout
Use getSiteSettings() quando um layout precisar de vários valores. Ele retorna as chaves configuradas como um objeto parcial e resolve referências de mídia antes de retorná-las.
O layout base a seguir usa configurações de identidade do site e deixa o EmDashHead aplicar o favicon configurado, a imagem social padrão e os metadados de verificação em todo o site:
---
import { getSiteSettings } from "emdash";
import { createPublicPageContext } from "emdash/page";
import { EmDashHead } from "emdash/ui";
interface Props {
title?: string;
description?: string;
}
const { title, description } = Astro.props;
const settings = await getSiteSettings();
const siteTitle = settings.title ?? "My site";
const fullTitle = title ? `${title} — ${siteTitle}` : siteTitle;
const pageDescription = description ?? settings.tagline;
const page = createPublicPageContext({
Astro,
kind: "custom",
pageType: "website",
title: fullTitle,
pageTitle: title ?? siteTitle,
description: pageDescription,
siteName: siteTitle,
});
---
<!doctype html>
<html lang={Astro.currentLocale ?? "en"}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{fullTitle}</title>
<EmDashHead page={page} />
</head>
<body>
<header>
<a href="/" aria-label={siteTitle}>
{settings.logo?.url ? (
<img
src={settings.logo.url}
alt={settings.logo.alt ?? siteTitle}
width={settings.logo.width}
height={settings.logo.height}
/>
) : (
siteTitle
)}
</a>
{settings.tagline && <p>{settings.tagline}</p>}
</header>
<main>
<slot />
</main>
</body>
</html>EmDashHead também chama getSiteSettings(). O cache da solicitação faz essa chamada reutilizar o resultado do layout em vez de executar outra consulta de configurações.
Em uma página de conteúdo renderizada no servidor, passe a referência de conteúdo para createPublicPageContext() e busque a entrada com getEmDashEntry(). O EmDashHead então aplica os valores do painel SEO da entrada sobre os padrões do site. Veja Renderizar dados do painel SEO para o padrão completo de página de conteúdo.
Ler uma configuração
Use getSiteSetting() quando um componente precisar de um valor e o pai ainda não tiver buscado o objeto de configurações.
O componente a seguir formata um carimbo de data/hora no fuso horário configurado:
---
import { getSiteSetting } from "emdash";
interface Props {
date: Date;
}
const { date } = Astro.props;
const timezone = await getSiteSetting("timezone") ?? "UTC";
const formatted = new Intl.DateTimeFormat(Astro.currentLocale, {
dateStyle: "long",
timeZone: timezone,
}).format(date);
---
<time datetime={date.toISOString()}>{formatted}</time>A configuração dateFormat é uma string de padrão como MMMM d, yyyy. Intl.DateTimeFormat não consome essa sintaxe; use uma biblioteca de formatação que suporte strings de padrão quando o template precisar aplicá-la exatamente.
Renderizar perfis sociais
As configurações sociais armazenam handles ou nomes de usuário em vez de links completos. O template decide quais perfis mostrar e transforma cada valor configurado na URL do serviço.
O componente a seguir renderiza os perfis X e GitHub configurados:
---
import { getSiteSetting } from "emdash";
const social = await getSiteSetting("social");
const xHandle = social?.twitter?.replace(/^@/, "");
---
{(xHandle || social?.github) && (
<nav aria-label="Social profiles">
<ul>
{xHandle && (
<li>
<a href={`https://x.com/${xHandle}`} rel="me noopener" target="_blank">
X
</a>
</li>
)}
{social?.github && (
<li>
<a
href={`https://github.com/${social.github}`}
rel="me noopener"
target="_blank"
>
GitHub
</a>
</li>
)}
</ul>
</nav>
)}Aplique o mesmo padrão aos valores configurados de Facebook, Instagram, LinkedIn e YouTube. Esses campos armazenam o valor de página, perfil, canal ou handle informado no admin; o tema continua responsável pelo formato da URL pública.
Usar configurações de mídia
O logo, o favicon e a imagem social padrão são armazenados como referências de mídia. Na leitura, o EmDash adiciona a URL atual e qualquer tipo de conteúdo, largura e altura conhecidos. Se o item de mídia referenciado foi excluído, esses valores resolvidos podem estar ausentes, então verifique url antes de renderizar uma imagem.
Remova uma dessas imagens no admin com o botão Remove. Clientes de API e MCP podem remover logo, favicon ou seo.defaultOgImage definindo esse campo como null; omitir um campo deixa o valor atual inalterado.
As configurações do site guardam um logo e um favicon. Uma variante de imagem escura pertence a um campo de imagem do EmDash, onde o editor pode escolher a contraparte e o componente Image pode alternar entre elas. Veja Modo escuro para esse padrão.
A referência da API de runtime documenta as chaves de configuração e os tipos de retorno das consultas. Para alterações programáticas, autentique com um token Bearer e adicione X-EmDash-Request: 1 a cada solicitação que altere o estado. Veja os endpoints de settings para corpos de solicitação e respostas.