思途智旅游网站开发,重庆建设招标网站,小制作简单手工,做门户网站好还是论坛好目录
查看并设置语言
单页面#xff1a;html lang
编辑
浏览器
自定义翻译#xff1a;react-i18next
设置
模块#xff1a;staticData.ts
散(重复利用)#xff1a;命名空间.json
应用
准备
html标签 查看并设置语言
单页面#xff1a;html lang
英语: html lang
编辑
浏览器
自定义翻译react-i18next
设置
模块staticData.ts
散(重复利用)命名空间.json
应用
准备
html标签 查看并设置语言
单页面html lang
英语: html langen中文: html langzh 或 html langzh-CN CN 则表示该语言的特定区域即中华人民共和国China。 更符合语言标准的规范 西班牙语: html langes法语: html langfr日语: html langja !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleYour Webpage Title/title
/head
body!-- Your webpage content goes here --
/body
/html浏览器 自定义翻译react-i18next
设置
模块staticData.ts
export function getFeatures(lang: string){if(langcn){return [{title: 免费,description: [你好,...],},{...}]}else{return [{title: Free,description: [hi~~~,....],},{....],}]}}
散(重复利用)命名空间.json 应用 t (translate) 函数 这个函数用于翻译文本。 i18n 对象 这是一个包含有关国际化设置的对象其中包括当前语言环境等信息。 语言环境的判断和切换通常是由 i18n 对象处理的。 i18n.language 的默认值通常由 i18next 库的 language 配置项决定。 在没有明确设置 language 配置项的情况下i18next 会尝试根据浏览器的语言首选项navigator.language来设置默认语言 i18n.language; // 当前语言环境 i18n.changeLanguage(en); // 切换到英语 准备
import { useTranslation } from react-i18next;
import { getFeatures } from ./staticData;export default function HomeContent() {const { t, i18n } useTranslation([home, login]);const features getFeatures([zh, zh-CN, cn].includes(i18n.language) ? cn : en)
html标签
h1 classNamefont-bold text-2xl{t(Sign in/Sign up)}/h1
{features?.map((item, index) (div classNameflex flex-col items-center p-4 md:w-1/2 key{item.title}div className min-w-full h-full bg-[#2A2935] rounded-lg p-4div className text-2xl leading-loose md:leading-tight{item.title}{item.subtitle span className text-xs text-gray-400 ml-2( {item.subtitle} )/span}/div{item.description.map((item, index) (div className text-xs text-gray-400 leading-relaxed key{index}- {item}/div))}/div/div))}
