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

Paramètres du Site

Sur cette page

Les paramètres du site sont des valeurs de configuration globales pour votre site : titre, slogan, logo, liens sociaux et préférences d’affichage. Les administrateurs gèrent ces paramètres via l’interface d’administration, et vous y accédez dans vos modèles.

Interroger les Paramètres

Utilisez getSiteSettings() pour récupérer tous les paramètres du site :

---
import { getSiteSettings } from "emdash";

const settings = await getSiteSettings();
---

<html lang="en">
  <head>
    <title>{settings.title}</title>
    {settings.favicon && (
      <link rel="icon" href={settings.favicon.url} />
    )}
  </head>
  <body>
    <header>
      {settings.logo ? (
        <img src={settings.logo.url} alt={settings.logo.alt || settings.title} />
      ) : (
        <span class="site-title">{settings.title}</span>
      )}
      {settings.tagline && <p class="tagline">{settings.tagline}</p>}
    </header>
    <slot />
  </body>
</html>

Paramètres Disponibles

EmDash fournit ces paramètres principaux :

interface SiteSettings {
	// Identité
	title: string;
	tagline?: string;
	logo?: MediaReference;
	favicon?: MediaReference;

	// URLs
	url?: string;

	// Affichage
	postsPerPage: number;
	dateFormat: string;
	timezone: string;

	// Réseaux Sociaux
	social?: {
		twitter?: string;
		github?: string;
		facebook?: string;
		instagram?: string;
		linkedin?: string;
		youtube?: string;
	};
}

interface MediaReference {
	mediaId: string;
	alt?: string;
	url?: string; // URL résolue (lecture seule)
}

Récupérer des Paramètres Individuels

Utilisez getSiteSetting() pour récupérer un paramètre individuel par clé :

import { getSiteSetting } from "emdash";

const title = await getSiteSetting("title");
// Retourne : "Mon Site" ou undefined

const logo = await getSiteSetting("logo");
// Retourne : { mediaId: "...", url: "/_emdash/api/media/file/..." }

Ceci est utile lorsque vous avez besoin d’une ou deux valeurs seulement et souhaitez éviter de tout récupérer.

Utiliser les Paramètres dans les Composants

En-tête du Site

Le composant suivant affiche un en-tête avec le logo du site et le menu principal :

---
import { getSiteSettings, getMenu } from "emdash";

const settings = await getSiteSettings();
const menu = await getMenu("primary");
---

<header class="header">
  <a href="/" class="logo">
    {settings.logo ? (
      <img
        src={settings.logo.url}
        alt={settings.logo.alt || settings.title}
        width="150"
        height="50"
      />
    ) : (
      <span class="site-name">{settings.title}</span>
    )}
  </a>

  {menu && (
    <nav>
      {menu.items.map(item => (
        <a href={item.url}>{item.label}</a>
      ))}
    </nav>
  )}
</header>

Liens Sociaux

Le composant suivant affiche des liens pour chaque plateforme sociale configurée :

---
import { getSiteSetting } from "emdash";

const social = await getSiteSetting("social");

const platforms = [
  { key: "twitter", label: "Twitter", baseUrl: "https://twitter.com/" },
  { key: "github", label: "GitHub", baseUrl: "https://github.com/" },
  { key: "facebook", label: "Facebook", baseUrl: "https://facebook.com/" },
  { key: "instagram", label: "Instagram", baseUrl: "https://instagram.com/" },
  { key: "linkedin", label: "LinkedIn", baseUrl: "https://linkedin.com/in/" },
  { key: "youtube", label: "YouTube", baseUrl: "https://youtube.com/@" },
] as const;
---

{social && (
  <div class="social-links">
    {platforms.map(({ key, label, baseUrl }) => (
      social[key] && (
        <a
          href={baseUrl + social[key]}
          rel="noopener noreferrer"
          target="_blank"
          aria-label={label}
        >
          {label}
        </a>
      )
    ))}
  </div>
)}

Balises Meta SEO

Le composant suivant crée des balises meta de document et Open Graph à partir des paramètres du site :

---
import { getSiteSettings } from "emdash";

interface Props {
  title?: string;
  description?: string;
  image?: string;
}

const settings = await getSiteSettings();
const {
  title,
  description = settings.tagline,
  image,
} = Astro.props;

const documentTitle = title
  ? `${title} | ${settings.title}`
  : settings.title;
const ogTitle = title ?? settings.title;
---

<title>{documentTitle}</title>
{description && <meta name="description" content={description} />}

<!-- Open Graph -->
<meta property="og:title" content={ogTitle} />
{description && <meta property="og:description" content={description} />}
{image && <meta property="og:image" content={image} />}
{settings.url && <meta property="og:url" content={settings.url + Astro.url.pathname} />}

<!-- Twitter -->
{settings.social?.twitter && (
  <meta name="twitter:site" content={settings.social.twitter} />
)}
<meta name="twitter:card" content={image ? "summary_large_image" : "summary"} />

Formatage des Dates

Utilisez les paramètres dateFormat et timezone pour un affichage cohérent des dates :

---
import { getSiteSetting } from "emdash";

interface Props {
  date: string;
}

const { date } = Astro.props;
const dateFormat = await getSiteSetting("dateFormat") || "MMMM d, yyyy";
const timezone = await getSiteSetting("timezone") || "UTC";

// Formater avec Intl.DateTimeFormat ou une bibliothèque comme date-fns
const formatted = new Intl.DateTimeFormat("en-US", {
  timeZone: timezone,
  dateStyle: "long",
}).format(new Date(date));
---

<time datetime={date}>{formatted}</time>

API d’Administration

Récupérez les paramètres par programmation avec une requête GET :

GET /_emdash/api/settings

La réponse est un objet JSON contenant les paramètres :

{
	"title": "Mon Site EmDash",
	"tagline": "Un CMS moderne",
	"logo": {
		"mediaId": "med_123",
		"url": "/_emdash/api/media/file/abc123"
	},
	"postsPerPage": 10,
	"dateFormat": "MMMM d, yyyy",
	"timezone": "America/New_York",
	"social": {
		"twitter": "@handle",
		"github": "username"
	}
}

Mettre à jour les paramètres (les mises à jour partielles sont prises en charge) :

POST /_emdash/api/settings
Content-Type: application/json

{
  "title": "Nouveau Titre du Site",
  "tagline": "Slogan mis à jour"
}

Seuls les champs fournis sont modifiés. Les champs omis conservent leurs valeurs actuelles.

Références Médias

Les paramètres logo et favicon stockent des références médias. Lorsque vous les lisez, EmDash résout automatiquement la propriété url :

const logo = await getSiteSetting("logo");
// {
//   mediaId: "med_123",
//   alt: "Logo du site",
//   url: "/_emdash/api/media/file/abc123"
// }

Lors de la mise à jour via l’API, fournissez uniquement le mediaId :

{
	"logo": {
		"mediaId": "med_456",
		"alt": "Nouveau logo"
	}
}

Référence de l’API

getSiteSettings()

Récupère tous les paramètres du site avec les URLs médias résolues.

Retourne : Promise<Partial<SiteSettings>>

Retourne un objet partiel. Les valeurs non définies sont undefined.

getSiteSetting(key)

Récupère un paramètre individuel par clé.

Paramètres :

  • key — La clé du paramètre (par exemple, "title", "logo", "social")

Retourne : Promise<SiteSettings[K] | undefined>

Typé de manière sûre : le type de retour correspond à la clé que vous demandez.