Translation
Yunikorn website adopting Docusaurus manages documentations. Docusaurus i18n system allows developer to translate documentations. For adding a new language translation, developers should do following operations.
Modifying the docusaurus.config.js for supporting the new language
Assume the translations by a new language keyword.
Expected results will be like this figure.
Current Yunikorn website include the en and zh-cn documentaions.
If developer want to add a new translation with new language keyword including fr, jp, the developers need to modify the i18n
in docusaurus.config.js
.
i18n: {
defaultLocale: 'en',
locales: ['en', 'zh-cn', '<new language keyword>'],
localeConfigs: {
en: {
label: 'English',
},
"zh-cn": {
label: '中文',
},
"<new language keyword>": {
label: 'test',
}
},
},
Updating the help information in local-build.sh
Adding the new language keyword to the locale list in print_usage
function.
Usage: $(basename "$0") run [locale] | build | clean | help
run build the website, and launch the server in a docker image.
a locale can be specified, currently supported: "en", "zh-cn", "<new language keyword>"
Copying latest files to i18n
mkdir -p i18n/<new language keyword>/docusaurus-plugin-content-docs/current
cp -r docs/** i18n/<new language keyword>/docusaurus-plugin-content-docs/current
mkdir -p i18n/<new language keyword>/docusaurus-plugin-content-pages
cp -r src/pages/** i18n/<new language keyword>/docusaurus-plugin-content-pages
mkdir -p i18n/<new language keyword>/docusaurus-theme-classic
Adding the translated information in sidebar.json and footer.json
Create sidebar.json and and footer.json in docusaurus-theme-classic. For example, the footer.json context is following.
{
"link.item.label.Get Involved": {
"message": "参与"
},
"link.title.Code Repositories": {
"message": "代码库"
},
"link.item.label.People": {
"message": "人们"
},
"link.title.Blog": {
"message": "博客"
},
"link.title.Community": {
"message": "社区"
}
}
linking img, assest and styles.module.css
Creating linking files in the i18n/new language keyword/docusaurus-plugin-content-pages
.
# cleaning the duplicate files
rm -rf img
rm styles.module.css
# linking
ln -s ../../../static/img
ln -s ../../../src/pages/styles.module.css
Creating the linking file in the 'i18n/new language keyword/docusaurus-plugin-content-docs/current'.
# cleaning the duplicate files
rm -rf assests
# linking
ln -s ../../../../docs/assets
Adopting relative paths
There are some image urls adopting absolute path in src/pages/index.js
and adopting absolute path could cause png missing.
Developers could make sure that the img link in /i18n/new language keyword/docusaurus-plugin-content-pages/index.js
is work.
For example, there is a resource-scheduling.png
in index.js
and the png url is /img/resource-scheduling.png
.
/img/resource-scheduling.png -> ./img/resource-scheduling.png
Test
./local-build.sh run <new language keyword>