Owncast项目离线横幅中"Last live X ago"字符串的修复方案

问题背景

在Owncast项目的Web前端界面中，当直播处于离线状态时，会显示一个离线横幅，其中包含"Last live X ago"这样的字符串，用于告知用户上次直播的时间。然而，当前实现中存在一个问题：这个字符串没有被正确地添加到翻译字符串中，导致实际显示的值（如"Last live 4 days ago"）无法正常显示。

技术分析

这个问题本质上是一个国际化(i18n)字符串处理问题。在Web前端开发中，特别是React应用中，通常会使用JSON文件来管理所有可翻译的字符串。当前的问题在于：

1. 动态时间部分（如"4 days"）没有被正确地作为变量插入到翻译字符串中
2. 翻译键可能缺失或格式不正确

解决方案

正确的做法是在翻译JSON文件中添加一个包含占位符的翻译键，例如：

{
  "Last live ago": "Last live {{timeAgo}} ago"
}

这种格式允许：

• 保持字符串的可翻译性
• 动态插入时间值
• 保持前后文本的一致性

实现细节

1. 翻译文件修改：需要在项目的翻译JSON文件中添加上述键值对
2. 组件修改：在使用这个字符串的React组件中，需要确保正确地传递timeAgo变量
3. 测试验证：修改后需要验证不同语言环境下字符串的显示是否正确

技术意义

这种修复不仅解决了当前显示问题，还：

• 增强了项目的国际化支持
• 为未来添加更多语言翻译奠定了基础
• 保持了代码的可维护性和一致性

总结

通过正确地实现国际化字符串处理，可以确保Owncast项目在各种语言环境下都能提供一致的用户体验。这种修复虽然看似简单，但对于开源项目的国际化支持至关重要，也是Web前端开发中常见的国际化实践。