Comment créer facilement un blog avec du contenu Nuxt

Que faudrait-il pour créer votre propre blog en utilisant Nuxt et Nuxt Content ? Cela pourrait être plus facile que vous ne le pensez.

La rédaction d’articles de blog peut être un excellent moyen de partager des connaissances avec d’autres développeurs et de mémoriser ce que vous avez appris. Il existe des plates-formes de blog que vous pouvez utiliser pour partager des articles, mais avoir votre propre site Web de blog peut offrir plus de flexibilité.

Créer son propre blog est en fait assez simple et rapide. Vous n’avez même pas besoin d’une base de données. Dans ce tutoriel, nous allons créer un blog en utilisant Nuxt avec le Contenu Nuxt module.

A la fin de cet article, vous saurez comment :

• Configurer un projet Nuxt avec Nuxt Content
• Récupérer et afficher des articles de blog
• Récupérer et afficher un article de blog spécifique par un slug
• Ajouter la fonctionnalité d’articles de blog de recherche

Vous pouvez trouver l’exemple de code complet dans ce dépôt GitHubet un exemple interactif est disponible dans le CodeSandbox ci-dessous.

Configuration du projet

Commençons par créer un nouveau projet Nuxt. Vous pouvez le faire en exécutant l’une des commandes ci-dessous :

// npx
npx create-nuxt-app my-nuxt-content-blog

// yarn
yarn create nuxt-app my-nuxt-content-blog

// npm
npm init nuxt-app my-nuxt-content-blog

Vous devrez répondre à quelques questions. Sur l’image ci-dessous, vous pouvez voir comment j’y ai répondu.

Une fois le projet créé, cd dans le répertoire du projet et installez le module Nuxt Content.

cd my-nuxt-content-blog
yarn add @nuxt/content

Ouvrez maintenant le nuxt.config.js fichier et ajouter une nouvelle entrée au modules déployer.

export default {
  
  modules: [
    '@nuxt/content'
  ]
}

Pour rendre les choses agréables et rapides, nous utiliserons CSS vent arrière pour le style. Si vous ne souhaitez pas l’utiliser, vous pouvez ignorer les étapes de configuration et démarrer simplement le serveur de développement. Sinon, exécutez la commande ci-dessous pour créer la configuration CSS Tailwind.

npx tailwindcss init

Cette commande créera un nouveau fichier appelé tailwind.config.js à la racine de votre projet. Ouvrez ce fichier et ajoutez jit propriété comme indiqué ci-dessous.

module.exports = {
  jit: true
  
}

La dernière étape consiste à créer le tailwind.css dossier.

assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Vous pouvez maintenant démarrer le serveur de développement.

yarn dev

Voilà pour la configuration. Créons quelques articles de blog.

Page des articles de blog

Le module Nuxt Content agit comme un CMS sans tête basé sur Git. Vous pouvez créer des articles de blog sous la forme de fichiers de démarquage à l’intérieur du content/ puis utilisez le module Nuxt Content pour les récupérer et les afficher.

Si vous souhaitez en savoir plus sur ce que vous pouvez faire avec Nuxt Content, consultez le Documentation.

Tout d’abord, créons trois fichiers de démarquage qui seront nos articles de blog.

content/how-to-prepare-for-a-javascript-interview.md

---
title: How to Prepare for a JavaScript Interview
description: Interviews can be stressful; the better prepared you are, the higher your chance of succeeding. This article shares useful tips and learning resources to help you prepare and become a better developer.
slug: how-to-prepare-for-a-javascript-interview
---

Interviews can be stressful; the better prepared you are, the higher your chance of succeeding. This article shares useful tips and learning resources to help you prepare and become a better developer.

contenu/dernières-fonctionnalités-javascript.md

---
title: The Latest Features Added to JavaScript in ECMAScript 2020
description: JavaScript is one of the most popular programming languages, and features are now added to the language every year. This article covers new features added in ECMAScript 2020, also known as ES11.
slug: the-latest-features-added-to-javascript-in-ecmascript-2020
---

JavaScript is one of the most popular programming languages, and features are now added to the language every year. This article covers new features added in ECMAScript 2020, also known as ES11.

```js
const personName = personObject?.name
```

Optional Chaining is a very useful feature.

content/a-view-on-new-vue.md

---
title: 'A View on New Vue: What to Expect in Vue 3'
description: The next version of Vue brings a lot of improvements over its predecessor. It will be faster, smaller and offer new features. In this article we go through what Vue 3 will offer.
slug: a-view-on-new-vue-what-to-expect-in-vue-3
---

The next version of Vue brings a lot of improvements over its predecessor. It will be faster, smaller and offer new features. In this article we go through what Vue 3 will offer.

Chaque fichier de démarquage se compose d’un avant-projet et d’un corps. Le avant-propos va entre trois tirets (---). Il doit être écrit dans un format YAML valide. Cette configuration sera ensuite injectée dans un document Nuxt Content. Pour les exemples de messages, nous avons un titre, une description et un slug. Vous pouvez, bien sûr, ajouter d’autres propriétés si vous le souhaitez, par exemple, une URL d’image ou une date de création.

Après avoir créé les fichiers des articles de blog, dirigez-vous vers le pages/index.vue dossier. Il est temps de récupérer et de rendre les messages. Vous pouvez remplacer le contenu de ce fichier par le code ci-dessous.

pages/index.vue

<template>
  <div
    class="max-w-3xl max-w-5xlmin-h-screen flex justify-center mx-auto my-12"
  >
    <main class="w-full">
      <h1 class="text-2xl font-semibold mb-6">My awesome blog</h1>
      <section class="space-y-4 divide-y">
        <article v-for="post of posts" :key="post.slug" class="pt-4">
          <h2 class="text-lg mb-2 text-blue-700 hover:text-blue-800">
            <nuxt-link :to="`/blog/${post.slug}`">
              {{ post.title }}
            </nuxt-link>
          </h2>
          <span>
            {{ post.description }}
          </span>
        </article>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
    }
  },
  async fetch() {
    this.posts = await this.$content().fetch()
  },
}
</script>

Nuxt Content injecte globalement le $content instance, qui peut être utilisée pour récupérer des articles. Il fournit une puissante API de type MongoDB pour interroger le contenu. Comme vous pouvez le voir dans le code ci-dessus, nous ne fournissons aucun filtre, donc tous les messages seront récupérés immédiatement. L’image ci-dessous montre à quoi devrait ressembler la page d’accueil maintenant.

Si vous cliquez sur l’un des liens, il devrait vous rediriger vers un /blog/<slug> page, qui n’existe pas encore, nous allons donc nous en occuper ensuite.

Afficher la page des articles de blog

Créons un nouveau fichier appelé _slug.vue.

pages/blog/_slug.vue

<template>
  <div class="max-w-3xl mx-auto min-h-screen my-12">
    <div v-if="post">
      <h1 class="text-2xl font-semibold mb-6">{{ post.title }}</h1>
      <nuxt-content :document="post" />
      <div class="mt-8">
        <nuxt-link to="https://www.telerik.com/" class="hover:underline">Back to blog</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null,
    }
  },
  async fetch() {
    this.post = (
      await this.$content()
        .where({ slug: this.$route.params.slug })
        .limit(1)
        .fetch()
    )?.[0]
  },
}
</script>

Au lieu d’appeler le fetch méthode immédiatement, nous fournissons un filtre slug qui est extrait des paramètres de route. Nous limitons également les résultats à un, car nous voulons récupérer uniquement le billet de blog spécifique, nous n’attendons donc pas plus de résultats, car les slugs doivent être uniques. Le message de récupération est ensuite transmis au <nuxt-content /> composant via le document soutenir. L’image ci-dessous montre l’article « Les dernières fonctionnalités ajoutées à JavaScript ».

Génial, notre blog fonctionne. Le site Web affiche tous les articles de blog et permet aux utilisateurs de lire chaque article. Cependant, avant de terminer, ajoutons une fonctionnalité de recherche de blog.

Recherche de blogs

Retournez à la pages/index.vue dossier. Nous devons ajouter un champ de saisie afin que les utilisateurs puissent fournir une requête de recherche. En plus de cela, nous mettrons à jour le fetch Ainsi, si une requête de recherche est disponible, nous effectuerons une recherche de texte au lieu de simplement récupérer tous les articles.

pages/index.vue

<template>
  <div
    class="max-w-3xl max-w-5xlmin-h-screen flex justify-center mx-auto my-12"
  >
    <main class="w-full">
      <h1 class="text-2xl font-semibold mb-6">My awesome blog</h1>
      <section>
        <form class="flex flex-col space-y-2 mb-4">
          <label for="search-blogs" class>Search blogs</label>
          <input
            id="search-blogs"
            v-model="query"
            class="px-3 py-2 shadow border border-gray-200"
            type="text"
          />
        </form>
      </section>
      <section class="space-y-4 divide-y">
        <article v-for="post of posts" :key="post.slug" class="pt-4">
          <h2 class="text-lg mb-2 text-blue-700 hover:text-blue-800">
            <nuxt-link :to="`/blog/${post.slug}`">
              {{ post.title }}
            </nuxt-link>
          </h2>
          <span>
            {{ post.description }}
          </span>
        </article>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      posts: [],
    }
  },
  async fetch() {
    if (!this.query) {
      this.posts = await this.$content().fetch()
      return
    }
    this.posts = await this.$content().search(this.query).fetch()
  },
  watch: {
    query: '$fetch',
  },
}
</script>

Après avoir mis à jour le code, vous devriez pouvoir rechercher les articles de votre blog, comme indiqué dans le gif ci-dessous.

Conclure

C’est ça! Nous avons créé avec succès notre propre nouveau blog en utilisant Nuxt et Nuxt Content et même mis en place une fonctionnalité de recherche de blog. Si vous souhaitez un défi supplémentaire, vous pouvez ajouter plus de fonctionnalités, telles que l’anti-rebond de la recherche, le filtrage par catégories, et même la pagination ou le chargement paresseux de plus d’articles avec un défilement infini.