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

В предыдущей части добавили посты в блог. Сейчас добавим функционал тегов в реактивный блог на Nuxtjs

Структура тегов

Для начала создадим в папке content еще одну папку tags, в ней будем хранить md файлы. Для теста создадим парочку, к примеру nuxt.md:

---
name: NuxtJS
title: Блог о NuxtJS
description: Блог о NuxtJS
---
Контентная часть этой страницы (если необходимо)

Редактируем посты

Теперь в самих постах будем указывать наши теги, например:

tags:
  - NuxtJS
  - Блог

Точно в такой последовательности: - name тега.

В нашем случае мы будем использовать именно name. title и description мы заполняем SEO.

Теперь в файле pages/blog/_slug.vue выведем выбранные теги просматриваемого поста с ссылкой на них.

export default {
  async asyncData ({ $content, params, error }) {
    let article
    try {
      article = await $content('blog', params.slug).fetch()
    } catch (e) {
      return error({ message: 'Ничего не найдено' })
    }
  const tagsList = await $content('tags')
    .only(['name', 'slug'])
    .where({ name: { $containsAny: article.tags } })
    .fetch()
  const tags = Object.assign({}, ...tagsList.map((s) => ({ [s.name]: s })))
    return {
      tags,
    }
  },
}

Не нужно просто копировать и вставлять этот код в сою страницу. Если вы реализовывали 1-ую часть данной серии, то у на уже есть полученная article, нужно добавить переменные tagsList и tags (получаем список тегов у активного поста по name тега и возвращаем в переменной tags).

<p>Опубликовано в {{article.tags.length == 1 ? 'категории' : 'категориях'}}:
  <NuxtLink :to="`/blog/tag/${tags[tag].slug}`" v-for="(tag, id) in article.tags" :key="id">
    <span>
      {{ tags[tag].name }}
    </span>
  </NuxtLink>
 </p>

А это выводим в template с проверкой на количество категорий. Если мы перейдем по данным ссылкам, то увидем что страницы не существует, создадим их.

Создадим страницы тегов

В этих страницах мы должны увидеть тот же самый список тегов что и на странице /blog, но добавим выборку по тегу. Страницы блога мы создавали в 1-ой части создания блога. пишем свой по образу из 1 урока.

Все это мы используем в файле /pages/blog/tag/_tag.vue:

<script>
export default {
  async asyncData ({ $content, params }) {
    const tags = await $content('tags')
      .where({ slug: { $contains: params.tag } })
      .limit(1)
      .fetch()
    const tag = tags.length > 0 ? tags[0] : {}
    const blog = await $content('blog', params.slug)
      .where({ tags: { $contains: tag.name } })
      .sortBy('createdAt', 'asc')
      .fetch()
    return {
      tag,
      blog,
    }
  },
  head () {
    return {
      title: this.tag.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.tag.description
        }
      ]
    }
  }
}
</script>

Теперь в template можем вывести:

{{ tag.name }} - Заголовок блога
post.title и post.description мы заполняли, уже добавили в head, их тоже можем использовать при необходимости.

Profit! Создали страницы тегов во списком их постов, вывели ссылки на теги в посту.

Опубликовано 17 апреля 2021 г. в категории: NuxtJS

Если Вам необходимо внедрить данную разработку на свой проект, свяжитесь со мной, обсудим цену и срок.

Связаться со мной

NuxtJS пагинация

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