[Day05] Vue i18n - Component Interpolation

在本地化 (localize) 文字讯息时，我们可能会遇到需要特别处理 HTML tag的情况，什麽意思呢？我们来看一下上图红框中的句子的 HTML 结构。

<p>
  For a guide and recipes on how to configure / customize this project,
  <br />
  check out the
  <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
    vue-cli documentation
  </a>
  .
</p>

这显然已经不是可以简单用 Message Format Syntax 解决的问题，所以今天我们要来分享的就是可以帮我们达到这件事的 Component Interpolation 。

此篇的内容会需要具备前两篇 Vue i18n - Message Format Syntax 以及 Vue i18n - Pluralization 所介绍到的语法基础，所以如果还没看过的朋友可以先去看过再回来此篇做阅读。

基本用法

遇到上面的这种情况，你可能会尝试这麽做

{
  "term1": "For a guide and recipes on how to configure / customize this project,",
  "term2": "checkout out the",
  "term3": "vue-cli documentation",
  "period": "."
}

<p>
  {{ $t('term1') }}
  <br />
  {{ $t('term2') }}
  <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
    {{ $t('term3') }}
  </a>
  {{ $t('period') }}
</p>

可惜的是这样只在英文语系行得通，原因是每个语言的文法其实差异很大，所以同样的一段句子在不同语言可能排列组合都不太一样，没办法都透过这样的方式去拼凑。

所以 Vue i18n 提供了 Translation 元件 (i18n-t) 来帮助我们达到这件事。

{
  "intro": "For a guide and recipes on how to configure / customize this project, {0} checkout out the {1}.",
  "vueCliDoc": "vue-cli documentation"
}

<i18n-t keypath="intro" tag="p">
  <br/>
  <a href="https://cli.vuejs.org" target="_blank">{{ $t("vueCliDoc") }}</a>
</i18n-t>

这样得到的结果就会是我们所期望的了。

<p>
  For a guide and recipes on how to configure / customize this project,
  <br />
  check out the
  <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
    vue-cli documentation
  </a>
  .
</p>

范例程序码

在上面的范例中，有两件事值得注意：

在 i18n-t 下的子元素按照出现的顺序进行插值，就像是 list interpolation 一样。
我们可以指定 tag 属性来选择根节点的 HTML tag。

Slots 语法用法

然而透过像是 list interpolation 完成插值，其实不太直观，还好我们可以透过 slots 做到类似 named interpolation 的方式！

{
  "intro": "For a guide and recipes on how to configure / customize this project, {newline} checkout out the {doc}.",
  "vueCliDoc": "vue-cli documentation"
}

<i18n-t keypath="intro" tag="p">
  <template #newline>
    <br />
  </template>
  <template #doc>
    <a href="https://cli.vuejs.org" target="_blank">
      {{ $t("vueCliDoc") }}
    </a>
  </template>
</i18n-t>

范例程序码

多元化 (Pluralization) 用法

多元化的字词也有可能会需要使用到 Component interpolation，尤其是想要特别强调数量时可能需要有不一样的 CSS 效果，例如：

<p>
	<strong>2</strong>
	cars
</p>

所以我们可以在 i18n-t 组件透过 plural 属性来完成多元化。

"apple": "no apples | one apple | {count} apples"

<i18n-t keypath="apple" tag="p" :plural="count">
  <template #count>
    <strong>{{ count }}</strong>
  </template>
</i18n-t>

export default {
  // ...
  setup () {
    return {
      count: 2
    }
  }
}
</script>