时间戳

首页 > 解决方案 > Gulp Static i18n：href 插值不起作用

javascript - Gulp Static i18n：href 插值不起作用

问题描述

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

电流输入

<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>

标签： javascripthtmlgulpinternationalization

解决方案

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-i18ni18nexti18next

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

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

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

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

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

推荐阅读