E EmDash CMS Everything Guides, use cases, plugins, templates
Français

Paramètres du site

Sur cette page

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

Configurer les paramètres

Ouvrez Settings dans l’admin EmDash, puis choisissez la page des valeurs dont vous avez besoin :

  • General contient le titre du site, le slogan, le logo, le favicon, l’URL publique, les articles par page, le format de date et le fuseau horaire.
  • 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.

  1. Ouvrez la page de paramètres concernée.

  2. Saisissez les valeurs utilisées par les modèles et les métadonnées du site.

  3. Enregistrez la page, puis rechargez une page publique qui affiche ces paramètres.

Les paramètres sont optionnels jusqu’à leur configuration. Un modèle doit fournir une valeur de repli adaptée pour toute 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 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 à l’échelle du 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(). Le cache de requête fait réutiliser à cet appel le résultat de la mise en page plutôt que d’exécuter une autre requête de paramètres.

Sur une page de contenu rendue côté serveur, passez la référence de 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 défauts du site. Voir Afficher les données du panneau SEO pour le modèle complet de page de contenu.

Lire un paramètre

Utilisez getSiteSetting() lorsqu’un composant a besoin d’une valeur et que son parent n’a pas déjà 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 telle que MMMM d, yyyy. Intl.DateTimeFormat ne consomme 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 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 Facebook, Instagram, LinkedIn et YouTube configurées. Ces champs stockent la valeur de page, de profil, de chaîne ou d’identifiant saisie dans l’admin ; le thème reste responsable du format d’URL publique.

Utiliser les paramètres médias

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

Retirez l’une de ces images dans l’admin avec son bouton Remove. Les clients API et MCP peuvent retirer logo, favicon ou seo.defaultOgImage en définissant ce champ à null ; omettre un champ laisse sa valeur actuelle inchangée.

Les paramètres du site contiennent un logo et un favicon. Une variante d’image sombre appartient à un champ image EmDash, où l’éditeur peut choisir la contrepartie et le composant Image peut basculer entre elles. Voir Mode sombre pour ce modèle.

La référence de l’API runtime documente les clés de paramètres et les types de retour des requêtes. Pour des changements programmatiques, authentifiez-vous avec un jeton Bearer et ajoutez X-EmDash-Request: 1 à chaque requête modifiant l’état. Voir les endpoints settings pour les corps de requête et les réponses.