javascript - Vuepress 国际化

标签 javascript vue.js vuepress

我目前正在使用 Vuepress。但是我想要在我的 Vuepress 站点中使用多种语言。经过 3 天的挣扎,我决定把我的问题放在这里。 (是的,我查看了 Vuepress 文档:https://vuepress.vuejs.org/guide/i18n.html#default-theme-i18n-config)

问题:在我的配置中,我将荷兰语作为主要语言。当我想把英语作为语言环境时。我的导航不会更新。这是我的配置:

module.exports = {
    title: 'Portfolio Bjorn',
    description: ' ',
    themeConfig: {
        nav: [
            { text: 'Over mij', link: '/overmij.html'},
            { text: 'Portolfio', link: '/portfolio/'},
            { text: 'Contact', link: '/contact.html'},
            {
                text: 'Languages',
                items: [
                  { text: 'Dutch', link: '/' },
                  { text: 'English', link: '/english/' }
                ]
            } 
        ],
        sidebar: {
            '/portfolio/': [
                '',
                'school',
                'zelfgemaakt'

            ]
        },
        locales: {

            '/english': {
            lang: 'en-Us',
            nav: [
            { text: 'About', link: '/about.html'},
            { text: 'Portfolio', link: '/portfolio_en/'},
            { text: 'Contact', link: '/contact_en.html'},
            ]   
            }
        }

    }
}

我还有一张我的文件夹结构的图片:

I also have a picture of my folder structure:

我希望有人知道这个问题的答案,这样我才能继续。

亲切的问候

最佳答案

我假设您使用的是默认主题。

您在配置中犯了一个简单的错误 – 您将常规 locale 选项放在了 themeConfig 中。

相反,您通常需要为站点定义区域设置,然后您还可以定义特定于主题配置的本地化数据。

你的配置应该是这样的:

module.exports = {

  locales: {
    /* This is where you place your general locale config */
    '/': {
      lang: 'nl-NL',
    },
    '/en/': {
      lang: 'en-US',
      title: 'english title of the website'
    }
  },


  themeConfig: {
    locales: {
      /* This is where you place your theme specific, localized data */
      '/': {
        nav: [/* dutch nav */]
      },
      '/en/': {
        nav: [/* english nav */]
      },
    }
  }
}

关于javascript - Vuepress 国际化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52170865/

相关文章:

javascript - 尝试实现特定于 Django 模型属性的“阅读更多”按钮

javascript - 在 VueJS 中将动态样式传递给我的元素

vue.js - 如何通过插件更改 VuePress 页面的内容

vue.js - 如何以正确的方式在 Nuxt 项目中添加 Vuepress?

java - 未调用 JQuery

javascript - 如何呈现句子中随机设置的粗体文本

javascript - 如何在这里使用 Find() : Vue. js

javascript - 如何为 axios baseURL 设置 Nuxt.js 的配置以在全局范围内工作?

vue.js - vuepress 中的 IMG 未显示

javascript - 如何跳转到浏览器页面顶部