时间戳

首页 > 解决方案 > 让 Nuxt.js 从 markdown frontmatter 生成路由

nuxt.js - 让 Nuxt.js 从 markdown frontmatter 生成路由

问题描述

我正在使用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 并遍历这些项目，但还没有弄清楚如何。任何帮助深表感谢。

标签： nuxt.jsmarkdownnuxt-content

解决方案

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

推荐阅读