nuxt-strapi-blocks-renderer

在 Nuxt 中輕鬆渲染 Strapi CMS 塊文字元素。

4K 下載•44 星•v1.1.1

freb97

Nuxt Strapi Blocks 渲染器

一個用於 Nuxt 3 & 4 的完全可定製模組，用於渲染 Strapi CMS 的“塊”富文字編輯器元素。

該實現基於 Strapi 的 Blocks React 渲染器。

✨ 釋出說明
🏀 線上 StackBlitz 演練場

安裝

要安裝 Nuxt Strapi Blocks 渲染器模組，請執行以下命令

npx nuxt@latest module add nuxt-strapi-blocks-renderer

或者手動安裝

安裝模組

npm install nuxt-strapi-blocks-renderer

將模組新增到 nuxt.config.{ts|js}

export default defineNuxtConfig({
    modules: [ 'nuxt-strapi-blocks-renderer' ]
})

使用

要渲染文字，請使用 StrapiBlocksText 元件

<StrapiBlocksText :nodes="blockNodes" />

在此示例中，blockNodes 取自 Strapi 在使用 Blocks 富文字編輯器元素時提供的 JSON 響應

<script setup lang="ts">
    import type { BlockNode } from '#strapi-blocks-renderer/types';
    import type { Restaurant } from '~/types';

    const route = useRoute();
    const { findOne } = useStrapi();

    // Fetch restaurants data from Strapi
    const response = await findOne<Restaurant>('restaurants', route.params.id);
    
    // Obtain blocks text nodes from description field
    const blockNodes: BlockNode[] = response.data.attributes.description;
</script>

<template>
    <!-- Render blocks text -->
    <StrapiBlocksText :nodes="blockNodes" />
</template>

要使用 useStrapi 可組合函式，請安裝 Strapi Nuxt 模組。

高階用法

在您的專案需要特定 HTML 標籤（如 <a>、<p> 等）的特定樣式或行為時，您可以覆蓋 Nuxt Strapi Blocks 渲染器使用的預設渲染元件。這種靈活性允許您根據專案的獨特設計和功能需求定製渲染。

全域性元件註冊

首先，請確保您的元件在 Nuxt 應用程式中已全域性註冊。此步驟對於您的自定義元件被渲染器識別和使用至關重要。

在您的 Nuxt 配置 (nuxt.config.{js|ts}) 中，新增

export default defineNuxtConfig({
    components: {
        dirs: [
            {
                path: '~/components/blocks',
                pathPrefix: false,
                global: true,
            },
            // also include ~/components to ensure other local components are resolved properly
            '~/components'
        ],
    },
})

！重要
將 ~/components 包含在 dirs 陣列中很重要。省略它可能會導致區域性作用域元件（~/components/blocks 之外）無法正確解析。

自定義段落標籤

要自定義段落 (<p>) 標籤的渲染，您需要建立一個相應的 Vue 元件。元件的名稱遵循預定義模式：'StrapiBlocksText' + [NodeName] + 'Node.vue'。要覆蓋預設段落標籤，我們建立一個名為 StrapiBlocksTextParagraphNode.vue 的檔案。

<!-- components/blocks/StrapiBlocksTextParagraphNode.vue -->
<template>
    <p class="my-custom-class-for-p">
        <slot />
    </p>
</template>

此元件將自定義類 my-custom-class-for-p 分配給段落標籤，可以根據需要進行樣式設定。

自定義元件的字首可以在您的 nuxt.config.{js|ts} 中調整

export default defineNuxtConfig({
    strapiBlocksRenderer: {
        prefix: 'MyCustomPrefix',
        blocksPrefix: 'MyCustomBlocksPrefix',
    },
})

透過此配置，StrapiBlocksText 元件變為 MyCustomPrefixStrapiBlocksText，自定義段落節點元件將被命名為 MyCustomBlocksPrefixParagraphNode。

其他自定義標籤

您可以對渲染器使用的所有其他 HTML 標籤應用類似的自定義

標題

自定義標題標籤 (<h1>, <h2>, <h3>, 等)

<!-- components/blocks/StrapiBlocksTextHeading1Node.vue -->
<template>
    <h1 class="my-custom-class-for-h1">
        <slot />
    </h1>
</template>

<!-- components/blocks/StrapiBlocksTextHeading2Node.vue -->
<template>
    <h2 class="my-custom-class-for-h2">
        <slot />
    </h2>
</template>

此模式也適用於 h3、h4、h5 和 h6 標籤。

列表

自定義列表標籤 (<ol>, <ul> 和 <li>)

<!-- components/blocks/StrapiBlocksTextOrderedListNode.vue -->
<template>
    <ol class="my-custom-class-for-ol">
        <slot />
    </ol>
</template>

<!-- components/blocks/StrapiBlocksTextUnorderedListNode.vue -->
<template>
    <ul class="my-custom-class-for-ul">
        <slot />
    </ul>
</template>

<!-- components/blocks/StrapiBlocksTextListItemInlineNode.vue -->
<template>
    <li class="my-custom-class-for-li">
        <slot />
    </li>
</template>

引用塊和程式碼塊

自定義引用塊和程式碼塊標籤 (<blockquote>, <pre>)

<!-- components/blocks/StrapiBlocksTextQuoteNode.vue -->
<template>
    <blockquote class="my-custom-class-for-blockquote">
        <slot />
    </blockquote>
</template>

<!-- components/blocks/StrapiBlocksTextCodeNode.vue -->
<script setup lang="ts">
const props = defineProps<{
    language?: string;
}>();
</script>

<template>
    <pre class="my-custom-class-for-pre"><slot /></pre>
</template>

行內文字節點

自定義行內文字節點 (<strong>, <em>, <u>, <del>, <code>)

<!-- components/blocks/StrapiBlocksTextBoldInlineNode.vue -->
<template>
    <strong class="my-custom-class-for-strong">
        <slot />
    </strong>
</template>

<!-- components/blocks/StrapiBlocksTextItalicInlineNode -->
<template>
    <em class="my-custom-class-for-em">
        <slot />
    </em>
</template>

<!-- components/blocks/StrapiBlocksTextUnderlineInlineNode -->
<template>
    <u class="my-custom-class-for-u">
        <slot />
    </u>
</template>

<!-- components/blocks/StrapiBlocksTextStrikethroughInlineNode -->
<template>
    <del class="my-custom-class-for-del">
        <slot />
    </del>
</template>

<!-- components/blocks/StrapiBlocksTextCodeInlineNode.vue -->
<template>
    <code class="my-custom-class-for-code">
        <slot />
    </code>
</template>

連結

自定義連結標籤 (<a>)

<!-- components/blocks/StrapiBlocksTextLinkInlineNode.vue -->
<script setup lang="ts">
    const props = defineProps<{
        url: string;
    }>();
</script>

<template>
    <a :href="props.url" class="my-custom-class-for-a">
        <slot />
    </a>
</template>

渲染連結標籤時，URL 會作為 url 元件屬性傳遞。

圖片

自定義影像標籤 (<img>)

<!-- components/blocks/StrapiBlocksTextImageNode.vue -->
<script setup lang="ts">
    const props = defineProps<{
        image: any;
    }>();
</script>

<template>
    <img
        class="my-custom-class-for-img"
        :src="props.image.url"
        :alt="props.image.alternativeText"
        :width="props.image.width"
        :height="props.image.height"
    >
</template>