É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
Section intitulée « 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
Section intitulée « 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élimiteurs 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
Section intitulée « 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
Section intitulée « Tester vos connaissances »- Le contenu d’un fichier Markdown (
.md
) est converti en :
Liste de contrôle
Section intitulée « Liste de contrôle »Ressources
Section intitulée « 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