如何在页面中向Nuxt i18n添加内容(wordpress headless cms)

Question

我正在尝试使用Wordpress作为一个无头CMS，并使用Nuxt拉取内容，我正在使用它作为SSG。我需要把它翻译成几种语言，但我不太清楚如何让它工作。

我想做这样的事情，但它不起作用，因为块似乎只接受字符串：

<i18n>
{
  "en": en,
  "nb": nb
}
</i18n>

<template>
  <div class="container">
    {{ $t('frontpage_top_section.frontpage_heading') }}
  </div>
</template>

<script>
export default {
  async asyncData() {
      const en = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4685').then(res => res.json());
      const nb = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4235').then(res => res.json());
      return {
        en, nb
      }
  },
}
</script>

这里的正确方法是什么？如何在每个页面/组件的基础上从Wordpress api中提取内容并在模板中使用它？

如果我遗漏了什么，请告诉我，谢谢:)

Answer 1

所以我已经解决了这个问题，我想我应该在这里分享一下，以防其他人感到困惑。如果有人想详细说明这一点，请随意。

因此，我所做的不是尝试将其包含在页面/组件本身中，而是使用单独的文件来调用数据，如下所示：https://i18n.nuxtjs.org/lazy-load-translations

所以在nuxt.config.js中我有：

  modules: [
[
  'nuxt-i18n',
  {
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en-US.js'
      },
      {
        code: 'nb',
        iso: 'nb_NO',
        name: 'Norwegian',
        file: 'nb.js'
      },
    ],
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en',
    fallbackLocale: 'en',
    seo: true
  },
]
]

然后，例如，在/lang/en-US.js中，我调用该语言的特定页面(并对其他语言执行相同的操作)：

export default async (context, locale) => {
let homepage = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4685').then(res => res.json());
let about = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/9519').then(res => res.json());
return {
    homepage, about
}
}

然后在我的模板中，我可以调用：

<template>
  <div class="container">
{{ $t('homepage.acf.frontpage_top_section.frontpage_heading') }}
  </div>
</template>

现在，当我加载页面时，会显示正确的内容，例如，如果我转到: /nb，就会显示挪威内容。