Nuxt Content使用surround方法无法获取前后篇文章问题咨询

surround方法参数说明 #

surround() 方法用于以指定内容为基准，查询其在当前筛选、排序后的列表中的前后相邻内容，必须传入目标内容的唯一标识（默认使用slug字段匹配），才能正确定位基准内容，返回对应的prev、next结果，这就是需要传入params.slug的原因。

问题根因 #

你遇到prev和next均为null的核心原因是slug匹配不一致：

• 项目开启了trailingSlash: true配置，Nuxt Content存储的文章slug字段会自动携带尾部斜杠
• 你获取到的params.slug是不带尾部斜杠的，surround方法做精确匹配时找不到对应文章，因此返回空结果

解决建议 #

1. 优先调整传入surround的参数格式，手动补齐尾部斜杠即可：

const [prev, next] = await $content('onstep')
  .only(['title', 'slug', 'order'])
  .sortBy('order', 'desc')
  // 手动补齐尾部斜杠，和存储的slug格式对齐
  .surround(`${params.slug}/`)
  .fetch();

2. 若不想统一用带斜杠的slug，可修改Nuxt Content配置，关闭slug自动补全尾部斜杠的逻辑：
   在nuxt.config.js中添加如下配置：

export default {
  content: {
    markdown: {
      slugify: {
        trailingSlash: false
      }
    }
  }
}

3. 额外排查项：

• 确认所有onstep目录下的文章都配置了唯一的order字段，重复的order值会导致排序异常，进而影响surround的匹配结果
• 可先打印全量文章的slug确认格式，再调整参数：

// 调试用：打印所有文章的slug字段，确认存储格式
const allArticles = await $content('onstep').only(['slug']).fetch()
console.log(allArticles.map(item => item.slug))

内容的提问来源于stack exchange，提问作者Stefano Martini