NuxtJS Content - Блог с нуля (Часть 1)

Этот блог построен на NuxtJS с установленным модулем Content, и он правда реактивный. Скорость переключения страниц просто радует. В этом посте зхаконспектирую как быстро собрать блог на этой технологии.

Шаг 1. Установка

Для начала установим сам накст.

npm init nuxt-app blog

Далее перейдем в созданную папку blog

cd blog

и установим необходимые модули накста. Нам понадобятся модули Content и Image, он нам понадобится для ресайза изображений.

npm install @nuxt/content
npm install -D @nuxt/image

Шаг 2. Структура

В папке проекта content создадим папку blog, в ней будут находиться наши посты, название файла будет нашим слагом. К примеру если мы создадим файл my-first-page.md, то путь поста будет site.ru/blog/my-first-page

Содержимое файла my-first-page.md:

---
title: Мой первый пост
description: В этом уроке мы реализуем реактивный блог с тегами и постами на NuxtJS c модулем Content
img: /images/myimg.jpg
tags:
  - NuxtJS
---
Контент нашей страницы

То есть наши поля которые мы будем использовать в дальнейшем мы обарачиваем в 3 тире, далее идет само содержимое. Поля нам необходимы чтобы потом их выводить и фильтровать по ним, например создадим страницу с тегом. Или можем создать такое поле как published: 1, спомощью него сможем выводить только посты где указано 1, true или любое другое значение.

Для теста создадим парочку таких тестовых постов. Содержимо необходимо писать в формате markdown. В дальнейшем мы напишем админку, но для начала можем воспользоваться Markdown Editor. Картинки мы закинем в папку static.

Шаг 3. Создадим страницы

В папке pages нужно создать 2 файла в папке blog: index.vue (для главной страницы блога где будет вывподиться список постов) и _slug.vue (для детальной страницы поста).

Содержимое файла pages/blog/index.vue:

<template>
  <ul>
    <li v-for="post in blog" :key="post.path">
      <nuxt-link :to="slug"> 
        <span class="grid-b__img">
          <nuxt-img 
            :src="img"
            v-if="img" 
            class="img-fluid"
            sizes="sm:100vw lg:459px"
            height="100px"
             />
        </span> 
        <span class="grid-b__title">{{ title }}</span> 
        <span class="grid-b__text">{{ description}}</span> 
      </nuxt-link>
    </li>
  </ul>
</template>

<script>
export default {
  async asyncData ({ $content, route }) {
    let query = $content('blog', { deep: true })
    const blog = await query.fetch()
    return {
      blog,
    }
  },
}
</script>

Тег nuxt-img мы используем благодаря модулю NuxtImage, который мы установили в 1 шаге.

Таким образом мы получили страницу блога по адресу сайт.ру/blog со списком всех постов которые были созданы на 2 шаге.

Содержимое файла pages/blog/_slug.vue:

<template>
  <div>
    <nuxt-link to="/blog">Все посты</nuxt-link>
    <h1>
      {{ article.title }}
    </h1>
    <nuxt-content :document="article" />
  </div> 
</template>

<script>
  export default {
    async asyncData ({ $content, params, error }) {
      let article
      try {
        article = await $content('blog', params.slug).fetch()
      } catch (e) {
        return error({ message: 'Ничего не найдено' })
      }
      return {
        article
      }
    },

  }
</script>

Теперь мы имеем страницу блога с ссылками на посты и переходами по ним.

Во второй части мы научимся добавлять теги для постов и выводить их на сайт: для меню и активные теги для постов.