获取 Nuxt.js 从 markdown frontmatter 生成路由

Question

我正在使用 nuxt-content 从降价文件生成静态站点，并试图弄清楚如何从 frontmatter 数据生成嵌套路由。例如给定一个 post 的 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。我有适当的功能（单击或键 left/right 箭头以浏览 posts 和嵌套的 post 媒体），但尚未生成嵌套路由，因此这些图像丢失。

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

Answer 1

看来您需要一个自定义解析器，如此处所述：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
})

Answer 2

事实证明，使用 specifying dynamic routes 的 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
    }
  }

获取 Nuxt.js 从 markdown frontmatter 生成路由

Getting Nuxt.js to generate routes from markdown frontmatter

markdown

nuxt.js

nuxt-content