Paramètres du site

Les paramètres du site contiennent des valeurs qui s’appliquent à l’ensemble du site. Les modèles peuvent les utiliser pour l’identité du site, la pagination, la gestion des dates, les profils sociaux et les métadonnées de recherche.

Configurer les paramètres

Ouvrez Settings dans l’administration EmDash, puis choisissez la page contenant les valeurs dont vous avez besoin :

• General contient le titre du site, le slogan, le logo, le favicon, l’URL publique, le nombre d’articles par page, le format de date et le fuseau horaire. Modifiez l’URL publique avec Change domain ; consultez Passer à un nouveau domaine.
• Social contient les identifiants de profil des services sociaux pris en charge.
• SEO contient le séparateur de titre, l’image sociale par défaut, les valeurs de vérification et le contenu de robots.txt. Consultez Fonctionnalités SEO intégrées pour savoir à quoi sert chacun d’eux.

Les paramètres sont facultatifs tant qu’ils ne sont pas configurés. Un modèle doit prévoir une valeur de repli adaptée pour chaque valeur dont il a besoin.

Lire les paramètres dans une mise en page

Utilisez getSiteSettings() lorsqu’une mise en page a besoin de plusieurs valeurs. Elle renvoie les clés configurées sous forme d’objet partiel et résout les références de médias avant de les renvoyer.

La mise en page de base suivante utilise les paramètres d’identité du site et laisse EmDashHead appliquer le favicon configuré, l’image sociale par défaut et les métadonnées de vérification valables pour tout le 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 appelle aussi getSiteSettings(). Grâce au cache de requête, cet appel réutilise le résultat de la mise en page au lieu d’exécuter une autre requête de paramètres.

Sur une page de contenu rendue côté serveur, transmettez la référence du contenu à createPublicPageContext() et récupérez l’entrée avec getEmDashEntry(). EmDashHead applique alors les valeurs du panneau SEO de l’entrée par-dessus les valeurs par défaut du site. Consultez Afficher les métadonnées SEO sur une page de contenu pour le modèle complet d’une page de contenu.

Lire un paramètre

Utilisez getSiteSetting() lorsqu’un composant n’a besoin que d’une valeur et que son parent n’a pas encore récupéré l’objet de paramètres.

Le composant suivant formate un horodatage dans le fuseau horaire configuré :

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

Le paramètre dateFormat est une chaîne de motif comme MMMM d, yyyy. Intl.DateTimeFormat n’interprète pas cette syntaxe ; utilisez une bibliothèque de formatage qui prend en charge les chaînes de motif lorsque le modèle doit l’appliquer exactement.

Afficher les profils sociaux

Les paramètres sociaux stockent des identifiants ou des noms d’utilisateur plutôt que des liens complets. Le modèle décide quels profils afficher et transforme chaque valeur configurée en l’URL du service.

Le composant suivant affiche les profils X et GitHub configurés :

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

Appliquez le même modèle aux valeurs configurées pour Facebook, Instagram, LinkedIn et YouTube. Ces champs stockent la valeur de page, de profil, de chaîne ou d’identifiant saisie dans l’administration ; le thème reste responsable du format de l’URL publique.

Utiliser les paramètres médias

Le logo, le favicon et l’image sociale par défaut sont stockés sous forme de références de médias. À la lecture, EmDash ajoute l’URL actuelle ainsi que, lorsqu’ils sont connus, le type de contenu, la largeur et la hauteur. Si le média référencé a été supprimé, ces valeurs résolues peuvent être absentes ; vérifiez donc url avant d’afficher une image.

Supprimez l’une de ces images dans l’administration avec son bouton Remove. Les clients API et MCP peuvent supprimer logo, favicon ou seo.defaultOgImage en définissant ce champ sur null ; omettre un champ laisse sa valeur actuelle inchangée. Il en va de même pour les champs de seo et social : envoyez uniquement les champs que vous souhaitez modifier, et envoyez une chaîne vide pour effacer un champ texte.

Les paramètres du site contiennent un logo et un favicon. Une variante sombre d’une image relève d’un champ image EmDash, où l’éditeur peut choisir la contrepartie et où le composant Image peut basculer entre les deux. Consultez Mode Sombre pour ce modèle.

La référence de l’API d’exécution documente les clés de paramètres et les types de retour des requêtes. Pour des modifications par programmation, authentifiez-vous avec un jeton Bearer et ajoutez X-EmDash-Request: 1 à chaque requête qui modifie l’état. Consultez les endpoints de paramètres pour les corps de requête et les réponses.