66 lines
2.7 KiB
Vue
66 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
import { Icon } from '@iconify/vue'
|
||
import { siteConfig } from '~/config/site'
|
||
import { formatPostDate, getSeriesSummaries, isVisiblePost } from '~/utils/posts'
|
||
|
||
useSeoMeta({
|
||
title: `文章系列 - ${siteConfig.siteName}`,
|
||
description: `${siteConfig.siteName} 的系列文章合集`,
|
||
})
|
||
|
||
const { data: posts } = await useAsyncData('series-list-posts', () =>
|
||
queryCollection('posts')
|
||
.order('published', 'DESC')
|
||
.all()
|
||
)
|
||
|
||
const seriesList = computed(() => getSeriesSummaries((posts.value || []).filter(isVisiblePost)))
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container mx-auto max-w-5xl px-4 py-12">
|
||
<header class="mb-12 text-center anim-fade-in-up">
|
||
<h1 class="mb-4 text-4xl font-bold">文章系列</h1>
|
||
<p class="text-muted-foreground">把同一个主题的文章串起来，读起来更连贯</p>
|
||
<p class="mt-2 text-sm text-muted-foreground">共 {{ seriesList.length }} 个系列</p>
|
||
</header>
|
||
|
||
<div v-if="seriesList.length" class="grid gap-5 md:grid-cols-2 anim-fade-in-up anim-delay-1">
|
||
<NuxtLink
|
||
v-for="series in seriesList"
|
||
:key="series.name"
|
||
:to="series.path"
|
||
class="group rounded-xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-lg"
|
||
style="border-color: var(--color-border); background-color: var(--color-bg-card);"
|
||
>
|
||
<div class="mb-4 flex items-start justify-between gap-4">
|
||
<div class="min-w-0">
|
||
<h2 class="truncate text-xl font-semibold transition-opacity group-hover:opacity-70">
|
||
{{ series.name }}
|
||
</h2>
|
||
<p class="mt-1 text-sm text-muted-foreground">
|
||
{{ series.count }} 篇文章 · 最近更新 {{ formatPostDate(series.latestPost.updated || series.latestPost.published) }}
|
||
</p>
|
||
</div>
|
||
<Icon icon="mdi:chevron-right" class="mt-1 h-5 w-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-1" />
|
||
</div>
|
||
|
||
<p v-if="series.latestPost.description" class="mb-4 line-clamp-2 text-sm text-muted-foreground">
|
||
{{ series.latestPost.description }}
|
||
</p>
|
||
|
||
<div v-if="series.tags.length" class="flex flex-wrap gap-1.5">
|
||
<span v-for="tag in series.tags" :key="tag" class="tag-pill">
|
||
{{ tag }}
|
||
</span>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<div v-else class="rounded-xl border p-8 text-center text-muted-foreground anim-fade-in-up anim-delay-1" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
<Icon icon="mdi:playlist-remove" class="mx-auto mb-3 h-8 w-8" />
|
||
还没有系列。给文章 frontmatter 添加 series 字段后会自动出现。
|
||
</div>
|
||
</div>
|
||
</template>
|