pi-web本地化配置轻松适应不同地区的设置指南【免费下载链接】pi-webWeb UI for the pi coding agent项目地址: https://gitcode.com/GitHub_Trending/pi/pi-webpi-web是一款功能强大的编码代理Web界面支持通过本地化配置来适应不同地区的语言和设置需求。本文将详细介绍如何进行pi-web的本地化配置帮助你轻松实现多语言支持和地区适配。 pi-web本地化基础pi-web的界面使用了一个小型内部国际化(i18n)层无需引入额外的运行时依赖即可支持多种语言而无需将服务器、API响应或Pi自身的输出与特定语言耦合。当前支持的语言pi-web内置了以下语言包en- 英语zh-CN- 简体中文初始语言环境会从浏览器中推断。用户可以通过顶部栏的语言控件更改语言环境所选的语言环境会保存在localStorage的pi-locale项下。图pi-web界面展示了多语言支持的配置选项 开始使用本地化功能在组件中使用翻译客户端组件应从useI18n获取翻译函数import { useI18n } from /hooks/useI18n; export function ExampleButton() { const { t } useI18n(); return button aria-label{t(example.open)}{t(example.open)}/button; }组件必须在I18nProvider下渲染应用根目录已在app/page.tsx中提供了该组件。对于运行时变化的值应使用参数而不是连接翻译片段span{t(session.messageCount, { count: messageCount })}/span相应的消息可以使用{count}session.messageCount: {count} messages这使句子结构处于每个语言包的控制之下。 添加新语言的完整步骤1. 创建消息文件在lib/i18n/messages/下添加一个文件使用BCP 47风格的标识符。例如日语包为lib/i18n/messages/ja.tsimport type { LocalePlugin } from ../types; /** Pi Web Japanese language package. */ export const jaLocale: LocalePlugin { id: ja, label: 日本語, messages: { common.language: 言語, // 在此处添加其余共享键 }, };消息键必须保持稳定且与语言无关。创建新包时从lib/i18n/messages/en.ts复制完整的键集。缺少的键将回退到英语但用户界面语言最好有完整的包。2. 注册语言包在lib/i18n/registry.ts中导入并注册包import { jaLocale } from ./messages/ja; registerLocale(jaLocale);LocalePlugin.id必须唯一且非空。标签显示在语言选择器中。getSupportedLocales()会自动将已注册的包暴露给UI。3. 更新特定于语言环境的类型如需要内置的Locale类型目前列出了en和zh-CN以确保编译时安全。添加内置语言时更新lib/i18n/types.ts中的联合并更新任何有意列出内置标识符的语言环境验证。4. 添加测试当浏览器语言检测或注册表行为更改时扩展lib/i18n/registry.test.mjs。当插值或语言环境感知格式更改时扩展lib/i18n/format.test.mjs。新语言至少应验证其注册表ID和代表性翻译。✏️ 添加或更改UI文本的最佳实践向lib/i18n/messages/en.ts和lib/i18n/messages/zh-CN.ts添加一个稳定的键。将键放在功能命名空间下如chat.*、files.*、settings.*或common.*。在可见文本、title、aria-label和placeholder值中使用t(namespace.key)。对计数、名称、路径和其他运行时值使用插值。保持产品名称、模型名称、提供程序名称、命令、文件路径、用户内容、工具输出和服务器提供的错误详细信息不变。不要通过匹配英文文本翻译API错误。只翻译其周围的本地UI回退。翻译时保持已建立的技术术语为英文因为翻译它们会使界面更难映射回命令、配置字段或Pi文档。这包括诸如Agent、API Key、Provider、Token、worktree、Diff、CWD、Shell、Git、HEAD、OAuth和Mermaid等术语保留它们的常规大小写。翻译周围的操作和状态文本。具有明确本地化形式的常见概念如模型、插件、技能、提示、上下文和缓存可以保持本地化。例如// en.ts files.uploadedCount: {count} uploaded // zh-CN.ts files.uploadedCount: 已上传 {count} 个文件span{t(files.uploadedCount, { count: uploadedCount })}/span如果所选语言缺少某个键格式化程序首先尝试英语包最后返回键本身。缺少的键还会产生开发警告这使得不完整的翻译在开发过程中可见。 验证本地化配置从存储库根目录运行以下命令node_modules/.bin/tsc --noEmit npm run lint node_modules/.bin/jiti lib/i18n/registry.test.mjs node_modules/.bin/jiti lib/i18n/format.test.mjs node --test lib/*.test.mjs正常开发期间不要运行next build。有关原因请参阅存储库开发说明。 本地化设计原则pi-web是一个面向用户的Web界面。因此国际化是一项可访问性和可用性功能人们应该能够以他们熟悉的语言理解和操作界面。语言支持应该降低使用pi-web的障碍而不是被视为衡量技术专长的标准或排除其他有用贡献的理由。i18n层是故意增量的。贡献者可以添加一种语言或改进一小部分UI消息而无需重写API契约、更改Pi的输出或引入大型翻译框架。通过以上步骤你可以轻松地为pi-web添加新的语言支持或修改现有翻译使其更好地适应不同地区的用户需求。无论你是普通用户还是开发人员都能通过简单的配置让pi-web界面更符合你的语言习惯。要开始使用pi-web请克隆仓库git clone https://gitcode.com/GitHub_Trending/pi/pi-web然后按照官方文档进行安装和配置。有关更多详细信息请参阅项目中的docs/i18n.md文件。【免费下载链接】pi-webWeb UI for the pi coding agent项目地址: https://gitcode.com/GitHub_Trending/pi/pi-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考