Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple Language Support + Complete Chinese Translation #48

Merged
merged 56 commits into from
Apr 18, 2018
Merged

Multiple Language Support + Complete Chinese Translation #48

merged 56 commits into from
Apr 18, 2018

Conversation

ulivz
Copy link
Member

@ulivz ulivz commented Apr 15, 2018

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:

  1. Create a directory in the name of language at .vuepress
  2. 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

TODO

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

@yyx990803
Copy link
Member

yyx990803 commented Apr 16, 2018

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
Copy link
Member Author

ulivz commented Apr 16, 2018

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

@ulivz
Copy link
Member Author

ulivz commented Apr 17, 2018

@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
Copy link
Member Author

ulivz commented Apr 17, 2018

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! all incompatible API issues are fixed at 1c31f82

// 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)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


export default {
components: { OutboundLink, NavLink, DropdownLink },
computed: {
userNav() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

space before parens

}
return this.$site.themeConfig.nav[this.$basepath]
},
nav() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

space before parens

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

]
}
```

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed at b794126

@yyx990803
Copy link
Member

Very nice job again! Only some small things.

@yyx990803 yyx990803 merged commit 8bbc5f3 into vuejs:master Apr 18, 2018
@ulivz
Copy link
Member Author

ulivz commented Apr 18, 2018

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
Copy link
Member

@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
Copy link
Member Author

ulivz commented Apr 18, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants