Skip to content

Latest commit

 

History

History
184 lines (144 loc) · 7.44 KB

2.mdx

File metadata and controls

184 lines (144 loc) · 7.44 KB
Raw
type title description i18nReady
tutorial
Créer et transmettre des données à une mise en page de blog personnalisée
Tutoriel : Construisez votre premier blog Astro — Créez une mise en page de billet de blog pour vos fichiers Markdown et transmettez-y les valeurs du frontmatter en tant que props
true

import Box from '/components/tutorial/Box.astro'; import Checklist from '/components/Checklist.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

Maintenant que vous avez une mise en page pour vos pages, ajoutons une mise en page pour les billets de blog !

- Créez une nouvelle mise en page de billet de blog pour vos fichiers Markdown - Transmettez les valeurs YAML du frontmatter en tant que props au composant de mise en page

Ajoutez une mise en page à vos billets de blog

Lorsque vous incluez la propriété layout dans le frontmatter d'un fichier .md, toutes les valeurs YAML du frontmatter sont disponibles dans le fichier de mise en page.

1. Créez un nouveau fichier à l'emplacement `src/layouts/MarkdownPostLayout.astro`

  1. Copiez le code suivant dans MarkdownPostLayout.astro

    ---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Écrit par {frontmatter.author}</p>
<slot />

  2. Ajoutez la propriété frontmatter suivante dans post-1.md

    ---
layout: ../../layouts/MarkdownPostLayout.astro
title: 'Mon premier billet de blog'
pubDate: 2022-07-01
description: 'Ceci est le premier billet de mon nouveau blog Astro.'
author: 'Apprenant Astro'
image:
    url: 'https://docs.astro.build/assets/rose.webp' 
    alt: 'Le logo Astro sur un fond sombre avec une lueur rose.'
tags: ["astro", "blogging", "apprentissage en public"]
---

  3. Vérifiez à nouveau l'aperçu dans votre navigateur à l'adresse http://localhost:4321/posts/post-1 et observez ce que la mise en page ajoute à votre page.

  4. Ajoutez la même propriété de mise en page à vos deux autres billets de blog, post-2.md et post-3.md. Vérifiez dans votre navigateur que votre mise en page est également appliquée à ces billets.

:::tip Lors de l'utilisation de mises en page, vous avez désormais la possibilité d'inclure des éléments, tels qu'un titre de page, dans le contenu Markdown ou dans la mise en page. N'oubliez pas d'inspecter visuellement l'aperçu de votre page et d'apporter les ajustements nécessaires pour éviter les éléments en double. :::

Essayez par vous-même - Personnalisez la mise en page de votre billet de blog

Défi : Identifiez les éléments communs à chaque billet de blog et utilisez MarkdownPostLayout.astro pour les afficher, au lieu de les écrire dans votre Markdown dans post-1.md et dans tous les futurs billets de blog.

Voici un exemple de refonte de votre code pour inclure la pubDate dans le composant de mise en page au lieu de l'écrire dans le corps de votre Markdown :

Publié le : 2022-07-01

Bienvenue sur mon _nouveau blog_ sur l'apprentissage d'Astro ! Ici, je partagerai mon parcours d'apprentissage alors que je construis un nouveau site web.
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Publié le : {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Écrit par {frontmatter.author}</p>
<slot />

Réfactorisez autant que vous le jugez utile et ajoutez autant d'éléments à votre mise en page que vous le souhaitez, en vous souvenant que tout ce que vous ajoutez à votre mise en page représente une tâche de moins à effectuer dans chaque billet de blog !

Voici un exemple de mise en page refaçonnée qui ne laisse que le contenu du billet de blog individuel rendu par le slot. N'hésitez pas à l'utiliser ou à créer le vôtre !

---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Écrit par : {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />

:::note[Évitez la duplication] Tout ce qui est rendu par votre mise en page n'a pas besoin d'être saisi dans votre billet de blog ! Si vous remarquez une duplication lorsque vous vérifiez l'aperçu dans votre navigateur, assurez-vous de supprimer le contenu de votre fichier Markdown. :::

Testez vos connaissances

Pouvez-vous trouver ce qui doit aller dans les blancs pour que les deux composants suivants produisent ensemble un code Astro fonctionnel ?

  1. ---
layout: ../../__________/MyMarkdownLayout.astro
title: "Découverte de Markdown dans Astro"
author: Apprenant Astro
____: 2022-08-08
---
J'ai tellement appris aujourd'hui ! Astro me permet d'écrire en Markdown, mais aussi d'utiliser des variables du frontmatter. Je peux même accéder à ces valeurs dans un composant de mise en page Astro.
  2. ---
import ____________ from '../components/Footer.astro'
const { ___________ } = Astro.props
---
<h1>{frontmatter.title}</h1>
<p>Écrit par : {frontmatter.______} le {frontmatter.pubDate}</p>
< _______ />
<Footer />
    Afficher les espaces réservés remplis ! 
    1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "pubDate"
    ---
    layout: ../../layouts/MyMarkdownLayout.astro
    title: "Découverte de Markdown dans Astro"
    author: Apprenant Astro
    pubDate: 2022-08-08
    ---
    J'ai tellement appris aujourd'hui ! Astro me permet d'écrire en Markdown, mais aussi d'utiliser des variables du frontmatter. Je peux même accéder à ces valeurs dans un composant de mise en page Astro.
    ```

2.  ```astro title="src/layouts/MyMarkdownLayout.astro" " Footer " " frontmatter " "author" "slot"
    ---
    import Footer from '../components/Footer.astro'
    const { frontmatter } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Écrit par : {frontmatter.author} le {frontmatter.pubDate}</p>
    <slot />
    <Footer />
    ```

Liste de vérification

- [ ] Je peux ajouter une propriété de mise en page à un billet de blog Markdown dans son frontmatter YAML. - [ ] Je peux créer une mise en page distincte pour les billets de blog Markdown. - [ ] Je peux utiliser les valeurs du frontmatter d'un billet de blog dans un composant de mise en page.

Ressources