Configurações do site

As configurações do site guardam valores que se aplicam ao site inteiro. Os templates podem usá-las para a identidade do site, a paginação, o tratamento de datas, os perfis sociais e os metadados de busca.

Configurar as configurações

Abra Settings no administrador do EmDash e escolha a página com os valores de que você precisa:

• General contém o título do site, o slogan, o logotipo, o favicon, a URL pública, os posts por página, o formato de data e o fuso horário. Altere a URL pública com Change domain; consulte Mudar para um novo domínio.
• Social contém os identificadores de perfil dos serviços sociais compatíveis.
• SEO contém o separador de título, a imagem social padrão, os valores de verificação e o conteúdo de robots.txt. Consulte Recursos de SEO integrados para saber o que cada um faz.

As configurações são opcionais até serem definidas. 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. Ela retorna as chaves configuradas como um objeto parcial e resolve as referências de mídia antes de retorná-las.

O layout base a seguir usa as 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 de 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>

O EmDashHead também chama getSiteSettings(). O cache de requisição faz com que essa chamada reutilize 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 do conteúdo para createPublicPageContext() e busque a entrada com getEmDashEntry(). O EmDashHead então aplica os valores do painel de SEO da entrada sobre os padrões do site. Consulte Renderizar os metadados de SEO em uma página de conteúdo para ver o padrão completo de uma página de conteúdo.

Ler uma configuração

Use getSiteSetting() quando um componente precisar de um único valor e o componente pai ainda não tiver buscado o objeto de configurações.

O componente a seguir formata um timestamp 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. O Intl.DateTimeFormat não interpreta essa sintaxe; use uma biblioteca de formatação que ofereça suporte a strings de padrão quando o template precisar aplicá-la exatamente.

Renderizar perfis sociais

As configurações sociais armazenam identificadores ou nomes de usuário em vez de links completos. O template decide quais perfis exibir e transforma cada valor configurado na URL do serviço.

O componente a seguir renderiza os perfis de 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 identificador digitado no administrador; o tema continua responsável pelo formato da URL pública.

Usar configurações de mídia

O logotipo, 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, quando conhecidos, o tipo de conteúdo, a largura e a altura. Se o item de mídia referenciado tiver sido excluído, esses valores resolvidos podem estar ausentes; por isso, verifique url antes de renderizar uma imagem.

Remova uma dessas imagens no administrador 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 mantém seu valor atual inalterado. O mesmo vale para os campos dentro de seo e social: envie apenas os campos que deseja alterar e envie uma string vazia para limpar um campo de texto.

As configurações do site guardam um logotipo e um favicon. Uma variante escura da imagem pertence a um campo de imagem do EmDash, em que o editor pode escolher a contrapartida e o componente Image pode alternar entre elas. Consulte Modo Escuro para ver 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-se com um token Bearer e adicione X-EmDash-Request: 1 a toda requisição que altere o estado. Consulte os endpoints de configurações para ver os corpos das requisições e as respostas.