@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 檔案。