Écrire votre premier article de blog en Markdown
Maintenant que vous avez créé des pages à l’aide de fichiers .astro
, il est temps de créer des articles de blog en utilisant des fichiers .md
!
Préparez-vous à…
- Créer un nouveau dossier et un nouvel article
- Écrire un contenu en Markdown
- Ajouter des liens vers vos articles de blog sur votre page Blog
Créer votre premier fichier .md
Titre de la section Créer votre premier fichier .md-
Créez un nouveau répertoire
src/pages/posts/
. -
Ajoutez un nouveau fichier (vide)
post-1.md
à l’intérieur de votre nouveau dossier/posts/
. -
Accédez à cette page dans l’aperçu de votre navigateur en ajoutant
/posts/post-1
à la fin de votre URL de prévisualisation existante. (par exemple,http://localhost:4321/posts/post-1
) -
Modifiez l’URL de prévisualisation du navigateur pour afficher
/posts/post-2
à la place. (C’est une page que vous n’avez pas encore créée.)Remarquez la différence d’affichage lors de la prévisualisation d’une page « vide » et d’une page qui n’existe pas. Cela vous aidera à résoudre des problèmes à l’avenir.
Rédiger du contenu en Markdown
Titre de la section Rédiger du contenu en Markdown-
Copiez ou saisissez le code suivant dans
post-1.md
src/pages/posts/post-1.md ---title: 'Mon premier article de blog'pubDate: 2022-07-01description: "Il s'agit du premier article de mon nouveau blog Astro."author: 'Apprenti 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"]---# Mon premier article de blogPublié le : 2022-07-01Bienvenue sur mon _nouveau blog_ dédié à l'apprentissage d'Astro ! Ici, je vais partager mon parcours d'apprentissage en créant un nouveau site web.## Ce que j'ai accompli1. **Installation d'Astro** : Tout d'abord, j'ai créé un nouveau projet Astro et configuré mes comptes en ligne.2. **Création de pages** : Ensuite, j'ai appris à créer des pages en créant de nouveaux fichiers `.astro` et en les plaçant dans le dossier `src/pages/`.3. **Création d'articles de blog** : C'est mon premier article de blog ! J'ai maintenant des pages Astro et des articles en Markdown !## Ce qui vient ensuiteJe vais terminer le tutoriel d'Astro, puis continuer à ajouter plus d'articles. Restez à l'écoute pour en savoir plus. -
Vérifiez à nouveau l’aperçu de votre navigateur à l’adresse
http://localhost:4321/posts/post-1
. Vous devriez maintenant voir le contenu de cette page. Il n’est peut-être pas encore correctement formaté, mais ne vous inquiétez pas, vous le mettrez à jour plus tard dans le tutoriel ! -
Utilisez les outils de développement de votre navigateur pour inspecter cette page. Notez que même si vous n’avez utilisé aucun élément HTML, votre Markdown a été converti en HTML. Vous pouvez voir des éléments tels que des titres, des paragraphes et des éléments de liste.
Les informations en haut du fichier, à l’intérieur des délimitateurs de code, sont appelées « frontmatter ». Ces données, y compris les étiquettes (« tags ») et l’image de l’article, sont des informations à propos de votre article qu’Astro peut utiliser. Elles n’apparaissent pas automatiquement sur la page, mais nous y accéderons plus tard dans le tutoriel pour améliorer votre site.
Ajouter des liens vers vos articles
Titre de la section Ajouter des liens vers vos articles-
Ajoutez un lien vers votre premier article avec une balise d’ancre dans
src/pages/blog.astro
:src/pages/blog.astro ------<html lang="fr"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width" /><title>Astro</title></head><body><a href="/">Accueil</a><a href="/about/">À propos</a><a href="/blog/">Blog</a><h1>Mon blog d'apprentissage d'Astro</h1><p>Voici où je vais publier mon parcours d'apprentissage d'Astro.</p><ul><li><a href="/posts/post-1/">Article 1</a></li></ul></body></html> -
Ajoutez maintenant deux autres fichiers dans
src/pages/posts/
:post-2.md
etpost-3.md
. Voici un exemple de code que vous pouvez copier-coller dans vos fichiers, ou vous pouvez créer le vôtre !src/pages/posts/post-2.md ---title: Mon deuxième article de blogauthor: Apprenti Astrodescription: "Après avoir appris Astro, je ne pouvais plus m'arrêter !"image:url: "https://docs.astro.build/assets/arc.webp"alt: "Le logo Astro sur un fond sombre avec un arc de cercle dégradé violet."pubDate: 2022-07-08tags: ["astro", "blogging", "apprentissage en public", "réussites"]---Après une première semaine réussie d'apprentissage d'Astro, j'ai décidé d'en faire un peu plus. J'ai écrit et importé un petit composant de mémoire !src/pages/posts/post-3.md ---title: Mon troisième article de blogauthor: Apprenti Astrodescription: "J'ai eu quelques défis, mais demander de l'aide à la communauté m'a vraiment aidé !"image:url: "https://docs.astro.build/assets/rays.webp"alt: "Le logo Astro sur un fond sombre avec un arc de cercle dégradé violet."pubDate: 2022-07-15tags: ["astro", "apprentissage en public", "obstacles", "communauté"]---Ce n'était pas toujours tout rose, mais j'adore créer avec Astro. Et, la [communauté Discord](https://astro.build/chat) est vraiment sympathique et serviable ! -
Ajoutez des liens vers ces nouveaux articles :
src/pages/blog.astro ------<html lang="fr"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width" /><title>Astro</title></head><body><a href="/">Accueil</a><a href="/about/">À propos</a><a href="/blog/">Blog</a><h1>Mon blog d'apprentissage d'Astro</h1><p>Voici où je vais publier mon parcours d'apprentissage d'Astro.</p><ul><li><a href="/posts/post-1/">Article 1</a></li><li><a href="/posts/post-2/">Article 2</a></li><li><a href="/posts/post-3/">Article 3</a></li></ul></body></html> -
Vérifiez l’aperçu de votre navigateur et assurez-vous que :
Tous vos liens vers Article 1, Article 2 et Article 3 conduisent à une page fonctionnelle sur votre site. (Si vous trouvez une erreur, vérifiez vos liens dans
blog.astro
ou les noms de vos fichiers Markdown.)
Tester vos connaissances
Titre de la section Tester vos connaissances- Le contenu d’un fichier Markdown (
.md
) est converti en :
Liste de contrôle
Titre de la section Liste de contrôleRessources
Titre de la section Ressources-
Aide-mémoire Markdown de The Markdown Guide (Anglais) externe
-
Qu’est-ce que les outils de développement du navigateur ? MDN externe
-
Front Matter YAML (Anglais) externe