Nuxt JS i18n / 多语言无头 CMS

Question

刚开始玩 Nuxt（和一般的 Vue），所以如果我在这里忽略了一些明显的东西，请原谅我。

我正在尝试使用 DatoCMS 作为我的内容源来建立一个多语言网站。

我已经设置了 nuxt-i18n 插件，翻译了路由，一切正常。现在在一个页面中，我需要根据当前的语言环境切换内容，我只找到了内容存储在本地 json 文件等中的示例。

我找到了一个不应该的解决方法：

<template>
  <div>
    <div v-if="this.$metaInfo.htmlAttrs.lang === 'de-DE'">{{homepage.germanTitle}}</div>
    <div v-else>{{homepage.englishTitle}}</div>
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    homepage: gql`
      {
        homepage {
          id
          title
          englishTitle: title(locale: en)
          germanTitle: title(locale: de)
        }
      }
    `
  }
}
</script>

任何指针将不胜感激！ :)

Answer 1

我认为您应该以不同于 GraphQL 的方式获取数据。

我会这样做：

query {
  homepage(locale: $locale) {
    id
    title
  }
}

来自 DatoCMS 文档：https://www.datocms.com/docs/content-delivery-api/localization

但是你需要决定如何传递$locale 变量。这取决于您的喜好。我会在这里检查：https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query 您拥有的替代选项。

Answer 2

我会说这是正确的做法：

<div>
<template v-if="$i18n.locale === 'en">{{homepage.englishTitle}}</tempate>
<template v-else>{{homepage.germanTitle}}</tempate>
</div>

您不应该在模板中使用this，检查 i18n API 以查看您可以从哪里获取符合您条件的数据（在这种情况下，我使用 $i18n.locale），使用模板而不是 div（或三元运算符，以避免在某些情况下出现标记问题）。

但是，如果可以使用 graphql，我最好执行以下操作：

homepage {
     id
     title: {
       en: title(locale: en)
       de: title(locale: de)
     }
}

模板：

<div>{{ homepage.title[$i18n.locale] }}</div>