javascript - 翻译使用 Javascript 中的 Algolia 提取的动态内容

Question

我正在从 Algolia 中提取类别。我希望 WPML 能够识别这些类别。但 WPML 不识别动态内容。谁能帮我解决这个问题？

请在下面找到我要翻译的代码。 这是来自 Algolia 的小部件代码

templates: {
item: `<label class="ais-RefinementList-label"> 
    <input type="checkbox" class="ais-RefinementList-checkbox" value="{{label}}">
    <span class="ais-RefinementList-labelText">{{<?php echo __(esc_html('label'), 'wprig');?>}}</span>
    <span class="ais-RefinementList-count">1</span>
    </label>`,
},

我要翻译这部分:

{{<?php echo __(esc_html('label'), 'wprig');?>}}

有什么帮助吗？

Answer 1

首先，让我试着澄清一下，这里的堆栈分为 3 部分:

• 后端(WordPress/PHP)
• 前端(Html、JS、CSS)
• Algolia(外部 API)

那么发生的事情是:

1. 您的后端打印客户端浏览器请求的 html 页面。
2. 在此页面中，javascript 对 Algolia 的 API 进行查询。
3. 相同的 javascript 根据 Algolia 的响应更新页面内容，而无需重新加载页面。

这意味着这里的后端工作在第 1 步停止，您不能在第 2 步和第 3 步使用 php。

好的，现在有几种方法可以翻译来自 algolia 的动态内容:

方案一

最佳解决方案

如果可以，您可以在初始化 algolia 的即时搜索时为每种语言使用不同的 algolia 索引。

例如:

...
const search = instantsearch({
  appId: 'YOUR_API_ID',
  apiKey: 'YOUR_API_KEY',
  indexName: 'movies_en' // or 'movies__fr' or 'movies__es'
  // Here you could make the indexName dynamic using a variable, like this:
  // indexName: 'movies_' + currentLanguage
});
...

现在您只需要为正确的语言打印正确的索引。

解决方案2

更复杂、更难维护的解决方案

您可以在页面的某处打印翻译 JSON(如果您不想，可以使用 PHP)

<script>
 window.algoliaTranslations: {
   "Guardians of the Galaxy": {
     "fr": "Gardiens de la Galaxie",
     "es": "Guardianes de la Galaxia",
   }
 }
</script>

并即时翻译标签

const currentLanguage = 'es'
search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    hitsPerPage: 12,
    templates: {
      item: `
        <label class="ais-RefinementList-label"> 
          <input type="checkbox" class="ais-RefinementList-checkbox" value="{{label}}">
          <span class="ais-RefinementList-labelText">{{label}}</span>
          <span class="ais-RefinementList-count">{{count}}</span>
        </label>
      `,
    },
    transformData: hit => {
      hit.label = window.algoliaTranslations[hit.label][currentLanguage]
      return hit;
    },
  })
);

在解决方案 1 中，大部分工作是在 Algolia 中完成的，而在解决方案 2 中，这项工作是在 php/javascript 中完成的

希望这会有所帮助。