使用 nuxt/content 显示从数据库获取的 markdown

我在我的应用程序中使用 nuxt / content ，它工作正常。在应用程序的另一部分，我想从数据库中获取一些降价并显示它。

let mytext = "Some *markdown* fetched from a db here."

<nuxt-content :document="mytext" />

这不起作用，因为我缺少一个解析步骤；当你这样做时$content("a_page_title_here").fetch()它解析获取的文本并将其作为结构化 json 呈现给组件。

我该如何使用$content解析文本，以便将其传递给组件进行显示？

我敢打赌有一种方法可以做到这一点，但文档不包含描述您可以执行的所有操作的参考部分$content.

如果有一种简单的方法来使用底层 Remark 组件，我就可以做到。

nuxt@3 and @nuxt/content@2

您可以使用@nuxt/content's 降价变压器 https://github.com/nuxt/content/blob/e82af75360c19e9ad345466e81931dbc5861a31e/src/runtime/transformers/markdown.ts解析任意字符串：

// ~/utils/parseMarkdown.js
import markdownParser from '@nuxt/content/transformers/markdown'

// first arg to parse() is for id, which is unused
export const parseMarkdown = md => markdownParser.parse('custom.md', md)

然后渲染它@nuxt/content's ContentRendererMarkdown https://github.com/nuxt/content/blob/e82af75/src/runtime/components/ContentRendererMarkdown.vue像这样的组件：

<script setup>
import { parseMarkdown } from '~/utils/parseMarkdown'

const result = ref(null)
const loadMarkdown = async () => {
  const data = await $fetch('https://example.com/page.md')
  result.value = await parseMarkdown(data)
}
loadMarkdown()
</script>

<template>
  <ContentRendererMarkdown :value="result" v-if="result" />
</template>

demo 1 https://stackblitz.com/edit/nuxt3-content-to-render-markdown-string?file=utils/parseMarkdown.ts,pages/index.vue

nuxt@2 and @nuxt/content@1

您可以使用底层Markdown班级来自@nuxt/content https://github.com/nuxt/content/blob/939caf36c547a6b4af6e303c52ed5989a5dea2f0/packages/content/parsers/markdown/index.js#L9. Its async toJSON()功能 https://github.com/nuxt/content/blob/939caf36c547a6b4af6e303c52ed5989a5dea2f0/packages/content/parsers/markdown/index.js#L121接受文件名或字符串（通过gray-matter https://www.npmjs.com/package/gray-matter#matter）包含要解析的 Markdown，并解析可以传递给的 JSON 对象<nuxt-content>.document.

初始化Markdown使用默认的rehype插件，使用getDefaults() https://github.com/nuxt/content/blob/939caf36c547a6b4af6e303c52ed5989a5dea2f0/packages/content/lib/utils.js#L4 and processMarkdownOptions() https://github.com/nuxt/content/blob/939caf36c547a6b4af6e303c52ed5989a5dea2f0/packages/content/lib/utils.js#L84:

// ~/utils/parseMarkdown.js
import Markdown from '@nuxt/content/parsers/markdown'
import { getDefaults, processMarkdownOptions } from '@nuxt/content/lib/utils'

export async function parseMarkdown(md) {
  const options = getDefaults()
  processMarkdownOptions(options)
  return new Markdown(options.markdown).toJSON(md) // toJSON() is async
}

然后在您的组件中使用它，如下所示：

<script>
import { parseMarkdown } from '~/utils/parseMarkdown'

export default {
  async asyncData({ $axios }) {
    const resp = await $axios.get('https://example.com/page.md')
    const page = await parseMarkdown(resp.data)
    return { page }
  }
}
</script>

<template>
  <nuxt-content :document="page" />
</template>

demo 2 https://stackblitz.com/edit/nuxt-content-to-render-markdown-string?file=pages%2Findex.vue