Блог

Я использую 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>
 

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 и они не использовали параметры, а вместо этого жестко закодировали префикс и суффикс в строке регулярного выражения, используемой для замены строк атрибутов.

Осознав это, я исправил библиотеку в локальной ветке и буду использовать ее вместо этого.