Nuxt JS i18n/多语言与无头 CMS [英] Nuxt JS i18n / multilingual with headless CMS
问题描述
刚刚开始使用 Nuxt(以及一般的 Vue)，所以如果我忽略了一些明显的东西，请原谅我.
我正在尝试建立一个使用 DatoCMS 作为我的内容源的多语言网站.
我已经设置了 nuxt-i18n 插件，翻译了路由，一切正常.现在在一个页面中，我需要根据当前语言环境切换内容，我只找到了内容存储在本地 json 文件等中的示例.
我找到了一种解决方法，但它不是应该的方式:
<div><div v-if="this.$metaInfo.htmlAttrs.lang === 'de-DE'">{{homepage.germanTitle}}</div><div v-else>{{homepage.englishTitle}}</div><脚本>从'graphql-tag'导入gql导出默认{阿波罗:{主页:gql`{主页 {ID标题englishTitle:标题(语言环境:en)德语标题:标题(语言环境:de)}}`}}
任何指针将不胜感激！:)
我认为你应该以不同于 GraphQL 的方式获取数据.
我会这样做:
查询{主页(语言环境:$locale){ID标题}}来自 DatoCMS 文档:https://www.datocms.com/docs/content-delivery-api/localization
但是接下来您需要决定如何传递 $locale 变量.这取决于您的喜好.我会在这里查看:https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query 您拥有的替代选项.
Just started playing around with Nuxt (and Vue in general) so please forgive me if I am overlooking something obvious here.
I am trying to set up a multilingual site using DatoCMS as my content source.
I have set up the nuxt-i18n plugin, translated routes and all is working fine. Now in a page, I need to switch the content depending on the current locale and I have only found examples with the content being stored locally in json files etc.
I found a workaround which can't be the way it is supposed to be:
<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>
Any pointers would be much appreciated! :)
I think that you should fetch the data differently from GraphQL.
I would do something like:
query {
homepage(locale: $locale) {
id
title
}
}
From DatoCMS docs: https://www.datocms.com/docs/content-delivery-api/localization
But then you need to decide how to pass the $locale variable. That depends on how you prefer. I would check here: https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query the alternative options that you have.
这篇关于Nuxt JS i18n/多语言与无头 CMS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
