YogeLiu/doc_ai_frontend

Fork 0

Files

liuyuanchuang 2b1da79bbc feat: add toast for no content

2026-02-05 18:22:30 +08:00

5.1 KiB

Raw Permalink Blame History

多语言支持说明 / Multi-language Support

概述 / Overview

TexPixel 现在支持完整的中英文双语切换，包括：

动态页面标题和 meta 标签更新
SEO 优化的多语言支持
智能语言检测（基于 IP 和浏览器偏好）

TexPixel now supports complete bilingual switching between Chinese and English, including:

Dynamic page title and meta tag updates
SEO-optimized multi-language support
Intelligent language detection (based on IP and browser preferences)

功能特性 / Features

1. 自动语言检测 / Automatic Language Detection

应用会按以下优先级检测用户语言：

localStorage 中保存的用户选择
IP 地理位置检测
浏览器语言设置

The app detects user language in the following order of priority:

User's saved preference in localStorage
IP geolocation detection
Browser language settings

2. SEO 优化 / SEO Optimization

hreflang 标签：告知搜索引擎不同语言版本的页面
多语言 meta 标签：description、keywords、og:locale 等
动态标题更新：切换语言时自动更新页面标题

Features include:

hreflang tags: Inform search engines about different language versions
Multilingual meta tags: description, keywords, og:locale, etc.
Dynamic title updates: Automatically update page title when switching languages

3. Open Graph 和 Twitter Cards

支持社交媒体分享的多语言 meta 标签：

Facebook (Open Graph)
Twitter Cards
其他支持 OG 协议的平台

Multilingual meta tags for social media sharing:

Facebook (Open Graph)
Twitter Cards
Other platforms supporting OG protocol

技术实现 / Technical Implementation

文件结构 / File Structure

src/
├── lib/
│   ├── seoHelper.ts          # SEO 元数据管理 / SEO metadata management
│   ├── translations.ts        # 翻译文本 / Translation texts
│   └── ipLocation.ts          # IP 定位 / IP location detection
├── contexts/
│   └── LanguageContext.tsx    # 语言上下文 / Language context
└── components/
    └── Navbar.tsx             # 语言切换器 / Language switcher

核心函数 / Core Functions

`updatePageMeta(language: Language)`

更新页面的所有 SEO 相关元数据，包括：

document.title
HTML lang 属性
meta description
meta keywords
Open Graph 标签
Twitter Card 标签

Updates all SEO-related metadata on the page, including:

document.title
HTML lang attribute
meta description
meta keywords
Open Graph tags
Twitter Card tags

`getSEOContent(language: Language)`

获取指定语言的 SEO 内容（标题、描述、关键词）

Get SEO content for a specific language (title, description, keywords)

使用方法 / Usage

在组件中使用语言功能 / Using Language Features in Components

import { useLanguage } from '../contexts/LanguageContext';

function MyComponent() {
  const { language, setLanguage, t } = useLanguage();
  
  return (
    <div>
      <h1>{t.common.title}</h1>
      <button onClick={() => setLanguage('en')}>English</button>
      <button onClick={() => setLanguage('zh')}>中文</button>
    </div>
  );
}

添加新的翻译文本 / Adding New Translation Texts

在 src/lib/translations.ts 中添加：

export const translations = {
  en: {
    myFeature: {
      title: 'My Feature',
      description: 'Feature description',
    }
  },
  zh: {
    myFeature: {
      title: '我的功能',
      description: '功能描述',
    }
  }
};

最佳实践 / Best Practices

始终提供双语内容 / Always provide bilingual content
- 确保所有用户可见的文本都有中英文翻译
- Ensure all user-visible text has Chinese and English translations
保持 SEO 元数据最新 / Keep SEO metadata up-to-date
- 在 seoHelper.ts 中维护准确的页面描述和关键词
- Maintain accurate page descriptions and keywords in seoHelper.ts
测试语言切换 / Test language switching
- 确保切换语言时页面标题和 meta 标签正确更新
- Ensure page title and meta tags update correctly when switching languages
考虑 RTL 语言 / Consider RTL languages
- 虽然目前只支持中英文，但代码架构支持未来添加其他语言
- While currently supporting only Chinese and English, the architecture supports adding other languages in the future

路线图 / Roadmap

添加更多语言支持（日语、韩语等）/ Add more language support (Japanese, Korean, etc.)
实现 URL 路由多语言 (/en, /zh) / Implement URL routing for languages
服务端渲染 (SSR) 支持 / Server-side rendering (SSR) support
语言特定的日期和数字格式化 / Language-specific date and number formatting

5.1 KiB Raw Permalink Blame History Unescape Escape