この記事の要点
この記事の重要ポイント
- 1
GADGET LAB (原 HonoGear) 正式开启英语支持。
- 2
为了实现 /en/ 路径前缀策略,重新设计了 Astro 路由,且未引入任何沉重的框架。
- 3
对 20 多个核心组件(如 `PostLayout`
- 4
`Sidebar`
- 5
`ReelPlayer`)进行了响应语言(i18n Aware)的重构。
- 6
实现了强大的错误处理机制,解决了全球视频分发中的 403 Forbidden 问题。
Hello, World.
技术没有国境。一个优秀机械轴的敲击感,无论是在东京还是在旧金山敲击,都不会改变。一个精巧的 React Hook,在伦敦和在首尔都能解决同样的难题。
长期以来, GADGET LAB (原名:HonoGear)一直是一个仅有日语内容的博客。 虽然我们一直在分享 AI 硬件、人体工学桌面搭建、软件工程的最新资讯,但这些见解一直被困在名为“语言隔阂”的孤岛上。
今天,我们要打破这一局面。
我们正式在全球范围内开启了 英语支持 。 这不仅仅是一个靠机器翻译生成的镜像网站。为了真正支持全球读者,我们完全重新设计了网站的核心架构。
工程挑战:“不仅仅是添加一个 t("hello")”
当我们决定“走向全球”时,我们低估了它的复杂性。我们原本以为:“只要加一个语言切换按钮就行了吧。”
那是大错特错。
1. 架构转型
我们从单一语系的 Astro 设置迁移到了 基于路径前缀的路由系统 。
- 重构前 :
/blog/my-keyboard(始终为日语) - 重构后 :
/blog/my-keyboard(日语) 和/en/blog/my-keyboard(英语)
我们就使用像 astro-i18next 这样的专用 i18n 框架,还是构建轻量级的独自解决方案进行了深入讨论。最终,我们选择了后者。理由是 性能 。
通过手动控制路由并使用简单的基于字典的翻译系统(useTranslations),我们避免了沉重 i18n 库带来的水合(Hydration)开销。尽管内容覆盖面翻了一倍,我们的 Lighthouse 评分依然保持在 100/100 。
2. 核心组件的大重构
最大的障碍是 UI 组件。
我们有 PostLayout, Sidebar, ReelPlayer, Tags, Search 等 20 多个组件,它们的基因里原本硬编码了日语。
我们进行了一场“大重构”,标准化了所有组件检测语言的方式:
// 我们采用的标准模式
const isEn = Astro.props.isEn || Astro.url.pathname.startsWith("/en");
const t = useTranslations(isEn ? "en" : "ja");
这确保了无论用户是在看 产品卡片 还是 错误提示 ,语言都能完全符合用户的预期。
3. 视频的韧性:“Pexels 403”的噩梦
在全球范围测试网站时,我们遇到了一个严重问题:视频资源的 403 Forbidden 错误 。
即便日本用户可以毫无问题地访问缓存视频,但由于 CDN 的防盗链保护,美国用户有时会被屏蔽。结果就是视频播放器(ReelPlayer)崩溃,屏幕上只剩下一片虚无。
我们实现了一个强大的 视频韧性(Resilience) 层:
- 错误捕获 :播放器会捕获加载错误(如 403 或 404)。
- 回退 UI :不再直接崩溃,而是显示本地化的帮助信息和“重试”按钮。
- 本地托管 :为了确保不被外部 CDN 策略左右并稳定分发,我们将重要资源切到了本地(
/public/videos/)托管的策略。
为什么这很重要
这次扩展不仅仅是为了扩大覆盖面。更是为了 提升我们自己的标准 。
- 为了开发者 :我们可以将我们的技术深度解析(就像这篇文章一样!)分享给全球的开发者社区。
- 为了科技爱好者 :我们可以将关于最新科技(键盘、音频、AI 硬件)的公正且具工程视角的评测带给全球读者。
- 为了创作者 :我们可以向各地的创作者分享我们的“电影感桌面搭建”哲学和视频制作流程。
体验差异
如果您现在正在阅读这篇英语(或中文)文章,说明您已经站在了围栏的另一边。不过,试着切换一下页眉的语言开关。您可以观察到整个网站——内容、UI、导航——是如何无缝适应的。
我们才刚刚起步。 在下一阶段,我们计划完善我们的 AI 驱动型“Codex”管线 ,让翻译不仅仅停留在字面意思,更能捕捉到语气和语境。
欢迎来到全球化的 GADGET LAB。 让我们一起创造精彩。






⚠️ コメントのルール
※違反コメントはAIおよび管理者により予告なく削除されます
まだコメントがありません。最初のコメントを投稿しましょう!