更改Nuxt/Contentful项目中的语言/区域设置

Question

如何在Nuxt / Contentful项目中实现动态语言切换？

pages/index.vue的内容

<template>
//...
</template>

<script>
import client from "~/plugins/contentful";

export default {
  layout: "landing_page",
  asyncData() {
    return client
      .getEntries({
        content_type: "landingPage"
      })
      .then(entries => {
        return { contentfulData: entries.items[0].fields };
      });
  },
  computed: {
    //...
  },
  props:[
    "displayApp"
  ],
  components: {
    //...
  }
};
</script>

plugins/contentful.js的内容

const contentful = require('contentful')

const client = contentful.createClient({
  space: process.env.CONTENTFUL_ENV_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ENV_ACCESS_TOKEN
})

module.exports = client

我在contentful中为一个特定的模型创建了两个不同的语言环境：

​

​

然而，在响应中，我只能看到其中的一个：

​

​

我错过了什么？

Answer 1

如果只有一页，那么在pages/index.vue中你可以使用例如：

const getLanguage = () => navigator.userLanguage || (navigator.languages && navigator.languages.length && navigator.languages[0]) || navigator.language || navigator.browserLanguage || navigator.systemLanguage || 'en';

export default {
  layout: "landing_page",
  auth: false,
  asyncData() {
    return client
      .getEntries({
        content_type: "landingPage",
        locale: (getLanguage().includes('pl') ? 'pl' : 'en')
      })
      .then(entries => {
        return { contentfulData: entries.items[0].fields };
      });
  },

适用于两个地区。在此示例中，缺省区域设置为en