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

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

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

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

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps