Multiple Language Support + Complete Chinese Translation #48

ulivz · 2018-04-15T14:33:03Z

Fixed for #41, and this PR is based on #13.

Though I have read and modified repeatedly, there may still be some places where translation is not detailed enough. If you find it, feel free to leave your comments. Thank you.

Description

Since most users (Vue is also the same) will only consider supporting the main language support at the beginning, so I pass in an array that contains link items to nav:

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Guide',
        link: '/guide/',
      },
      // rest pages ...
    ],
  }
}

Then one day, I find I want to add translations for my docs, taking adding Chinese translation as an example, I will need to do the following work to achieve i18n:

Create a directory in the name of language at .vuepress
Change the config to:

const langs = [
  { text: 'English', link: '/' },
  { text: '简体中文', link: '/zh/' },
]

module.exports = {
  themeConfig: {
    nav: {
      default: [
        { text: 'Guide', link: '/guide/' },
        { title: 'Languages', type: 'dropdown', items: langs },
      ],
      zh: [
        { text: '指南', link: '/zh/guide/' },
        { title: '选择语言', type: 'dropdown', items: langs },
      ]
    }
  }
}

Preview

Default: https://deploy-preview-48--vuepress.netlify.com/
Chinese docs: https://deploy-preview-48--vuepress.netlify.com/zh/

TODO

i18n for Vue Component.
i18n for title and description field.

yyx990803 · 2018-04-16T17:00:11Z

Looks good, but I think there are a few extra TODOs:

Site title in the navbar should link to the language's home (currently always goes to default lang's home)
Pages should set correct lang on <html>. In order to infer the correct lang, the config should contain information on how to map a sub path to a language.

So the config may need to look a bit different:

module.exports = {
  langs: [
    { lang: 'en', label: 'English', path: '/', selectText: 'Languages' },
    { lang: 'zh-CN', label: '简体中文', path: '/zh/', selectText: '选择语言' }
  ],
  title: {
    '/': 'VuePress',
    '/zh/': '中文 title'
  },
  description: {
    '/': 'English description',
    '/zh/': '中文 description'
  },
  themeConfig: {
    nav: {
      // the language select dropdown is auto generated, so no need to repeat it here
      '/': [...],
      '/zh/': [...]
    }
  }
}

Edit: I just realized we can make title, description and nav all accept the same object format like sidebar - basically apply different values for different matching sub paths.

ulivz · 2018-04-16T18:12:42Z

Got it, now I can continue to work for it since dropdown has ramped up.

ulivz · 2018-04-17T19:59:49Z

@yyx990803

Completed basically, In addition to fix some bugs you mentioned above, and now supports the following features:

Support the configuration you have proposed;
Support render different description meta tag for different locale in vuepress build, and use Client Render to update it in vuepress dev;
Auto generated language selection dropdown;
Try to stay on the same page when switching language, fallback to homepage when not existed;
With the latest commit, Chinese document is supplemented and proofread and optimized once again.
Complete downwards compatible.

And the only remaining thing is to document Multiple language support, after thinking about this, maybe this is for you.

Wait for you review comments, thank you.

ulivz · 2018-04-17T20:21:23Z

To preview https://deploy-preview-48--vuepress.netlify.com/, please clean cache first.

yyx990803 · 2018-04-18T03:33:49Z

lib/app/dataMixin.js

+    $langConfig () {
+      const { langs } = this.$site
+      let defaultLang
+      const lang = (langs || []).find((lang, index) => {


Buble does not polyfill Array.prototype.find so we have to avoid using it in order to make the site run in IE11.

Thanks! all incompatible API issues are fixed at 1c31f82

yyx990803 · 2018-04-18T03:34:57Z

lib/default-theme/NavLinks.vue

+              // Try to stay on the same page
+              link = currentLink.replace(this.$langConfig.path, lang.path)
+              // fallback to homepage
+              if (!routes.find(route => route.path === link)) {


Same, avoid using Array.prototype.find (use .some here instead)

yyx990803 · 2018-04-18T03:35:25Z

lib/default-theme/NavLinks.vue


 export default {
  components: { OutboundLink, NavLink, DropdownLink },
  computed: {
+    userNav() {


space before parens

yyx990803 · 2018-04-18T03:35:32Z

lib/default-theme/NavLinks.vue

+      }
+      return this.$site.themeConfig.nav[this.$basepath]
+    },
+    nav() {


space before parens

yyx990803 · 2018-04-18T03:36:23Z

docs/.vuepress/config.js

@@ -43,6 +69,22 @@ module.exports = {
            'deploy'
          ]
        }
+      ],
+      '/zh/guide/': [


sidebar 配置除了 title 之外其实是一样的，可以抽取出来

yyx990803 · 2018-04-18T03:37:24Z

docs/zh/config/README.md

+  ]
+}
+```
+


新加了一个 host 选项，可以补上

Fixed at b794126

yyx990803 · 2018-04-18T03:39:08Z

Very nice job again! Only some small things.

ulivz · 2018-04-18T04:15:29Z

I just found that it has been merged 😂. In fact, I am still working on the automatic extraction of sidebar title for different locales.

I'll open another PR for that later today.

yyx990803 · 2018-04-18T04:29:59Z

@ulivz oh I didn't mean automatic extraction... I simply used a function inside config.js itself. I think we should still allow possible different sidebar configs for different langs.

ulivz · 2018-04-18T04:58:14Z

I just went to lunch and stopped working. well, you are right, once I really do that function, it will violate the principle of simplicity. thanks, good night.

ulivz added 30 commits April 14, 2018 16:42

dropdown - init

0494566

add nav link component to distinguish internal and external link

121e6ca

enhance the active state of dropdown link

3ddca36

beautify font weight for dropdown link and clean code

72be30c

clean code

4bccf3a

update doc

5ac3c2a

update README

dbb7a08

address comments

50689ea

fix jumpy link

6de2efa

i18n - init

a760d59

address comments

7eb2563

use exact match mode for route link

94c2236

Merge branch 'dropdown' into i18n

0c53333

support configurable i18n

e30c580

translate README of guide

c6188b9

tweaks translations and update the actionLink

d414794

add sidebar config for zh

8a131a9

translate basic-config and getting-started

711e772

refactor code

34d8d78

implement nested links in dropdown

6c9e1a4

clean dropdown type

5ca1d02

fix cursor status

7c6d462

chore: tweaks

96c30c5

Merge branch 'master' into dropdown

3397dc2

Merge branch 'dropdown' into i18n

f8e10cf

zh - translate guide/assets

7ea050e

zh - translate guide/markdown

00e6430

zh - translate guide/using-vue

dbf07fb

zh - translate guide/custom-themes

9506184

zh - translate guide/deploy

8a900a4

chore: fix merge conflict

645c22d

ulivz added 9 commits April 17, 2018 02:32

Merge branch 'master' into multiple-language-support

028669b

support multiple langs for title and homepage link

2d76589

handle for lang and description - dev & build

ddf759f

handle description meta at dev mode

c779dde

Merge branch 'master' into multiple-language-support

5c7190d

translate latest updated doc

e64fd82

Complete proofreading

4e769a6

feat: Auto-generated language dropdown if user configured langs

beac14f

feat: Try to stay on the current page When user switch the language

b8dc3f0

ulivz added 3 commits April 18, 2018 04:04

chore: clean code

f2fb2d9

chore: clean code

4f1b004

fix: typo

c5a2079

feat: support override description meta with yaml front matter

961cf2d

ulivz mentioned this pull request Apr 18, 2018

Overriding global meta description #112

Closed

yyx990803 requested changes Apr 18, 2018

View reviewed changes

ulivz added 2 commits April 18, 2018 11:51

replace those IE11-incompatible API with ES5

1c31f82

docs: document config.host for zh-CN

b794126

yyx990803 merged commit 8bbc5f3 into vuejs:master Apr 18, 2018

ulivz mentioned this pull request Apr 18, 2018

Support for korean language #117

Closed

snyk-bot mentioned this pull request Dec 12, 2020

[Snyk] Upgrade markdown-it-table-of-contents from 0.4.4 to 0.5.0 turkdevops/vuepress#33

Merged

snyk-bot mentioned this pull request Sep 15, 2021

[Snyk] Fix for 1 vulnerabilities qteam1/vuepress#24

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple Language Support + Complete Chinese Translation #48

Multiple Language Support + Complete Chinese Translation #48

ulivz commented Apr 15, 2018 •

edited

yyx990803 commented Apr 16, 2018 •

edited

ulivz commented Apr 16, 2018 •

edited

ulivz commented Apr 17, 2018 •

edited

ulivz commented Apr 17, 2018 •

edited

yyx990803 Apr 18, 2018

ulivz Apr 18, 2018

yyx990803 Apr 18, 2018

yyx990803 Apr 18, 2018

yyx990803 Apr 18, 2018

yyx990803 Apr 18, 2018

yyx990803 Apr 18, 2018

ulivz Apr 18, 2018

yyx990803 commented Apr 18, 2018

ulivz commented Apr 18, 2018

yyx990803 commented Apr 18, 2018

ulivz commented Apr 18, 2018

Multiple Language Support + Complete Chinese Translation #48

Multiple Language Support + Complete Chinese Translation #48

Conversation

ulivz commented Apr 15, 2018 • edited

Fixed for #41, and this PR is based on #13.

Though I have read and modified repeatedly, there may still be some places where translation is not detailed enough. If you find it, feel free to leave your comments. Thank you.

Description

Preview

TODO

yyx990803 commented Apr 16, 2018 • edited

ulivz commented Apr 16, 2018 • edited

ulivz commented Apr 17, 2018 • edited

ulivz commented Apr 17, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yyx990803 commented Apr 18, 2018

ulivz commented Apr 18, 2018

yyx990803 commented Apr 18, 2018

ulivz commented Apr 18, 2018

ulivz commented Apr 15, 2018 •

edited

yyx990803 commented Apr 16, 2018 •

edited

ulivz commented Apr 16, 2018 •

edited

ulivz commented Apr 17, 2018 •

edited

ulivz commented Apr 17, 2018 •

edited