nuxt-strapi-blocks-renderer

在 Nuxt 中轻松渲染 Strapi CMS 的 Blocks 文本元素。

3.3K 下载•44 星•v1.1.1

freb97

Nuxt Strapi Blocks 渲染器

适用于 Nuxt 3 和 4 的完全可定制模块，用于渲染 Strapi CMS 的“Blocks”富文本编辑器元素。

该实现基于 Strapi 的 Blocks React 渲染器。

✨ 发布说明
🏀 在线 Stackblitz 演练场

安装

要安装 Nuxt Strapi Blocks Renderer 模块，请运行以下命令

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 Renderer 使用的默认渲染组件。这种灵活性允许您根据项目的独特设计和功能需求定制渲染。

全局组件注册

首先，确保您的组件在 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>