如何本地化SurveyJS多页表单的导航标签？

问题背景 #

已完成3页SurveyJS表单的整体德语翻译，但通过showProgressBar: "top"和progressBarType: "buttons"显示的导航标签未本地化，尝试将页面name设为多语言对象格式时代码崩溃，仅支持字符串类型的name值。

正确实现步骤 #

SurveyJS的页面name属性仅支持字符串（作为唯一标识符），不能直接设置为多语言对象。需通过SurveyJS的本地化机制实现导航标签翻译：

1. 设置页面name为翻译键
   保持页面name为字符串格式，将其作为翻译标识，示例：

   {
     "showNavigationButtons": "none",
     "progressBarType": "buttons",
     "showProgressBar": "top",
     "pages": [
       {
         "name": "declaration_page",
         // 其他页面配置（如title、问题等）
       },
       {
         "name": "personal_info_page",
         // 其他页面配置
       },
       {
         "name": "confirmation_page",
         // 其他页面配置
       }
     ]
   }
   

2. 扩展目标语言的本地化资源
   在SurveyJS的德语本地化资源中，添加页面name对应的翻译文本：

   // 扩展德语本地化包的页面翻译
   Survey.localization.locales.de.pages = {
     "declaration_page": "Rechtliche Erklärungen",
     "personal_info_page": "Persönliche Daten",
     "confirmation_page": "Bestätigung"
   };
   
   // 确保已加载SurveyJS德语本地化包并切换语言
   Survey.localization.currentLocale = "de";
   

原理说明 #

SurveyJS的进度条导航按钮会自动读取当前语言本地化资源中，与页面name匹配的翻译值作为显示文本，无需修改页面name的结构，仅需通过翻译系统映射标识符与目标语言文本即可实现本地化。

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