Статический сайт с использованием Nuxt.js и CMS Storyblok


Вы хотите создать быстрый и безопасный сайт?

Это руководство показывает, как создать полноценный сайт с помощью Nuxt.js, Storyblok и Tailwind CSS.

Введение

**Что такое Jamstack?

Jamstack — это архитектура, разработанная для того, чтобы сделать веб быстрее, безопаснее и проще в масштабировании. Она основана на многих инструментах и рабочих процессах, которые нравятся разработчикам и обеспечивают максимальную производительность.

  • Лучшая производительность

  • Повышенная безопасность

  • Более дешевое и простое масштабирование

  • Лучший опыт разработчиков

Генераторы сайтов

**Nuxt.js ** — это бесплатная библиотека JavaScript с открытым исходным кодом, основанная на Vue.js,

BTW: Легко изучить. Легко освоить, нулевая конфигурация, SEO дружелюбный

Безголовая CMS

Безголовая CMS — это любой тип внутренней системы управления контентом, в которой хранилище контента «тело» отделено от презентационного слоя «головы». Контент, размещенный в безголовой CMS, предоставляется через API для бесшовного отображения на различных устройствах.

StoryBlok

Первая безголовая CMS на основе компонентов с визуальным редактором.

Приступаем к кодированию

Установка

Требование

Nuxt.js v2.14.0
Nodejs v12.3.1
Npm v6.9.0
Войдите в полноэкранный режим Выйти из полноэкранного режима
yarn create nuxt-app my-nuxt-app // npx create-nuxt-app my-nuxt-app
cd my-nuxt-app
yarn dev // npm run dev

Войти в полноэкранный режим Выход из полноэкранного режима

Я предпочитаю пряжу.

Установите пакет Storyblok.

yarn add @storyblok/nuxt //for nuxt v3
yarn add  @storyblok/nuxt-2 //for nuxt-2
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Следующий шаг — добавление модуля nuxt в nuxt.config.js

['@storyblok/nuxt/module', { accessToken: process.env.YOUR_STORYBLOK_API_KEY }],

Войдите в полноэкранный режим Выйти из полноэкранного режима

Чтобы получить этот ключ API stroyblok, зайдите в свое пространство в Storyblok и скопируйте ключ preview api.

* Со стороны Storyblok.
*

  1. Создайте пространство в Storyblok

  2. Создайте компонент

  3. Определите схему компонента

В коде (Nuxt.js)

Создайте компонент Page в components/Page.vue

<template>
  <div
    v-editable="blok"
    class="px-6">
    <component
      v-for="blok in blok.body"
      :key="blok._uid"
      :blok="blok"
      :is="blok.component" />
  </div>
</template>

<script>
export default {
  props: {
    blok: {
      type: Object,
      required: true
    }
  }
}
</script>
Войдите в полноэкранный режим Выйти из полноэкранного режима

Чтобы сделать доступ к компоненту глобальным
Добавьте компонент в plugins/components.js

import Page from '~/components/Page.vue'

Vue.component('Page', Page)
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем добавьте этот плагин в nuxt.config

plugins: ['~/plugins/components']
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте создадим индексную страницу и возьмем содержимое из Storyblok

<template>
  <div>
    <component :is="story.content.component" v-if="story.content.component" :key="story.content._uid" :blok="story.content" />
  </div>
</template>

<script>
import { useStoryblokBridge } from '@storyblok/nuxt'

export default {
  middleware: 'fetchGlobalLayout',
  asyncData: (context) => {
    const version = context.query._storyblok || context.isDev ? 'draft' : 'published'

    const language = context.app.i18n.locale // this i18n, i will get back this. 

    return context.app.$storyapi
      .get('cdn/stories/home', {
        language,
        version,
      })
      .then((res) => {
        return res.data
      })
      .catch((res) => {
        if (!res.response) {
          context.error({
            statusCode: 404,
            message: 'Failed to receive content from api',
          })
        } else {
          context.error({
            statusCode: res.response.status,
            message: res.response.data,
          })
        }
      })
  },

  mounted() {
    useStoryblokBridge(this.story.id, (newStory) => (this.story = newStory))
  },
}
</script>
Войти в полноэкранный режим Выйти из полноэкранного режима

Продолжение следует

Оцените статью
Procodings.ru
Добавить комментарий