Блог

Я использую nuxt-контент для создания статического сайта из файлов уценки и пытаюсь понять, как создавать вложенные маршруты из данных 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 для каждого элемента МУЛЬТИМЕДИА, указанного в материале.

Вы можете увидеть мою работу в процессе здесь. У меня есть функциональность (нажмите или нажмите стрелки влево/вправо для навигации по сообщениям и вложенным носителям сообщений), но вложенные маршруты не были сгенерированы, поэтому эти изображения отсутствуют.

Я предполагаю, что мне нужно расширить генератор маршрутов nuxt, чтобы проанализировать переднюю часть md и просмотреть эти элементы, но пока не смог понять, как это сделать. Мы очень ценим любую помощь.

Оказалось, что решение на самом деле было простым, используя метод 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
    }
  }
 

Похоже, вам нужен пользовательский синтаксический анализатор, как сказано здесь: 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
})