#2 헤드리스 상거래 구축 - Storyblok CMS로 콘텐츠 추가

콘텐츠 관리 시스템을 사용하는 것이 정말 즐겁기 때문에 항상 즐겁게 작업했습니다. 귀하의 페이지에서 실시간으로 콘텐츠를 편집하는 경험은 정말 놀랍고 당신도 그것을 좋아할 것이라고 믿습니다!

이미 Storyblok에 대한 기사를 쓴 적이 있지만 이번에는 이에 대한 비디오를 녹화하기로 결정했습니다!



이 비디오에서는 이전에 만든 Headless Commerce 애플리케이션에 Headless CMS Storyblok을 추가합니다. 아직 이 비디오를 보지 못했다면(여기 링크 -> ) 전자 상거래의 개념과 그 발전에 대해 정말 잘 설명하고 있으므로 꼭 시청해 보시기 바랍니다.

Storyblok Dashboard의 콘텐츠를 Nuxt 3 애플리케이션에 동적으로 추가합니다.

어느 시점에서 길을 잃으면 여기 ithub repo -> https://github.com/Baroshem/nuxt-shopify-tailwind 및 분기feat/storyblok 가 있습니다.

암호

가장 먼저 해야 할 일은 필요한 종속 항목을 설치하는 것입니다.

yarn add @storyblok/nuxt axios

다음으로 @storyblok/nuxt 모듈을 modules 파일의 nuxt.config.ts 배열에 추가하고 필요한 구성을 추가합니다.

  modules: ["@nuxtjs/tailwindcss","nuxt-graphql-client", "@storyblok/nuxt"],

  storyblok: {
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN
  },

.env 파일에 새 환경 변수도 추가해야 합니다.

STORYBLOK_ACCESS_TOKEN=<YOUR_TOKEN>

HeroBanner.vue 구성 요소에 소품을 추가해 보겠습니다.

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  subtitle: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    required: true,
  },
})
</script>

마지막으로 템플릿을 보다 동적으로 수정해 보겠습니다.

<template>
  <section>
    <img
      :src="image"
      class="h-[500px] w-full"
    />

    <div class="mx-auto px-32">
      <div
        class="text-7xl font-bold text-center text-gray-800 rounded-lg shadow-lg py-16 px-12 bg-white/70 -mt-[170px] backdrop-blur-xl"
      >
        <h1 class="mb-3">{{ title }}</h1>
        <span class="text-green-600">{{ subtitle }}</span>
      </div>
    </div>
  </section>

스토리블록

HeroBanner의 새 구성 요소를 만들어 보겠습니다.



마지막으로 콘텐츠 페이지에 구성 요소를 추가하고 실제 편집 환경을 살펴보겠습니다.

요약

잘했어요! Headless Commerce 애플리케이션에 Storyblok CMS를 추가했습니다. 이것은 콘텐츠 생성의 시작일 뿐이며 전자 상거래용 플러그인과 같이 더 많은 것을 발견할 수 있다는 점을 명심하십시오.