76e7b4b817
style(pages): 使用实用类替换内联样式 refactor(composables): 简化页面标题模板逻辑 docs(components): 添加详细注释说明动画逻辑
37 lines
872 B
Vue
37 lines
872 B
Vue
<script setup lang="ts">
|
|
import { useHead, useSeoMeta } from '#imports'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { computed } from 'vue'
|
|
|
|
const { t } = useI18n()
|
|
|
|
// 站点通用基础信息
|
|
const siteImage = '/og-image.png'
|
|
|
|
// 配置全局 Title 模板
|
|
useHead({
|
|
titleTemplate: (titleChunk?: string) => {
|
|
const siteName = t('app.name')
|
|
return titleChunk ? `${titleChunk} - ${siteName}` : siteName
|
|
}
|
|
})
|
|
|
|
// 配置全局基础 SEO 和 Meta (响应式支持国际化)
|
|
useSeoMeta({
|
|
description: () => t('app.description'),
|
|
ogTitle: () => t('app.name'),
|
|
ogDescription: () => t('app.description'),
|
|
ogImage: siteImage,
|
|
twitterCard: 'summary_large_image',
|
|
twitterTitle: () => t('app.name'),
|
|
twitterDescription: () => t('app.description'),
|
|
twitterImage: siteImage,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLayout>
|
|
<NuxtPage />
|
|
</NuxtLayout>
|
|
</template>
|