Composants éditoriaux
Exemples des composants et styles typographiques disponibles dans ce thème.
Onglets
Deux groupes indépendants sont présentés ci-dessous. Les flèches du clavier permettent de passer d’un onglet à l’autre.
Run npm create astro@latest and follow the prompts.
Set site in astro.config.mjs for canonical URLs and RSS.
Push to your Git provider and enable the static build command.
npm run build outputs the static site to dist/.
pnpm build outputs the static site to dist/.
Accordéon
Les éléments d’un même group s’ouvrent exclusivement : en ouvrir un ferme les autres. Le premier est ouvert grâce à expanded=true.
Qu’est-ce qui est inclus ?
Chaque composant présenté sur cette page est fourni avec le thème et fonctionne directement dans les contenus MDX.
Puis-je ajouter le mien ?
Ajoutez un composant Astro dans src/layouts/components/widgets/, puis déclarez-le dans MarkdownComponents.astro.
Les composants exigent-ils JavaScript ?
Uniquement les composants interactifs. Les autres utilisent seulement du balisage HTML.
Notices
Info
Une notice d’information apporte un contexte neutre ou une définition.
Succès
Une notice de succès confirme une étape terminée ou une bonne pratique.
Attention
Une notice d’attention signale les erreurs fréquentes et les précautions de version.
Erreur
Une notice d’erreur indique les actions obsolètes ou à éviter.
Liste de contrôle
- Collections de contenus Markdown et MDX
- Pages de rubriques, étiquettes, auteurs et séries
- Recherche, flux RSS et données structurées JSON-LD
- Mode clair stable dès le chargement
Boutons
YouTube embed
La vidéo ne charge rien depuis YouTube avant l’activation de la lecture. La première commence à 30 secondes grâce au paramètre t de son URL.
Navigation dans une série
Le nom et la position suffisent. currentSlug reprend par défaut le chemin de la page courante.
Astro Get Started
Partie 2 sur 1
Typographie
Titre de niveau trois
Titre de niveau quatre
Corps de texte avec du code en ligne, un lien, du graset de l’emphase. Les styles conservent une lecture confortable.
Une citation se distingue clairement du texte qui l’entoure.
- Un élément de liste non ordonnée
- Un autre élément avec un contenu imbriqué
- Un élément de liste ordonnée
- Un autre élément ordonné
| Composant | JavaScript |
|---|---|
| Tabs, Accordion, YouTubeEmbed | Petit script intégré |
| Notice, ListCheck, Button | Aucun |
export default {
// Code blocks get syntax highlighting from Shiki.
trailingSlash: "ignore",
};