与Nuxt和Storyblokð的Dream Jamstack-DEV365 开发者社区

jamstack每天都变得越来越受欢迎，所以我决定尝试一下，看看这是否真的改变了现代网站的构建方式。我不能说这对我来说是一个改变游戏规则的人（但这只是我的意见），因为我已经看到了现代开发中的几种不同的方法，我发现像Headless，Zerojs，Island架构，服务器组件等更有用。如果您认为它们有用，我可能会稍后写这些概念，让我知道;）

让我们回到最初的话题，我认为在我看来是什么构建Jamstack应用程序的梦想堆栈。

如果您对本文的更多视觉说明感兴趣，我对此主题进行了讨论，您可以在下面查看：

jamstack

jamstack是一种架构方法，可将网络体验层与数据和业务逻辑分解，提高灵活性，可伸缩性，性能和可维护性。

您可以在此处查看有关此概念的更多信息 - > https://jamstack.org/

在我们的情况下，我们将使用以下技术用于JavaScript，API和Markup

我们的果酱

我们将使用NUXT 3作为我们的主框架，NuxtContent（能够编写Markdown），一点点tailwindcss样式和StoryBlok，这将是我们的API。最后，我们将将应用程序部署到Vercel。

您可以在下面查看所有这些工具和技术：

代码

下面，我添加了一些我发现本教程最重要的代码段。完整的代码可以在此处看到 - > https://github.com/Baroshem/jamstack-storyblok-nuxt以及在顶部链接的视频中。

我们将使用下面的vue.js组件显示猫的图像。它以后将用于静态数据和从Storyblok获取的动态数据：

// components/content/CatImage.vue

<template>
    <div class="flex flex-wrap w-1/3">
      <p>{{ title }}</p>
      <div class="w-full p-1 md:p-2 relative">
        <img
          class="block object-cover object-center w-full h-full rounded-lg"
          :alt="title"
          :src="src"
          >
      </div>
    </div>
  </template>

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

此组件接受两个用于猫的单独图像的道具（SRC和标题）。
除此之外，我们还创建了一个画廊组件，用于显示从Storyblok获取的一系列猫。

// components/content/CatImageGallery.vue

<template>
    <section class="overflow-hidden text-gray-700 ">
      <div class="container px-5 py-2 mx-auto lg:pt-12 lg:px-32">
        <div class="flex flex-wrap -m-1 md:-m-2">
          <cat-image
            v-for="image in story.content.body"
            :key="image.id"
            :title="image.title"
            :src="image.src.filename"
          />
        </div>
      </div>
    </section>
  </template>

  <script setup lang="ts">
const story = await useAsyncStoryblok("home", { version: "draft" });
  </script>

最重要的文件是index.md文件，我们正在创建由正常的.md内容，带有本地数据的vue.js组件组成的内容，以及一系列cat映像，并从Storyblok中获取了数据。

// content/index.md

# Testing Nuxt Content

*Hello from Nuxt Content*

:cat-image{src=https://a.storyblok.com/f/126375/600x644/497572edee/cat-dog.jpeg title="My Favorite Cat from Markdown"}

:cat-image{src=https://a.storyblok.com/f/126375/600x644/497572edee/cat-dog.jpeg title="Second Favorite Cat"}

:cat-image-gallery

感谢此，我们现在能够将三个JAM元素（JS，API，Markup）与Vue.js组件，.md内容和来自Storyblok的数据一起使用。

为了查看实际结果，我们需要将以下组件添加到我们的主应用程序中。

// app.vue
<template>
  <div>
    <ContentDoc path="/" class="prose text-left" />
  </div>
</template>

也是。不要忘记将以下配置添加到nuxt.config.ts。没有它，这一切都将无法使用;）

// nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: [
        '@nuxt/content',
        '@nuxtjs/tailwindcss',
        ["@storyblok/nuxt", { accessToken: process.env.STORYBLOK_ACCESS_TOKEN }]
      ],
})

概括

做得好！通过遵循此简单的教程，您已经设法创建了一个由静态.md内容，vue.js本地数据和从StoryBlok获取的动态数据的CAT Image Gallery应用程序。让我知道您是否希望我深入研究Jamstack生态系统，我将完全做到！