文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

国际化支持(internationalization)

发布于 2019-05-30 13:40:06 字数 2493 浏览 1195 评论 0 收藏 0

网站级别的国际化配置(site level i18n config)

想要在 VuePress 中支持多语言，首先你需要使用如下的文件结构：

docs
├─ README.md
├─ foo.md
├─ nested
│  └─ README.md
└─ zh
   ├─ README.md
   ├─ foo.md
   └─ nested
      └─ README.md

然后，在 .vuepress/config.js 中指定 locales 选项：

module.exports = {
  locales: {
    // 每个语言对象的键(key)，是语言的访问路径。
    // 然而，一种特例是将 '/' 作为默认语言的访问路径。
    '/': {
      lang: 'en-US', // 这个值会被设置在 <html> 的 lang 属性上
      title: 'VuePress',
      description: 'Vue-powered Static Site Generator'
    },
    '/zh/': {
      lang: 'zh-CN',
      title: 'VuePress',
      description: 'Vue 驱动的静态网站生成工具'
    }
  }
}

如果某个语言对象没有声明 title 或 description，VuePress 会尝试获取根语言对象上相应的值。如果每个语言对象都声明了 title 和 description，则可以省略根语言对象上的 title 和 description。

默认主题的国际化配置(default theme i18n config)

默认主题也内置国际化支持，可以通过 themeConfig.locales 来配置，与上面配置相同，也使用 { path: config } 这种（路径+配置对象）格式。除了可以配置一些整个网站都会用到的文本，每个语言对象都有自己的导航栏和侧边栏。

module.exports = {
  locales: { /* ... */ },
  themeConfig: {
    locales: {
      '/': {
        // text for the language dropdown
        selectText: 'Languages',
        // label for this locale in the language dropdown
        label: 'English',
        // text for the edit-on-github link
        editLinkText: 'Edit this page on GitHub',
        // config for Service Worker 
        serviceWorker: {
          updatePopup: {
            message: "New content is available.",
            buttonText: "Refresh"
          }
        },
        // algolia docsearch options for current locale
        algolia: {},
        nav: [
          { text: 'Nested', link: '/nested/' }
        ],
        sidebar: {
          '/': [/* ... */],
          '/nested/': [/* ... */]
        }
      },
      '/zh/': {
        // 语言下拉菜单的展示文本
        selectText: '选择语言',
        // 该语言在下拉菜单中的 label 标签
        label: '简体中文',
        // github 编辑链接的文字
        editLinkText: '在 GitHub 上编辑此页',
        serviceWorker: {
          updatePopup: {
            message: "发现新内容可用.",
            buttonText: "刷新"
          }
        },
        nav: [
          { text: '嵌套', link: '/zh/nested/' }
        ],
        algolia: {},
        sidebar: {
          '/zh/': [/* ... */],
          '/zh/nested/': [/* ... */]
        }
      }
    }
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

国际化支持(internationalization)

网站级别的国际化配置(site level i18n config)

默认主题的国际化配置(default theme i18n config)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。