[FLINK-11527] Support multiple languages for the framework of flink-web

Gemfile

@@ -21,9 +21,11 @@ source 'https://rubygems.org'
 ruby '>=1.9.0'
 
 # Dependencies required to build the Flink docs
-gem 'jekyll', '2.5.3'
+gem 'jekyll', '3.0.5'
 gem 'kramdown', '1.10.0'
 gem 'pygments.rb', '0.6.3'
 gem 'therubyracer', '0.12.2'
 # explicitly require yajl-ruby (dependency of jekyll) in a version that works with Ruby 2.4
 gem 'yajl-ruby', '1.2.2'
+gem 'jekyll-multiple-languages', '2.0.3'
+gem 'jekyll-paginate', '1.1.0'

_config.yml

@@ -273,6 +273,9 @@ defaults:
 markdown: KramdownPygments
 highlighter: pygments
 
+# The all languages used
+languages: ['en', 'zh']
+
 kramdown:
     toc_levels: 1..3
     input: GFM
@@ -286,7 +289,7 @@ redcarpet:
 
 exclude: [docker, flink-src-repo]
 
-gems: [jekyll-paginate]
+gems: ['jekyll-multiple-languages', 'jekyll-paginate']
 
 host: 0.0.0.0
 

_data/i18n.yml

@@ -0,0 +1,26 @@
+en:
+    what_is_flink: What is Apache Flink?
+    use_case: Use Cases
+    powered_by: Powered By
+    faq: FAQ
+    downloads: Downloads
+    tutorials: Tutorials
+    documentation: Documentation
+    getting_help: Getting Help
+    flink_blog: Flink Blog
+    community_project: Community & Project Info
+    how_to_contribute: How to Contribute
+
+zh:
+    what_is_flink: Apache Flink 是什么?
+    use_case: 应用场景
+    powered_by: Flink 用户
+    faq: 常见问题
+    downloads: 下载
+    tutorials: 教程
+    documentation: 文档
+    getting_help: 获取帮助
+    flink_blog: Flink 博客
+    community_project: 社区 & 项目信息
+    how_to_contribute: 如何参与贡献
+

_includes/navbar.html

@@ -1,4 +1,10 @@
-  <!-- Top navbar. -->
+{% if page.is_default_language %}
+  {% capture baseurl_i18n %}{{ site.baseurl }}{% endcapture %}
+{% else %}
+  {% capture baseurl_i18n %}{{ site.baseurl }}/{{ page.language }}{% endcapture %}
+{% endif %}
+
+<!-- Top navbar. -->
     <nav class="navbar navbar-default">
         <!-- The logo. -->
         <div class="navbar-header">
@@ -8,7 +14,7 @@
             <span class="icon-bar"></span>
           </button>
           <div class="navbar-logo">
-            <a href="{{ site.baseurl }}/">
+            <a href="{{ baseurl_i18n }}/">
               <img alt="Apache Flink" src="{{ site.baseurl }}/img/flink-header-logo.svg" width="147px" height="73px">
             </a>
           </div>
@@ -22,64 +28,79 @@
 
             <!-- What is Stream Processing? -->
             <!--
-            <li{% if page.url == '/streamprocessing1.html' or page.url == '/streamprocessing2.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/streamprocessing1.html">What is Stream Processing?</a></li>
+            <li{% if page.url contains '/streamprocessing1.html' or page.url contains '/streamprocessing2.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/streamprocessing1.html">What is Stream Processing?</a></li>
             -->
 
             <!-- What is Flink? -->
-            <li{% if page.url == '/flink-architecture.html' or page.url == '/flink-applications.html' or page.url == '/flink-operations.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/flink-architecture.html">What is Apache Flink?</a></li>
+            <li{% if page.url contains '/flink-architecture.html' or page.url contains '/flink-applications.html' or page.url contains '/flink-operations.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/flink-architecture.html">{{ site.data.i18n[page.language].what_is_flink }}</a></li>
 
             <!-- Use cases -->
-            <li{% if page.url == '/usecases.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/usecases.html">Use Cases</a></li>
+            <li{% if page.url contains '/usecases.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/usecases.html">{{ site.data.i18n[page.language].use_case }}</a></li>
 
             <!-- Powered by -->
-            <li{% if page.url == '/poweredby.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/poweredby.html">Powered By</a></li>
+            <li{% if page.url contains '/poweredby.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/poweredby.html">{{ site.data.i18n[page.language].powered_by }}</a></li>
 
             <!-- FAQ -->
-            <li{% if page.url == '/faq.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/faq.html">FAQ</a></li>
+            <li{% if page.url contains '/faq.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/faq.html">{{ site.data.i18n[page.language].faq }}</a></li>
 
             &nbsp;
             <!-- Second menu section aims to support Flink users -->
 
             <!-- Downloads -->
-            <li{% if page.url == '/downloads.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/downloads.html">Downloads</a></li>
+            <li{% if page.url contains '/downloads.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/downloads.html">{{ site.data.i18n[page.language].downloads }}</a></li>
 
             <!-- Quickstart -->
             <li>
-              <a href="{{ site.docs-stable }}/quickstart/setup_quickstart.html" target="_blank">Tutorials <small><span class="glyphicon glyphicon-new-window"></span></small></a>
+              <a href="{{ site.docs-stable }}/quickstart/setup_quickstart.html" target="_blank">{{ site.data.i18n[page.language].tutorials }} <small><span class="glyphicon glyphicon-new-window"></span></small></a>
             </li>
 
             <!-- Documentation -->
             <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Documentation<span class="caret"></span></a>
+              <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ site.data.i18n[page.language].documentation }}<span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="{{ site.docs-stable }}" target="_blank">{{site.FLINK_VERSION_STABLE_SHORT}} (Latest stable release) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
                 <li><a href="{{ site.docs-snapshot }}" target="_blank">{{site.FLINK_VERSION_LATEST_SHORT}} (Snapshot) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
               </ul>
             </li>
 
             <!-- getting help -->
-            <li{% if page.url == '/gettinghelp.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/gettinghelp.html">Getting Help</a></li>
+            <li{% if page.url contains '/gettinghelp.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/gettinghelp.html">{{ site.data.i18n[page.language].getting_help }}</a></li>
 
             <!-- Blog -->
-            <li{% if page.url contains '/blog/' or page.url contains '/news/' %} class="active"{% endif %}><a href="{{ site.baseurl }}/blog/"><b>Flink Blog</b></a></li>
+            <li{% if page.url contains '/blog/' or page.url contains '/news/' %} class="active"{% endif %}><a href="{{ site.baseurl }}/blog/"><b>{{ site.data.i18n[page.language].flink_blog }}</b></a></li>
 
             &nbsp;
 
             <!-- Third menu section aim to support community and contributors -->
 
             <!-- Community -->
-            <li{% if page.url == '/community.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/community.html">Community &amp; Project Info</a></li>
+            <li{% if page.url contains '/community.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/community.html">{{ site.data.i18n[page.language].community_project }}</a></li>
 
             <!-- Contribute -->
-            <li{% if page.url == '/how-to-contribute.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/how-to-contribute.html">How to Contribute</a></li>
+            <li{% if page.url contains '/how-to-contribute.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/how-to-contribute.html">{{ site.data.i18n[page.language].how_to_contribute }}</a></li>
 
             <!-- GitHub -->
             <li>
               <a href="https://github.com/apache/flink" target="_blank">Flink on GitHub <small><span class="glyphicon glyphicon-new-window"></span></small></a>
             </li>
 
-          </ul>
+            &nbsp;
 
+            <!-- Language Switcher -->
+            <li>
+              {% if page.is_default_language %}
+                {% if page.url contains '/blog/' %}
+                  <!-- link to the Chinese home page when current is blog page -->
+                  <a href="{{ site.baseurl }}/zh">中文版</a>
+                {% else %} 
+                  <a href="{{ site.baseurl }}/zh{{ page.url }}">中文版</a>   
+                {% endif %}
+              {% else %}
+                <a href="{{ site.baseurl }}{{ page.url | remove_first: 'zh/' }}">English</a>
+              {% endif %}
+            </li>
+
+          </ul>
 
           <ul class="nav navbar-nav navbar-bottom">
           <hr />
@@ -92,4 +113,4 @@
 
           </ul>
         </div><!-- /.navbar-collapse -->
-    </nav>
+    </nav>