Gulp Static i18n：href 插值不起作用

Question

我正在使用带有插件gulp-static-i18n-html 的 gulp，但我遇到了插入链接的问题。常规数据属性可以正常工作。

当前输入

<a data-attr-t data-attr-t-interpolate href-t="{{link-prefix}}page.html" data-t="header.title">
</a>

en.json

{
    "link-prefix": "/fr/",
    "header": {
         "title": "Home"
    }
}

电流输出

<a href="page.html">Home</a>

预期输出

<a href="/fr/page.html">Home</a>

Answer 1

TLDR

这个问题可能是由于您使用了panini 或其他使用与gulp-static-i18n-html 相同语法的插件进行插值（{{}}），请确保每个库的语法不同并且它应该可以正常工作。

问题的详细突破

在我的 gulp 构建过程中，我使用了一个名为 panini 的插件。这个插件 使用通用布局编译一系列 HTML 页面，并使用特殊语法。

例子：

<!-- Header up here -->
{{> body}}
<!-- Footer down here -->

如果您注意到，此语法的前缀和后缀与 gulp-static-i18n-html 用于插值的语法完全相同。而且由于这个插件首先运行，这就是插值不起作用的原因。 此时的解决方案很简单，覆盖其中一个插件的默认后缀和前缀并使其不同。

由于为整个项目设置了 panini，覆盖默认前缀会很痛苦，所以我决定覆盖其他插件。

要记住的一件事gulp-static-i18n-html 是建立在static-i18n 之上的，它使用i18next 进行翻译。我在文档中注意到库有一个选项可以将配置传递给i18next，这意味着如果我传递了这个，我可以覆盖默认的后缀和前缀

staticI18nHtml({
  ...
  i18n: {
    interpolation: { 
      prefix: "%{",
      suffix: "}",
    }      
  } 
})

在尝试了这个之后，我意识到另一个问题。这不起作用，插值模板保持不变。

意识到这一点后，我决定深入研究该库及其依赖项的源代码。

gulp-static-i18n-html 将其所有选项传递给static-i18n，后者将它们传递给i18next，这很好。但后来我意识到属性的实际插值是由static-i18n 完成的，他们没有使用选项，而是硬编码了用于替换属性字符串的正则表达式字符串中的前缀和后缀。

意识到这一点后，我将库固定在本地分支中，我将改为使用它。