如何在页面中向 Nuxt i18n 添加内容（wordpress 无头 cms）答案

【问题标题】：How to add content to Nuxt i18n in page (wordpress headless cms)如何在页面中向 Nuxt i18n 添加内容（wordpress 无头 cms）
【发布时间】：2021-06-20 18:08:27
【问题描述】：

我正在尝试将 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 中提取内容并在模板中使用？

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

【问题讨论】：

标签： wordpress internationalization nuxt.js

【解决方案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，则会显示挪威语内容。

【讨论】：