Écrivez votre premier article de blog en Markdown
Maintenant que vous avez créé des pages à l’aide de fichiers .astro
, créons quelques articles de blog en utilisant des fichiers .md
!
Préparez-vous à…
- Créez un nouveau dossier et créez un nouvel article
- Écrivez un contenu en Markdown
- Ajoutez des liens vers vos articles de blog sur votre page de blog
Créez votre premier fichier .md
Titre de la section Créez 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/
. -
Recherchez cette page dans la prévisualisation 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 de sortie 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édigez le contenu en Markdown
Titre de la section Rédigez le contenu en Markdown-
Copiez ou saisissez le code suivant dans
post-1.md
-
Vérifiez à nouveau la prévisualisation de votre navigateur à l’adresse
http://localhost:4321/posts/post-1
. Vous devriez maintenant voir du contenu sur cette page. -
Utilisez les outils de développement de votre navigateur pour inspecter cette page. Remarquez que bien que vous n’ayez pas tapé d’éléments 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 barres de code, sont appelées “frontmatter”. Ces données, y compris les tags et une image d’article, sont des informations sur 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.
Ajoutez des liens vers vos articles
Titre de la section Ajoutez des liens vers vos articles-
Ajoutez un lien vers votre premier article avec une balise d’ancre dans
src/pages/blog.astro
: -
Ajoutez maintenant deux autres fichiers dans
src/pages/posts/
:post-2.md
etpost-3.md
. Voici un code d’exemple que vous pouvez copier-coller dans vos fichiers, ou vous pouvez créer les vôtres ! -
Ajoutez des liens vers ces nouveaux articles :
-
Vérifiez votre prévisualisation dans le 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 sur
blog.astro
ou les noms de vos fichiers Markdown.)
Testez vos connaissances
Titre de la section Testez vos connaissances- Le contenu d’un fichier Markdown (
.md
) est converti en :