让Nuxt.js从markdown frontmatter生成路由

Question

我正在使用nuxt-content从markdown文件生成一个静态站点，并试图弄清楚如何从frontmatter数据生成嵌套路由。例如，给定一篇帖子的正面内容：

title: Post Title
slug: post-title
media:
  - file: uploads/image_1.jpg
  - file: uploads/image_2.jpg

我想为前面列出的每个媒体项生成嵌套路由/posts/post-title/1和/posts/post-title/2。

你可以看到我的work in progress here。我有适当的功能(单击或键左/右箭头键在帖子和嵌套帖子媒体之间导航)，但嵌套路由尚未生成，因此这些图像丢失。

我假设我需要扩展nuxt的路由生成器来解析md前件并遍历这些项，但还不能弄清楚如何做。任何帮助都是非常感谢的。

Answer 1

事实证明，使用Nuxt Content的specifying dynamic routes方法，解决方案实际上很简单。

下面是我在nuxt.config中使用的完整函数，用于从md前面板生成嵌套路由：

generate: {
    async routes() {
      const { $content } = require('@nuxt/content')
      const works = await $content('works').only(['path', 'media']).fetch()
      const workMedia = []
      works.forEach(work => {
        if (work.media?.length > 1) {
          work.media.slice(1).forEach((e, i) => {
            workMedia.push(work.path + "/" + (i + 1))
          })
        }
      })
      return workMedia
    }
  }

Answer 2

看起来您需要有一个自定义解析器，如下所示：https://github.com/nuxt/content/issues/191#issuecomment-661096025

这里有一个解决方案：https://github.com/nuxt/content/issues/214#issuecomment-656759077

this.nuxt.hook('content:file:beforeInsert', function (document) {
  // document.items
})