content

Augmentez le potentiel de votre application Nuxt avec le module @nuxt/content grâce auquel on peut écrire dans un répertoire content/ et récupérer du Markdown, JSON, YAML et des fichiers CSV à travers une API dans le style de MongoDB, qui remplit donc le rôle d'un CMS headless basé sur Git.

Rechargement à chaud lors du développement

En développement, le module content est super rapide quand il s'agit de rechargement à chaud car il ne doit pas passer par Webpack lorsque l'on fait des changements à nos fichiers markdown. On peut aussi écouter l'événement content:update et créer un plugin qui à chaque fois que l'on va mettre à jour un fichier dans le répertoire content, va propager une méthode fetchCategories par exemple.

Afficher le contenu

On peut directement utiliser le composant <nuxt-content> dans notre template pour afficher le corps de la page.

<template>
  <article>
    <nuxt-content :document="article" />
  </article>
</template>

Styliser votre contenu

En fonction de ce que l'on va utiliser pour styliser notre application, on pourrait avoir besoin d'écrire un peu de style pour afficher notre markdown proprement.

Le composant <nuxt-content> va automatiquement ajouter une classe .nuxt-content, afin que nous puissions personnaliser nos styles.

<style>
  .nuxt-content h2 {
    font-weight: bold;
    font-size: 28px;
  }
  .nuxt-content p {
    margin-bottom: 20px;
  }
</style>

Gérer les formats Markdown, CSV, YAML, JSON(5)

This module converts your .md files into a JSON AST tree structure, stored in a body variable. You can also add a YAML front matter block to your markdown files or a .yaml file which will be injected into the document. You can also add a json/json5 file which can also be injected into the document. And you can use a .csv file where rows will be assigned to the body variable.

Ce module convertit nos fichiers .md en une structure arborescente de type JSON AST , stockée dans une variable body.

---
title: Mon premier article de blog
description: Apprendre à se servir de @nuxt/content pour créer un blog
---

Composants Vue dans le markdown

On peut utiliser les composants Vue directement dans les fichiers markdown. Il faudra cependant utiliser les composants sous leur écriture kebab-case et non avec des balises auto-fermantes.

<template>
  <div class="p-4 mb-4 text-white bg-blue-500">
    <p><slot name="info-box">default</slot></p>
  </div>
</template>

<info-box>
  <template #info-box>
    This is a vue component inside markdown using slots
  </template>
</info-box>

API entièrement recherchable

On peut utiliser $content() pour lister, filtrer et chercher notre contenu facilement.

<script>
  export default {
    async asyncData({ $content, params }) {
      const articles = await $content('articles', params.slug)
        .only(['title', 'description', 'img', 'slug', 'author'])
        .sortBy('createdAt', 'asc')
        .fetch()

      return {
        articles
      }
    }
  }
</script>

Articles précédents et suivants

Le module content inclut un .surround(slug) qui nous permet de récupérer facilement les articles précédents et suivants.

async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch()

    const [prev, next] = await $content('articles')
      .only(['title', 'slug'])
      .sortBy('createdAt', 'asc')
      .surround(params.slug)
      .fetch()

    return {
      article,
      prev,
      next
    }
  },

<prev-next :prev="prev" :next="next" />

Recherche par texte complet

Le module content possède une recherche par texte complet afin que l'on puisse rechercher simplement dans nos fichiers markdown sans avoir à installer quoi que ce soit d'autre.

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

Surbrillance de la syntaxe

Ce module va automatiquement envelopper les blocks de code et y appliquer les classes de PrismJS . On peut bien sûr ajouter un thème PrismJS différent voire même le désactiver totalement.

yarn add prism-themes

npm install prism-themes

content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-material-oceanic.css'
    }
  }
}

Personnaliser le parsing du markdown

À l'origine, le markdown ne supporte pas la surbrillance des lignes que ce soit dans les blocks de code ou dans les noms de fichiers. Le module content permet cela avec sa propre syntaxe. Les lignes numérotées seront ajoutées à une balise pre dans l'attribut data-line et le nom du fichier sera converti en un span avec une classe filename, afin d'être stylisé.

Génération d'une table des matières

Une propriété toc (pour Table of Contents) contenant un tableau, sera injectée dans notre document, listant tous les entêtes avec leurs titres et identifiants, afin que l'on puisse les lier.

<nav>
  <ul>
    <li v-for="link of article.toc" :key="link.id">
      <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
    </li>
  </ul>
</nav>

Un QueryBuilder d'API puissant

Le module content possède un puissant QueryBuilder d'API (similaire à MongoDB) qui nous permet de facilement voir le JSON de chaque répertoire à l'URL http://localhost:3000/_content/. L'extrémité est accessible via des requêtes GET et POST, on peut donc utiliser des query params.

http://localhost:3000/_content/articles?only=title&only=description&limit=10

Personnaliser avec des hooks

On peut utiliser des hooks pour personnaliser le module afin d'ajouter de la data au document avant que ce dernier ne soit stocké.

Intégration avec @nuxtjs/feed

Dans le cas d'articles, le contenu peut être utilisé pour générer un fil d'actualité en utilisant le module @nuxtjs/feed .

Support pour la génération de site statique

Ce module marche avec la génération de site statique en utilisant nuxt generate. Toutes les routes seront automatiquement générées grâce à la fonctionnalité du crawler de Nuxt.

Prochaine étape