2

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

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

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

你可以在这里看到我正在进行的工作。我有适当的功能（单击或键左/右箭头以浏览帖子和嵌套的帖子媒体），但尚未生成嵌套路由，因此这些图像丢失了。

我想我需要扩展 nuxt 的路由生成器来解析 md frontmatter 并遍历这些项目，但还没有弄清楚如何。任何帮助深表感谢。

4

2 回答 2

1

事实证明，使用 Nuxt Content指定动态路由的方法，解决方案实际上很简单。

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

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
    }
  }
于 2021-07-31T20:36:35.773 回答
0

看起来您需要一个自定义解析器，如此处所述：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
})
于 2021-07-30T08:33:32.837 回答