Nuxt JS i18n / многоязычный с CMS без головы - PullRequest
Новая
       19

Nuxt JS i18n / многоязычный с CMS без головы

0 голосов
/ 15 марта 2019

Только начал играть с 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>

Любые указатели будут высоко оценены! :)

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Я думаю, что вы должны получать данные иначе, чем 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 / query.html # simple-query альтернативные варианты, которые у вас есть.

0 голосов
/ 16 марта 2019

Я бы сказал, что это правильный способ сделать это: 

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

Вы не должны использовать this внутри шаблона, проверьте API i18n, чтобы увидеть, где вы можете получить данные для вашего состояния (в этом случае я использую $ i18n.locale), используйте шаблон вместо div (или троичного оператора, во избежание проблем с разметкой в ​​некоторых случаях).

НО, если это возможно с graphql, я бы лучше сделал следующее: 

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

шаблон: 

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