feat(i18n): 添加应用名称和描述的国际化支持
添加中英文的应用名称和描述配置 优化全局和首页的SEO meta设置 配置响应式的标题模板和国际化meta信息
This commit is contained in:
+31
@@ -1,3 +1,34 @@
|
||||
<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: computed(() => (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 />
|
||||
|
||||
Reference in New Issue
Block a user