Diretório de Conteúdo

Enriquece a nossa aplicação de Nuxt com o módulo @nuxt/content onde podemos escrever num diretório content/ e buscar os nossos ficheiros de .md, .json, .yml e .csv através duma interface de programação de aplicação tipo MongoDB, atuando como um sistema de gestão de conteúdo sem cabeça baseado em Git.

Recarregar Instantaneamente em Desenvolvimento

O módulo de conteúdo é muito rápido quando se trata de recarregar instantaneamente em desenvolvimento, devido a não ter que passar pela Webpack quando fazemos alterações nos nossos ficheiros de Markdown. Também podemos ouvir o evento content:update e criar uma extensão para que, sempre que atualizarmos um ficheiro no nosso diretório de conteúdo, despache um método fetchCategories, por exemplo:

Exibir o Conteúdo

Podemos usar o componente <nuxt-content> diretamente no nosso modelo de marcação de hipertexto para mostrar o corpo da página:

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

Estilizar o Nosso Conteúdo

Dependendo do que estivermos a utilizar para conceber a nossa aplicação, poderemos ter de escrever algum estilo para apresentar corretamente a Markdown.

O componente <nuxt-content> adicionará automaticamente uma classe .nuxt-content, podemos usá-la para personalizar os nossos estilos:

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

Manipular Ficheiros .md, .csv, .yaml, .json

Este módulo converte os nossos ficheiros .md numa estrutura de árvore de sintaxe abstrata de notação de objeto de JavaScript, armazenada numa variável de corpo. Também podemos adicionar um bloco de capa de YAML aos nossos ficheiros de Markdown ou a um ficheiro .yml que será injetado no documento. Também podemos adicionar um ficheiro json/json5 que também pode ser injetado no documento. E podemos utilizar um ficheiro .csv onde as linhas serão atribuídas à variável do corpo:

---
title: My first Blog Post
description: Learning how to use @nuxt/content to create a blog
---

Componentes .vue no .md

Podemos utilizar componentes .vue diretamente nos nossos ficheiros .md. No entanto, teremos de utilizar os nossos componentes como caixas de espetadas (nomes separados por traço ou hífen) e não podemos utilizar os marcadores de fecho automático:

<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>

Interface de Programação de Aplicação Totalmente Pesquisáveis

Podemos utilizar a $content() para listar, filtrar e pesquisar o nosso conteúdo facilmente:

<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>

Artigos Anteriores e Posteriores

O módulo de conteúdo inclui um método .surround(slug) para podermos obter facilmente os artigos anteriores e posteriores:

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" />

Pesquisa de Texto Integral

O módulo de conteúdo vem com uma pesquisa de texto completo, pelo que podemos pesquisar facilmente nos nossos ficheiros .md sem ter de instalar nada:

<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>

Realce de Sintaxe

Este módulo embrulha automaticamente os blocos de código e aplica classes da Prism . Também podemos adicionar um tema de Prism diferente ou desativá-lo completamente:

yarn add prism-themes

npm install prism-themes

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

Estender a Análise Sintática da Markdown

Originalmente, a Markdown não suporta o realce de linhas em blocos de código nem de nomes de ficheiros. O módulo de conteúdo permite-o com a sua própria sintaxe personalizada. Os números de linha são adicionados ao marcador pre nos atributos data-line e o nome do ficheiro será convertido para um span com uma classe filename, para podermos estilizá-lo:

Geração de Índices

Uma propriedade do tipo vetor toc (abreviação de índice em Inglês) será injetada no nosso documento, listando todos os cabeçalhos com os seus títulos e identificadores, para podermos estabelecer uma hiperligação a estes:

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

Interface de Programação de Aplicação Construtora de Consulta Poderosa (Parecida com a MongoDB).

O módulo de conteúdo vem com uma poderosa interface de programação de aplicação construtora de consulta semelhante a MongoDB, que permite-nos ver facilmente a notação de objeto de JavaScript de cada diretório em http://localhost:3000/_content/. O destino está acessível nas requisições GET e POST, pelo que podemos utilizar parâmetros de consulta:

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

Estender com as Funções Gatilhos

Podemos utilizar as funções gatilhos para estender o módulo de modo a podermos adicionar dados a um documento antes de este ser armazenado.

Integração com @nuxtjs/feed

No caso dos artigos, o conteúdo pode ser utilizado para gerar rações (também conhecidos por feeds) de notícias utilizando o módulo @nuxtjs/feed .

Suporte à Geração de Sítios Estáticos

O módulo de conteúdo funciona com a geração de sítios estáticos ao utilizar nuxt generate. Todas as rotas serão geradas automaticamente graças a funcionalidade de rastreio da Nuxt.

O Que Se Segue?