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

Question

我在我的应用程序中使用nuxt / content，它工作得很好。在应用程序的另一部分中，我想从数据库中获取一些标记并显示出来。

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

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

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

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

我敢打赌，有一种方法可以做到这一点，但是文档中并没有包含一个描述可以使用$content完成的所有操作的参考部分。

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

Answer 1

您可以使用底层的Markdown class from @nuxt/content。它的async toJSON() function接受一个包含Markdown的文件名或字符串(通过gray-matter)进行解析，并解析一个可以传递给<nuxt-content>.document的JSON对象。

要使用缺省的rehype插件初始化Markdown，请使用getDefaults()和processMarkdownOptions()

// ~/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
}

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

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

<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>

demo

Answer 2

这不会行得通吗？

const mytext = await this.$content('a_page_title_here').fetch()