如何为IIIF Universal Viewer添加新语言翻译文件

以下是在HTML页面通过JavaScript方式接入自定义翻译JSON的步骤：

1. 编写符合格式的翻译JSON文件 #

首先参考UV官方自带的语言文件结构（比如en.json），创建你的自定义翻译文件（例如zh-CN.json）。文件结构需保持键名与官方文件一致，值替换为目标语言的翻译内容：

{
  "viewer_title": "数字资源查看器",
  "zoom_in": "放大",
  "zoom_out": "缩小",
  "fullscreen": "全屏",
  // 其他所有需要翻译的键值对
}

2. 在页面中加载并注册自定义翻译 #

在初始化UV的代码中，通过locales配置项注册你的自定义语言，同时指定默认使用的语言：

<div id="uv"></div>

<script src="path/to/uv.js"></script>
<link rel="stylesheet" href="path/to/uv.css">

<script>
// 加载自定义翻译文件
fetch('path/to/zh-CN.json')
  .then(res => res.json())
  .then(translations => {
    // 初始化UV并注册自定义语言
    const uvViewer = UV.init({
      element: '#uv',
      manifest: '你的IIIF资源清单URL',
      // 注册自定义语言，键为ISO标准语言代码
      locales: {
        'zh-CN': translations
      },
      // 设置默认使用该自定义语言
      locale: 'zh-CN'
    });
  });
</script>

3. 动态切换语言（可选） #

如果需要在UV初始化后动态切换到自定义语言，可使用setLocale方法：

// 加载翻译后切换
fetch('path/to/zh-CN.json')
  .then(res => res.json())
  .then(translations => {
    uvViewer.setLocale('zh-CN', translations);
  });

注意事项 #

• 语言代码需遵循ISO 639-1标准（如fr代表法语、ja代表日语），确保和系统语言检测逻辑兼容；
• 务必保证翻译JSON的键名与UV官方语言文件完全一致，否则对应文本无法被替换；
• 翻译文件需放在可被页面访问的静态资源路径下，避免跨域问题。

内容的提问来源于stack exchange，提问作者jhfelectric