Соседние материалы в Nuxt

В длинных разделах удобно переходить между заметками без возврата к списку. Функция queryCollectionItemSurroundings ищет соседей текущей записи по её path внутри одной коллекции.

На странице материала адрес берут из текущего маршрута через функцию useRoute. Запрос вернёт массив из двух элементов: предыдущий и следующий, либо null на краях списка:

<script setup>
	const route = useRoute();

	const { data: page } = await useAsyncData(
		route.path,
		() => queryCollection('blog')
			.path(route.path)
			.first(),
	);

	const { data: around } = await useAsyncData(
		`${route.path}-around`,
		() => queryCollectionItemSurroundings(
			'blog',
			route.path,
		),
	);
</script>
<template>
	<h1>
		{{ page?.title }}
	</h1>
	<ContentRenderer
		v-if="page"
		:value="page"
	/>
	<nav class="pager">
		<NuxtLink
			v-if="around?.[0]"
			:to="around[0].path"
		>
			{{ around[0].title }}
		</NuxtLink>
		<NuxtLink
			v-if="around?.[1]"
			:to="around[1].path"
		>
			{{ around[1].title }}
		</NuxtLink>
	</nav>
</template>

Второй аргумент функции - строка path открытой страницы, не имя файла на диске. Порядок соседей совпадает с порядком файлов в коллекции. Заголовки в блоке pager ведут на соседние URL без ручного перечисления всех заметок.

На страницах коллекции employees выведите внизу ссылки с заголовками предыдущего и следующего сотрудника.

Добавьте такой же блок переходов для материалов коллекции guides, используя route.path текущей заметки.