Impostazioni del sito

Le impostazioni del sito contengono valori che si applicano a tutto il sito. I template possono usarle per l’identità del sito, la paginazione, la gestione delle date, i profili social e i metadati di ricerca.

Configurare le impostazioni

Apri Settings nell’admin EmDash, poi scegli la pagina dei valori di cui hai bisogno:

General contiene il titolo del sito, lo slogan, il logo, la favicon, l’URL pubblico, i post per pagina, il formato data e il fuso orario.
Social contiene gli handle di profilo dei servizi social supportati.
SEO contiene il separatore del titolo, l’immagine social predefinita, i valori di verifica e il contenuto di robots.txt.

Apri la pagina delle impostazioni pertinente.
Inserisci i valori usati dai template e dai metadati del sito.
Salva la pagina, poi ricarica una pagina pubblica che renderizza quelle impostazioni.

Le impostazioni sono facoltative finché non sono configurate. Un template deve fornire un fallback adeguato per qualsiasi valore di cui ha bisogno.

Leggere le impostazioni in un layout

Usa getSiteSettings() quando un layout ha bisogno di più valori. Restituisce le chiavi configurate come oggetto parziale e risolve i riferimenti media prima di restituirli.

Il seguente layout di base usa le impostazioni di identità del sito e lascia che EmDashHead applichi la favicon configurata, l’immagine social predefinita e i metadati di verifica a livello di sito:

---
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 chiama anche getSiteSettings(). La cache della richiesta fa sì che quella chiamata riusi il risultato del layout invece di eseguire un’altra query di impostazioni.

Su una pagina di contenuto renderizzata lato server, passa il riferimento al contenuto a createPublicPageContext() e recupera la voce con getEmDashEntry(). EmDashHead applica quindi i valori del pannello SEO della voce sopra i valori predefiniti del sito. Vedi Renderizzare i dati del pannello SEO per il pattern completo della pagina di contenuto.

Leggere un’impostazione

Usa getSiteSetting() quando un componente ha bisogno di un valore e il genitore non ha già recuperato l’oggetto impostazioni.

Il componente seguente formatta un timestamp nel fuso orario configurato:

---
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>

L’impostazione dateFormat è una stringa di pattern come MMMM d, yyyy. Intl.DateTimeFormat non consuma quella sintassi; usa una libreria di formattazione che supporti le stringhe di pattern quando il template deve applicarla esattamente.

Le impostazioni social memorizzano handle o nomi utente piuttosto che link completi. Il template decide quali profili mostrare e trasforma ogni valore configurato nell’URL del servizio.

Il componente seguente renderizza i profili X e GitHub configurati:

---
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>
)}

Applica lo stesso pattern ai valori configurati di Facebook, Instagram, LinkedIn e YouTube. Quei campi memorizzano il valore di pagina, profilo, canale o handle inserito nell’admin; il tema resta responsabile del formato dell’URL pubblico.

Usare le impostazioni media

Il logo, la favicon e l’immagine social predefinita sono memorizzati come riferimenti media. In lettura, EmDash aggiunge l’URL corrente e qualsiasi tipo di contenuto, larghezza e altezza noti. Se l’elemento media referenziato è stato eliminato, quei valori risolti possono essere assenti, quindi controlla url prima di renderizzare un’immagine.

Rimuovi una di queste immagini nell’admin con il relativo pulsante Remove. I client API e MCP possono rimuovere logo, favicon o seo.defaultOgImage impostando quel campo a null; omettere un campo lascia invariato il suo valore corrente.

Le impostazioni del sito contengono un logo e una favicon. Una variante di immagine scura appartiene a un campo immagine EmDash, dove l’editor può scegliere la controparte e il componente Image può passare dall’una all’altra. Vedi Modalità scura per quel pattern.

Il riferimento dell’API runtime documenta le chiavi di impostazione e i tipi di ritorno delle query. Per modifiche programmatiche, autentica con un token Bearer e aggiungi X-EmDash-Request: 1 a ogni richiesta che modifica lo stato. Vedi gli endpoint settings per i corpi di richiesta e le risposte.

Configurare le impostazioni

Leggere le impostazioni in un layout

Leggere un’impostazione

Renderizzare i profili social

Usare le impostazioni media