Avoir un blog pour écrire et partager nos connaissances sur internet est essentiel pour être visible et nous faire connaître dans notre domaine comme une autorité sur un sujet. Cet article vous apprendra comment créer un blog avec des pages dynamiques pour chaque article. Table des matières Conditions préalables Commencer Qu'est-ce que Nuxt ? Qu'est-ce que le contenu Nuxt ? Qu'est-ce que Cloudinary ? Créer un blog avec Nuxt Création des notes de blog Récupérer les messages Création de pages dynamiques Dernières pensées Apprendre encore plus Pour suivre, consultez la base de code et son référentiel sur et la pour référence. GitHub démo Conditions préalables Les éléments suivants sont requis pour terminer ce didacticiel : Compte Cloudinaire. est gratuite L'inscription Connaissance de base de JavaScript Connaissance de Vue Commencer Pour commencer, ouvrez le terminal et exécutez la commande : npx create-nuxt-app blog-for-developers La commande ci-dessus lancera une invite d'interface de ligne de commande (CLI) qui nous permettra de configurer divers aspects de notre projet. Maintenant que le passe-partout est configuré avec tous les fichiers et dossiers, lançons le serveur de développement qui est accessible sur à l'intérieur du projet. http://localhost:3000 # change directory to project folder cd blog-for-developers # start the development environment npm run dev NuxtJS est un framework Vue intuitif open source qui nous permet de créer des interfaces utilisateur, rendant le développement Web simple et puissant. Qu'est-ce que Nuxt ? Lors de la configuration initiale de ce projet, nous avons sélectionné le module de contenu Nuxt. Ce module nous permet d'utiliser notre base de code comme un CMS sans tête basé sur Git pour accéder aux fichiers Markdown, JSON, YAML, XML et même CSV via une interface de type API. Avec ce module , il injectera le instance globalement dans notre projet pour y accéder n'importe où dans un projet. Qu'est-ce que le contenu Nuxt ? @nuxt/content $content Cloudinary est un outil de gestion d'images et de vidéos de service cloud pour les applications Web et mobiles. Avec Cloudinary, nous pouvons télécharger, créer et gérer des expériences numériques sur n'importe quel navigateur et appareil. Qu'est-ce que Cloudinary ? Créer un blog avec Nuxt Avant de créer le contenu du blog dans Markdown à l'aide du contenu Nuxt, créons d'abord la page de destination du blog qui inclura les liens de navigation et du texte. Dans le , nous pouvons ajouter notre police préférée à la section d'en-tête et utiliser une famille de polices particulière comme indiqué ci-dessous : Ajouter un style de police nuxt.config.js file Le bloc de code ci-dessus n'aura aucun effet sur la page jusqu'à ce que nous écrivions le CSS qui utilisera la police. Maintenant, ajoutez le code suivant au qui comprendra les liens de navigation et du texte sur la page d'accueil. Retirer le composant, . pages/index.vue <Tutorial /> <template> <section class =" showcase "> < header > < h2 class =" logo "> < nuxt - link to ="/"> ecosurf </ nuxt - link > </ h2 > < nav class =" nav desktop "> < ul > < li class =" nav__list "> < nuxt - link to ="/ blogs "> Stories </ nuxt - link > </ li > </ ul > </ nav > </ header > < video autoplay loop muted src =" https: // res . cloudinary . com / terieyenike / video / upload / v1651393236 / mixkit - tropical - island - landscape - view - 4692 - large_yanvml . mp4 "></ video > < div class =" overlay "></ div > < div class =" text "> < h2 data - type =" uppercase " class =" stroke "> Never Stop </ h2 > < h3 data - type =" uppercase "> Exploring The World </ h3 > < p > View of the tropical island landscape, from a hill with houses, palm trees and many trees, and in the distance the hills that surround the sea, on a sunny day . </ p > </ div > < ul class =" social "> < li > < a href =" https: // twitter . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" twitter profile " src =" https: // i . ibb . co / Wnxq2Nq / twitter . png "/></ a > </ li > < li > < a href =" https: // instagram . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" instagram profile " src =" https: // i . ibb . co / ySwtH4B / instagram . png "/></ a > </ li > </ ul > </ section > </ template > Dans le bloc de code ci-dessus, nous avons inclus un avec la source de la vidéo stockée dans Cloudinary avec des attributs tels que lecture automatique, boucle et muet qui coupent la vidéo lors de son chargement. Pour obtenir les médias stockés dans Cloudinary, nous téléchargeons la vidéo souhaitée dans l'onglet de la médiathèque. Par la suite, copiez l'URL qui sera attachée au de la . <video> src <video> De plus, nous avons référencé les liens dans l'en-tête de navigation avec le composant à la fois la maison et le routes que nous créerons pour voir tous nos blogs. Pour vous assurer que notre page est stylisée avec CSS, créez un dossier à la racine du projet, , et inclure les éléments suivants de cet . Dans le fichier, mettez à jour le fichier pour inclure le fichier CSS créé avec les éléments suivants : nuxt-link / /blogs assets/styles/main.css essentiel nuxt.config.js ... ... } export default { css : [ '@/assets/styles/main.css' ], Voici à quoi notre page devrait ressembler : Création des notes de blog Pour construire notre site de blog, nous avons besoin d'avoir du contenu à afficher et à rendre sur le page. Tout d'abord, créez un puis le répertoire du blog qui contiendra tous les fichiers de démarquage. L'écriture de tout le contenu dans Markdown prend en charge de nombreuses normes de syntaxe Markdown telles que les en-têtes, les liens et les blocs de code avec la coloration syntaxique pour différents langages de programmation. PS : Le contenu Nuxt utilise le dossier de contenu pour stocker tous les fichiers. Voici un exemple de fichier de démarquage dans le répertoire de contenu. Ajoutez ce qui suit au fichier . /blogs content content/blogs/egghead.md title: Egghead author: Teri Eyenike    description: All we need to do is open up our terminal and run the command npm install @nuxt/content. Once it's installed, you'll see that inside of our package.json, we see our Nuxt Content module. Next, to finalize the setup, let's go ahead and open up our nuxt.config.js, and let's go ahead and scroll down to the section that's labeled Modules.    date: May 2, 2021    publishOn: 2021-05-02T00:00:00    tags: ["learning", "platform"] --- --- cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills!  Les fichiers Markdown ont la possibilité d'ajouter des métadonnées à l'aide du concept d'avant-propos qui est indiqué par la syntaxe à trois tirets au début et à la fin de l'avant-propos. Les métadonnées, c'est ce qui est affiché aux lecteurs comme l'heure de publication et l'extrait du contenu du blog, c'est ce qui est affiché aux lecteurs. D'autres propriétés diverses peuvent être incluses. PS : À l'intérieur du front matter, il utilise la syntaxe YAML. Pour récupérer les articles de la page de blog, créons un nouvel itinéraire sous . Créez un dossier, appelé blogs, et créez-y fichier pour le répertoire, blogs. Ensuite, copiez et ajoutez le code suivant au fichier pour afficher les fichiers de démarquage rendus. Récupérer les messages pages index.vue pages/blogs/index.vue <template> </template> // pages/blogs/index.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container section" > < div class = "container__grid" > < div v-for = "blog in blogs" :key = "blog.slug + blog.createdAt" class = "card" > < img :src = "blog.cover_image" alt = "blog photographs" /> < div class = "pad__card" > < div class = "author" > < p class = "author__name" > {{ blog.author }} </ p > < span > | </ span > < p > {{ blog.date }} </ p > </ div > < h2 class = "title" > {{ blog.title }} </ h2 > < p > {{ blog.description.substring(0, 150) }}... </ p > < button > < nuxt-link :to = "`/blogs/${blog.slug}`" > Read More </ nuxt-link > </ button > </ div > </ div > </ div > </ div > </ main > < script > export default { async asyncData ( {$content} ) { const blogs = await $content( "blogs" ).sortBy( "publishOn" , "desc" ).fetch() return { blogs } }, head ( ) { return { title : "Read interesting stories as a nomad" , meta : [ { hid : 'description' , name : 'description' , content : 'Daily and juicy content as you learn, work, and relax. WFH' } ] } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } .section { padding : 3em 0 ; } .container__grid { display : grid; gap: 2em ; grid-template- columns : repeat (auto-fit, minmax ( 19rem , 1 fr)); } .card { background : #f0f7f4 ; box-shadow : 0px 4px 3px rgba ( 0 , 0 , 0 , 0.1 ); border-radius : 5px ; } .card img { object-fit : cover; border-top-left-radius : 5px ; border-top-right-radius : 5px ; width : 100% } .pad__card { padding : 2em ; } .author { display : flex; align-items : center; } .author , .title { margin-bottom : 1em ; } .author span { margin : 0 0.3em ; } .author__name { text-transform : capitalize; } button { border : unset; padding : 1em 2em ; margin-top : 2em ; background : #0D5159 ; font-weight : 700 ; cursor : pointer; } button a { color : #fff ; } </ style > Le bloc de code ci-dessus effectue les opérations suivantes : : utilisé pour générer notre page à partir de Nuxt car il génère des fichiers individuels de manière statique pour les utilisateurs. On passe dans le méthode où les notes de blog sont stockées, la fonction, et la méthode. asyncData $content sortBy() fetch : prend deux paramètres, (triez-le par date) et les attributs desc sur la façon dont vous voulez que le contenu apparaisse en fonction du contenu le plus récent publié sortBy() publishOn Pour rendre chaque article de blog dynamique, nous l'attribuerons à une URL, où il sera le slug du blog sur le bouton Lire la suite en utilisant le composant. /blogs/ <nuxt-link> La dernière étape pour afficher l'extrait des messages rendus à partir du répertoire de contenu consiste à utiliser la directive v-for et à boucler sur les blogs et à rendre chaque article dans une carte. Rendre les messages Voici à quoi la page de blog devrait ressembler maintenant : Création de pages dynamiques Créons maintenant des pages pour chaque article de blog afin d'avoir des routes d'URL dynamiques. Dans Nuxt, pour créer des pages dynamiques, nous ajoutons un trait de soulignement avant le nom du fichier .vue afin de ne pas rendre l'URL codée en dur. Nous créons ensuite le fichier sous le répertoire blogs et ajoutez le code suivant : _slug.vue <template> </template> // pages/blogs/_slug.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container" > < div class = "return" > < nuxt-link to = "/" > < img alt = "back to home" src = "/home.png" /> </ nuxt-link > < span > / </ span > < nuxt-link to = "/blogs" > Blog </ nuxt-link > < span > / </ span > < p > {{ note.title.substring(0, 15) }}... </ p > </ div > < section > < h1 > {{ note.title }} </ h1 > < nuxt-content :document = "note" cla /> </ section > </ div > </ main > < script > export default { async asyncData ( {$content, route} ) { const note = await $content( `blogs/ ${route.params.slug} ` ).fetch() return { note } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } section { padding-bottom : 2em ; } .return { display : flex; margin : 1.5em 0 ; } .return img { width : 20px ; height : 20px ; } .return span { margin : 0 1em ; } h1 { margin-bottom : 1em } </ style > Ce bloc de code effectue les opérations suivantes : : Nous utilisons le contenu pour récupérer un fichier spécifique dans le répertoire blogs en utilisant le paramètre route et le slug qui correspondra à notre nom de fichier réel ${route.params.slug} Pour rendre le démarquage en tant que contenu réel défini dans le fichier de démarquage, nous utilisons le composant nuxt-content et passons le prop du avec l'ensemble objet document note : Définir la portée de l'élément de style garantit que le style ne s'applique qu'à une page spécifique scoped Dernières pensées La création d'un blog est idéale lorsque vous souhaitez partager vos réflexions avec un public plus large et Nuxt nous a fourni un moyen de le faire dans cet article. Il existe encore d'autres fonctionnalités que nous pouvons encore explorer pour nous assurer que nous avons un site Web de blog robuste. Apprendre encore plus Contenu Nuxt Documentation Nuxt Essayez la en direct démo

Dash

Fetch

Instagram

NuxtJS

Target

Twitter

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Book a call with @terieyenike

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Comment créer votre propre blog avec Nuxt, Nuxt Content et Cloudinary

Comment créer votre propre blog avec Nuxt, Nuxt Content et Cloudinary

People Mentioned

Companies Mentioned

Coin Mentioned

Teri Eyenike

About Author

Topics

Languages

Around The Web...