@content-island/nuxt

Content Island - 一个令人耳目一新的简洁无头 CMS

Nuxt Content Island 模块

Nuxt Content Island 模块在您的 Nuxt 应用程序和 Content Island API 之间提供了无缝集成。此模块简化了 Content Island 中存储内容的获取和管理，让您能够专注于创建丰富而动态的用户体验，而无需处理复杂的后端集成。

描述

此模块专为需要由 Content Island 提供强大内容管理的 Nuxt 应用程序设计。它抽象了后端 API 集成的复杂性，提供了一种简单安全的方式来访问、查询和显示内容。通过自动插件注入和类型安全配置，开发人员可以快速构建动态站点和应用程序，利用 Content Island 灵活的内容模型和 API。

功能

轻松集成：通过简单的配置快速连接到 Content Island API。
安全配置：使用 Nuxt 的运行时配置安全管理您的 API 凭据。
自动插件注入：该模块自动将客户端实例作为 $contentIsland 注入到您的 Nuxt 上下文中。
类型安全选项：使用 TypeScript 支持构建，利用 @content-island/api-client 中的 Options 类型。
灵活的内容检索：使用直观的查询参数轻松获取单个项目或列表。
可自定义的数据处理：与流行的库集成，用于 Markdown 渲染、语法高亮和富文本格式。

安装

通过 npm 安装模块

npx nuxi@latest module add @content-island/nuxt

# or using

npm install @content-island/nuxt

接下来，将模块添加到您的 Nuxt 配置中

export default defineNuxtConfig({
  modules: ['@content-island/nuxt'],
  contentIsland: {
    // Replace with your actual Content Island API token
    accessToken: process.env.CONTENT_ISLAND_ACCESS_TOKEN || 'YOUR_CONTENT_ISLAND_ACCESS_TOKEN',
    // Optional: see all available options below
  },
});

使用

安装和配置后，该模块会将客户端实例注入到您的 Nuxt 应用程序中，让您轻松获取内容。以下是如何在页面组件中使用它的示例：

<script setup lang="ts">
import { marked } from 'marked';
import { useRoute, useNuxtApp, useAsyncData } from '#imports';
import type { Post } from '~/api.models';

const { $contentIsland } = useNuxtApp();
const route = useRoute();
const slug = route.params.slug as string;

const { data: post } = await useAsyncData(`post-${slug}`, async () => {
  const foundPost = await $contentIsland.getContent<Post>({
    contentType: 'post',
    'fields.slug': slug,
  });
  return {
    ...foundPost,
    content: await marked(foundPost.content || ''),
  };
});
</script>

<template>
  <article v-if="post">
    <h1>{{ post.title }}</h1>
    <div v-html="post.content" />
  </article>
</template>

此示例演示了通过 slug 获取帖子并使用 marked 处理其 Markdown 内容。

模块选项

该模块接受以下选项（来自 @content-island/api-client）

选项	类型	必需	默认	描述
accessToken	string	是	–	您的 Content Island API 令牌。
domain	string	否	–	自定义 API 域（如果与默认值不同）。
secureProtocol	boolean	否	true	对 API 请求使用 HTTPS。
apiVersion	string	否	v1	要使用的 API 版本。

注意： 建议将敏感数据（例如 accessToken）存储在环境变量中。

示例项目

playground 目录中提供了一个功能齐全的示例。该示例包括：

动态获取和渲染内容的页面。
与 Markdown 渲染和语法高亮集成。
一个演示模块设置和用法的 Nuxt 示例配置。

运行示例

npm install && cd playground && npm install
cd ..
npm start

贡献者

特别感谢 Paul Melero 的原创想法以及他对该模块的协作。他的贡献对该项目的形成至关重要。

许可证

MIT 许可证。有关详细信息，请参阅 LICENSE 文件。