b05faddfc0
This commit enhances SEO and user experience by setting dynamic page titles for detail pages and updating the global title configuration. - Event, Hall of Fame, and News detail pages now use the specific item's title as the page title. - The global `titleTemplate` and default `title` in `nuxt.config.ts` have been updated for better branding. - These changes ensure each page has a unique, descriptive title, which is beneficial for search engine ranking and browser tab clarity.
50 lines
1.7 KiB
Vue
50 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<section class="py-20 px-4">
|
|
<div class="container mx-auto max-w-6xl">
|
|
<!-- 内容渲染器 -->
|
|
<div class="prose prose-invert prose-lg max-w-none">
|
|
<ContentRenderer :value="person ?? {}">
|
|
<template #empty>
|
|
<div class="text-center py-12">
|
|
<p class="text-gray-400 text-xl">内容加载中...</p>
|
|
</div>
|
|
</template>
|
|
</ContentRenderer>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 媒体展示区域 -->
|
|
<section class="py-20 px-4">
|
|
<div class="mt-16 container mx-auto max-w-6xl">
|
|
<h2 class="text-3xl font-orbitron font-bold mb-8 text-center">图集</h2>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
<div v-for="i in person?.gallery" :key="i" class="group relative overflow-hidden rounded-xl cursor-pointer">
|
|
<img :src="i" :alt="`游戏截图 ${i}`"
|
|
class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110" />
|
|
<div
|
|
class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
|
|
<Icon name="mdi:like"
|
|
class="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const route = useRoute()
|
|
const { data: person } = await useAsyncData('hall-of-fames-detail', () =>
|
|
queryCollection('hallOfFames')
|
|
.path(`/hall-of-fames/${route.params.slug}`)
|
|
.first()
|
|
)
|
|
|
|
useHead({
|
|
title: person.value?.name
|
|
})
|
|
</script>
|
|
|
|
<style></style> |