Nuxt实战(4)-SEO、SiteMap、I18N国际化配置

export default defineNuxtConfig({
  // 站点基础信息
  site: {
    url: 'https://game-community.cn',
    name: '游戏讨论&创作社区',
    description: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台',
    defaultLocale: 'zh-CN', // 默认语言
    trailingSlash: false, // URL 是否包含尾部斜杠
  },
 
  // 应用配置
  app: {
    head: {
      title: '游戏讨论&创作社区',
      titleTemplate: '%s - 游戏讨论&创作社区',
      meta: [
        { name: 'keywords', content: '游戏社区,游戏讨论,游戏创作,玩家交流,游戏攻略,游戏评测' },
        { name: 'description', content: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台' },
        { name: 'author', content: '游戏社区团队' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { charset: 'utf-8' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'canonical', href: 'https://game-community.cn' }
      ]
    }
  }
})

<script setup lang="ts">
// 动态标题模板
useHead({
  titleTemplate: (title) => {
    return title ? `${title} - 游戏讨论&创作社区` : '游戏讨论&创作社区 - 玩家的精神家园'
  }
})
 
// 根据路由动态设置 SEO
const route = useRoute()
const { data: pageData } = await $fetch(`/api/pages${route.path}`)
 
useSeoMeta({
  title: pageData.title,
  description: pageData.description,
  ogImage: pageData.image || '/default-og.jpg'
})
</script>

export default defineNuxtConfig({
  // 站点索引配置
  site: {
    indexable: true // 允许搜索引擎索引
  },
 
  // Robots 规则
  robots: {
    // 允许所有爬虫
    UserAgent: '*',
    // 禁止访问的路径
    Disallow: ['/admin', '/api', '/private'],
    // 允许访问的路径
    Allow: ['/api/public'],
    // 网站地图位置
    Sitemap: 'https://game-community.cn/sitemap.xml'
  },
 
  // 路由规则
  routeRules: {
    // 禁止管理后台被索引
    '/admin/**': { robots: false },
    // 禁止 API 路由被索引
    '/api/**': { robots: false },
    // 首页高优先级
    '/': { sitemap: { priority: 1.0, changefreq: 'daily' } },
    // 博客页面
    '/blog/**': { sitemap: { priority: 0.8, changefreq: 'weekly' } }
  }
})

<script setup lang="ts">
// 禁止特定页面被索引
defineRouteRules({
  robots: false, // 禁止索引
  sitemap: false // 不包含在网站地图中
})
 
// 或者使用 useSeoMeta
useSeoMeta({
  robots: 'noindex, nofollow' // 禁止索引和跟踪链接
})
</script>

// server/api/sitemap.ts
export default defineEventHandler(async (event) => {
  // 获取动态内容
  const posts = await $fetch('/api/posts')
  const projects = await $fetch('/api/projects')
  
  const urls = [
    // 静态页面
    {
      loc: '/',
      lastmod: new Date(),
      changefreq: 'daily',
      priority: 1.0
    },
    
    // 动态博客页面
    ...posts.map(post => ({
      loc: `/blog/${post.slug}`,
      lastmod: new Date(post.updatedAt),
      changefreq: 'weekly',
      priority: 0.8
    })),
    
    // 动态项目页面
    ...projects.map(project => ({
      loc: `/projects/${project.slug}`,
      lastmod: new Date(project.updatedAt),
      changefreq: 'monthly',
      priority: 0.6
    }))
  ]
 
  return urls
})

<script setup lang="ts">
// 设置页面在网站地图中的属性
defineRouteRules({
  sitemap: {
    changefreq: 'daily',
    priority: 0.9,
    lastmod: new Date('2024-01-01')
  }
})
 
// 使用 SEO 元数据设置最后修改时间
useSeoMeta({
  articleModifiedTime: '2024-01-01T00:00:00.000Z'
})
</script>

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  
  i18n: {
    // 支持的语言列表
    locales: [
      {
        code: 'zh-CN',
        name: '简体中文',
        iso: 'zh-CN',
        file: 'zh-CN.json',
        dir: 'ltr'
      },
      {
        code: 'zh-TW',
        name: '繁體中文',
        iso: 'zh-TW',
        file: 'zh-TW.json',
        dir: 'ltr'
      }
    ],
 
    // 默认语言
    defaultLocale: 'zh-CN',
 
    // 语言文件目录
    langDir: 'locales/',
 
    // 路由策略
    strategy: 'prefix_except_default', // 默认语言不加前缀
 
    // 检测用户语言
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
      alwaysRedirect: false,
      fallbackLocale: 'zh-CN'
    },
 
    // SEO 配置
    seo: true,
    
    // 编译优化
    compilation: {
      strictMessage: false,
      escapeHtml: false
    }
  }
})

// locales/zh-CN.json
{
  "nav": {
    "home": "首页",
    "games": "游戏",
    "discussions": "讨论",
    "creations": "创作",
    "guides": "攻略",
    "reviews": "评测",
    "about": "关于"
  },
  "common": {
    "loading": "加载中...",
    "error": "出错了",
    "retry": "重试",
    "cancel": "取消",
    "confirm": "确认",
    "search": "搜索",
    "login": "登录",
    "register": "注册"
  },
  "home": {
    "title": "欢迎来到游戏讨论&创作社区",
    "subtitle": "玩家的精神家园",
    "description": "专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台"
  },
  "games": {
    "title": "游戏库",
    "hotGames": "热门游戏",
    "newGames": "新游戏",
    "categories": "游戏分类"
  },
  "discussions": {
    "title": "游戏讨论",
    "hotTopics": "热门话题",
    "latestPosts": "最新帖子",
    "reply": "回复",
    "like": "点赞"
  },
  "creations": {
    "title": "创作中心",
    "myWorks": "我的作品",
    "upload": "上传作品",
    "gallery": "作品展示"
  }
}

// locales/zh-TW.json
{
  "nav": {
    "home": "首頁",
    "games": "遊戲",
    "discussions": "討論",
    "creations": "創作",
    "guides": "攻略",
    "reviews": "評測",
    "about": "關於"
  },
  "common": {
    "loading": "載入中...",
    "error": "出錯了",
    "retry": "重試",
    "cancel": "取消",
    "confirm": "確認",
    "search": "搜尋",
    "login": "登入",
    "register": "註冊"
  },
  "home": {
    "title": "歡迎來到遊戲討論&創作社群",
    "subtitle": "玩家的精神家園",
    "description": "專注遊戲討論、創作分享和玩家交流的綜合性遊戲社群平台"
  },
  "games": {
    "title": "遊戲庫",
    "hotGames": "熱門遊戲",
    "newGames": "新遊戲",
    "categories": "遊戲分類"
  },
  "discussions": {
    "title": "遊戲討論",
    "hotTopics": "熱門話題",
    "latestPosts": "最新貼文",
    "reply": "回覆",
    "like": "按讚"
  },
  "creations": {
    "title": "創作中心",
    "myWorks": "我的作品",
    "upload": "上傳作品",
    "gallery": "作品展示"
  }
}

<template>
  <div>
    <!-- 基础翻译 -->
    <h1>{{ $t('home.title') }}</h1>
    <p>{{ $t('home.description') }}</p>
    
    <!-- 带参数的翻译 -->
    <p>{{ $t('welcome.message', { name: userName }) }}</p>
    
    <!-- 复数形式 -->
    <p>{{ $tc('items.count', itemCount, { count: itemCount }) }}</p>
    
    <!-- 当前语言信息 -->
    <p>{{ $i18n.locale }} - {{ $i18n.locales.find(l => l.code === $i18n.locale)?.name }}</p>
  </div>
</template>
 
<script setup lang="ts">
const { t, locale, locales } = useI18n()
const userName = ref('张三')
const itemCount = ref(5)
 
// 响应式翻译
const title = computed(() => t('home.title'))
 
// 切换语言
const switchLanguage = (newLocale: string) => {
  locale.value = newLocale
}
</script>

<!-- components/LanguageSwitcher.vue -->
<template>
  <UDropdown>
    <UButton
      :label="currentLocale?.name"
      :icon="currentLocale?.flag"
      variant="ghost"
      size="sm"
    />
    
    <template #content>
      <UDropdownItem
        v-for="locale in availableLocales"
        :key="locale.code"
        :label="locale.name"
        :icon="locale.flag"
        @click="switchLocale(locale.code)"
      />
    </template>
  </UDropdown>
</template>
 
<script setup lang="ts">
const { locale, locales, setLocale } = useI18n()
 
// 当前语言
const currentLocale = computed(() => 
  locales.value.find(l => l.code === locale.value)
)
 
// 可用语言列表
const availableLocales = computed(() => 
  locales.value.filter(l => l.code !== locale.value)
)
 
// 切换语言
const switchLocale = async (newLocale: string) => {
  await setLocale(newLocale)
  
  // 可选-刷新页面或重新获取数据
  await refreshCookie('i18n_redirected')
}
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    customRoutes: 'config',
    pages: {
      about: {
        'zh-CN': '/about',
        'zh-TW': '/about'
      },
      'games/index': {
        'zh-CN': '/games',
        'zh-TW': '/games'
      },
      'games/[id]': {
        'zh-CN': '/games/[id]',
        'zh-TW': '/games/[id]'
      },
      'discussions/index': {
        'zh-CN': '/discussions',
        'zh-TW': '/discussions'
      },
      'discussions/[id]': {
        'zh-CN': '/discussions/[id]',
        'zh-TW': '/discussions/[id]'
      },
      'creations/index': {
        'zh-CN': '/creations',
        'zh-TW': '/creations'
      }
    }
  }
})

<template>
  <nav>
    <!-- 使用 localePath 生成本地化链接 -->
    <NuxtLink :to="localePath('/')">
      {{ $t('nav.home') }}
    </NuxtLink>
    
    <NuxtLink :to="localePath('/games')">
      {{ $t('nav.games') }}
    </NuxtLink>
    
    <NuxtLink :to="localePath('/discussions')">
      {{ $t('nav.discussions') }}
    </NuxtLink>
    
    <NuxtLink :to="localePath('/creations')">
      {{ $t('nav.creations') }}
    </NuxtLink>
    
    <!-- 切换到其他语言的相同页面 -->
    <NuxtLink :to="switchLocalePath('zh-TW')">
      繁體中文
    </NuxtLink>
  </nav>
</template>
 
<script setup lang="ts">
const { localePath, switchLocalePath } = useI18n()
</script>