Comment créer votre propre blog avec Nuxt, Nuxt Content et Cloudinary by@terieyenike
2,929 lectures

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

2022/05/21
14 min
par @terieyenike 2,929 lectures
tldt arrow
FR
Read on Terminal Reader

Trop long; Pour lire

Cet article vous apprendra comment créer un blog avec des pages dynamiques pour chaque article. Il utilisera le module de contenu Nuxt pour accéder aux fichiers Markdown, YAML, XML et même CSV via une interface de type API. Avec Cloudinary, nous pouvons télécharger, créer et gérer des expériences numériques sur n'importe quel navigateur et appareil. Les éléments suivants sont requis pour compléter ce didacticiel : Un compte Cloudinary, une connaissance de JavaScript et une familiarité avec le framework Vue. Créer un blog avec Nuxt nécessite une connaissance de base du framework et une familiarité avec Vue.

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - Comment créer votre propre blog avec Nuxt, Nuxt Content et Cloudinary
Teri Eyenike HackerNoon profile picture

@terieyenike

Teri Eyenike

I am a frontend developer with a particular interest in...

Apprendre encore plus
LEARN MORE ABOUT @TERIEYENIKE'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

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 GitHub et la démo pour référence.

Conditions préalables

Les éléments suivants sont requis pour terminer ce didacticiel :

  • Compte Cloudinaire. L'inscription est gratuite
  • 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.

image

Maintenant que le passe-partout est configuré avec tous les fichiers et dossiers, lançons le serveur de développement qui est accessible sur

 http://localhost:3000
à l'intérieur du projet.

 # change directory to project folder
cd blog-for-developers

# start the development environment
npm run dev

Qu'est-ce que Nuxt ?
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 le contenu 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

 @nuxt/content
, il injectera le
 $content
instance globalement dans notre projet pour y accéder n'importe où dans un projet.

Qu'est-ce que Cloudinary ?
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.

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.

Ajouter un style de police
Dans le

 nuxt.config.js file
, 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 :

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

 pages/index.vue
qui comprendra les liens de navigation et du texte sur la page d'accueil. Retirer le composant,
 <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

 <video>
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
 src
de la
 <video>
.

image

De plus, nous avons référencé les liens dans l'en-tête de navigation avec le

 nuxt-link
composant à la fois la maison
 /
et le
 /blogs
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,
 assets/styles/main.css
, et inclure les éléments suivants de cet .

Dans le
 nuxt.config.js
fichier, mettez à jour le fichier pour inclure le fichier CSS créé avec les éléments suivants :

 export default {      ...      css : [ '@/assets/styles/main.css' ],      ... }

Voici à quoi notre page devrait ressembler :

image

Création des notes de blog

Pour construire notre site de blog, nous avons besoin d'avoir du contenu à afficher et à rendre sur le

 /blogs
page. Tout d'abord, créez un
 content
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
 content/blogs/egghead.md
.

 ---    title: Egghead    cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg    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"] ---    [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills! <!-- more content -->

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.

Récupérer les messages
Pour récupérer les articles de la page de blog, créons un nouvel itinéraire sous

 pages
. Créez un dossier, appelé blogs, et créez-y
 index.vue
fichier pour le répertoire, blogs.

Ensuite, copiez et ajoutez le code suivant au
 pages/blogs/index.vue
fichier pour afficher les fichiers de démarquage rendus.

 // pages/blogs/index.vue
    <template>      < 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 >
    </template>    < 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 :

  •  asyncData
    : 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
     $content
    méthode où les notes de blog sont stockées, la
     sortBy()
    fonction, et la
     fetch
    méthode.
  •  sortBy()
    : prend deux paramètres,
     publishOn
    (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é
  • Pour rendre chaque article de blog dynamique, nous l'attribuerons à une URL, où il sera
     /blogs/
    le slug du blog sur le bouton Lire la suite en utilisant le
     <nuxt-link>
    composant.

Rendre les messages
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.

Voici à quoi la page de blog devrait ressembler maintenant :

image

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

 _slug.vue
fichier sous le répertoire blogs et ajoutez le code suivant :

 // pages/blogs/_slug.vue
    <template>      < 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 >
    </template>    < 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 :

  •  ${route.params.slug}
    : 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
  • 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
     document
    avec l'ensemble
     note
    objet
  •  scoped
     : Définir la portée de l'élément de style garantit que le style ne s'applique qu'à une page spécifique

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

Essayez la démo en direct

HISTOIRES CONNEXES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa