nuxt.js - 如何使用 Nuxt Content 渲染 Markdown 内容中的部分内容？

Question

在 Nuxt Content 中，我们可以通过在文件名前添加下划线来创建和声明 Markdown 部分，如下所述: https://content.nuxtjs.org/guide/writing/content-directory#partials

但是，文档除了提到可以通过 JS API 查询它们之外，没有包含如何实际使用这些部分的信息。

我期望能够轻松地从其他 Markdown 内容内联渲染这些部分内容，以便这些部分内容可以用于经常重用的内容片段，以避免重复所述内容。

如何从另一个 Markdown 文件中渲染 Markdown 部分？

Answer 1

没有任何方法可以做到这一点，您可以实现一个。

在 components/content 中创建一个名为 Partial.vue 的 Vue 组件。将其粘贴到您的 Partial.vue 文件中以呈现 Markdown 内容:

<template>
    <div>
        <ContentQuery :path="`/_partials/${content}`" find="one" v-slot="{ data }">
            <ContentRenderer :value="data">
                <template #empty>
                    <p>No content found.</p>
                </template>
            </ContentRenderer>
        </ContentQuery>
    </div>
</template>

<script setup>
defineProps({
    content: {
        default: "default"
    }
});
</script>

在 content/_partials/resue.md 中创建您希望稍后经常重复使用的部分 Markdown 内容:

Hi, This markdown file contains **reusable** content.

现在，在您的 Markdown 内容文件中，您可以通过调用此 MDC 组件来重用 reuse.md 的内容。例如，在您的 a-blog-post.md 文件中，粘贴以下内容:

::partial{content=reuse}

现在，无论您在何处调用此 MDC 部分，都会显示以下内容:

Hi, This markdown file contains reusable content.