diff --git a/public/resources/css/_translate.scss b/public/resources/css/_translate.scss
index f23032597f..9e8833e1d2 100644
--- a/public/resources/css/_translate.scss
+++ b/public/resources/css/_translate.scss
@@ -1,4 +1,4 @@
-.docs-content {
+.docs-content, .l-content, .main-footer {
   display: none;
   .original-english {
     border-top: 1px dashed $regal;
diff --git a/public/translate/cn/translate.js b/public/translate/cn/translate.js
index 31a455497d..891ef1d722 100644
--- a/public/translate/cn/translate.js
+++ b/public/translate/cn/translate.js
@@ -1,119 +1,125 @@
 // TODO: refactor me!
 var sourceVisible = localStorage.getItem('source-visible') === 'true';
 (function ($) {
-    var content = document.querySelector('article.docs-content');
-    var footer = document.querySelector('.main-footer');
+  var content = document.querySelector('article');
+  var footer = document.querySelector('.main-footer');
+  processContainer(content);
+  processContainer(footer);
 
-    processContainer(content);
+  if (!sourceVisible) {
+    var nodes = document.querySelectorAll('.original-english');
+    _.each(nodes, function (node) {
+      $(node).addClass('hidden');
+    });
+  }
 
-    if (!sourceVisible) {
-        var nodes = document.querySelectorAll('.original-english');
-        _.each(nodes, function (node) {
-            $(node).addClass('hidden');
-        });
+  // restore
+  content.style.display = 'block';
+  footer.style.display = 'block';
+
+  /**
+   * Process container recursively.
+   * @param container
+   */
+  function processContainer(container) {
+    for (var i = 0; i < container.children.length; i++) {
+      var node = container.children[i];
+
+      // ignore example code.
+      if (node.classList.contains('code-example') ||
+        node.tagName === 'CODE-EXAMPLE') {
+        continue;
+      }
+
+      switch (node.tagName) {
+        case 'P':
+        case 'H1':
+        case 'H2':
+        case 'H3':
+        case 'H4':
+        case 'H5':
+        case 'H6':
+        case 'HEADER':
+        case 'LI':
+          if (processBlock(node)) {
+            i++;
+          }
+          break;
+        case 'TD':
+        case 'TH':
+          processContainer(node);
+          // return; // stop
+          break;
+        default:
+          if (node.children.length > 0) {
+            processContainer(node);
+            // For <li><p>...</p></li>, processes it as block.
+            if (node.children.length === 1) {
+              if (processBlock(node)) {
+                i++;
+              }
+            }
+          }
+          break;
+      }
     }
+  }
 
-    // restore
-    content.style.display = 'block';
-    footer.style.display = 'block';
+  /**
+   * Process block elements. The first element is original english, the
+   * second element is translated one.
+   * @param current the first element.
+   * @returns {boolean} Is success?
+   */
+  function processBlock(current) {
+    var sibling = current.nextElementSibling;
+    var $current = $(current);
+    var $sibling = $(sibling);
 
-    /**
-     * Process container recursively.
-     * @param container
-     */
-    function processContainer(container) {
-        for (var i = 0; i < container.children.length; i++) {
-            var node = container.children[i];
-
-            // ignore example code.
-            if (node.classList.contains('code-example') ||
-                node.tagName === 'CODE-EXAMPLE') {
-                continue;
-            }
-
-            switch (node.tagName) {
-                case 'P':
-                case 'H1':
-                case 'H2':
-                case 'H3':
-                case 'H4':
-                case 'H5':
-                case 'H6':
-                case 'HEADER':
-                    if (processBlock(node)) {
-                        i++;
-                    }
-                    break;
-                case 'TD':
-                case 'TH':
-                    processContainer(node);
-                    return; // stop
-                default:
-                    if (node.children.length > 0) {
-                        processContainer(node);
-                        // For <li><p>...</p></li>, processes it as block.
-                        if (node.children.length === 1) {
-                            if (processBlock(node)) {
-                                i++;
-                            }
-                        }
-                    }
-                    break;
-            }
-        }
-    }
-
-    /**
-     * Process block elements. The first element is original english, the
-     * second element is translated one.
-     * @param current the first element.
-     * @returns {boolean} Is success?
-     */
-    function processBlock(current) {
-        var sibling = current.nextElementSibling;
-        var $current = $(current);
-        var $sibling = $(sibling);
-
-        if (sibling) {
-            if (isClonedNode(current, sibling)) {
-                if (isPureEnglish(current.textContent)) {
-                    $current.addClass('original-english');
-                    $sibling.addClass('translated');
-                    $sibling.addClass('translated-cn');
-                    $sibling.after($current);
-                    $sibling.on('click', function() {
-                       $current.toggleClass('hidden');
-                    });
-                    return true;
-                }
-
-                console.error('Error: ' + current.innerText);
-            }
+    if (sibling) {
+      if (isClonedNode(current, sibling)) {
+        if (isPureEnglish(current.textContent)) {
+          $current.addClass('original-english');
+          $sibling.addClass('translated');
+          $sibling.addClass('translated-cn');
+          $sibling.after($current);
+          $sibling.on('click', function () {
+            $current.toggleClass('hidden');
+          });
+          return true;
         }
 
-        return false;
+        console.error('Error: ' + current.innerText);
+      }
     }
 
-    function isPureEnglish(text) {
-        return !/\p{Han}/.test(text);
-    }
+    return false;
+  }
 
-    function attributesToString(node) {
-        return _.chain(node.attributes)
-            .map(function (value) {
-                if (value.name === 'id' || value.name === 'class') {
-                    return '';
-                } else {
-                    return value.name + '=' + value.value;
-                }
-            })
-            .sortBy()
-            .value()
-            .join(';');
+  function isPureEnglish(text) {
+    if(text){
+      return !/\p{Han}/.test(text);
     }
+    return false;
 
-    function isClonedNode(node1, node2) {
-        return node1.tagName === node2.tagName &&
-            attributesToString(node1) === attributesToString(node2);
-    }
+  }
+
+  function attributesToString(node) {
+    return _.chain(node.attributes)
+      .map(function (value) {
+        if (value.name === 'id' || value.name === 'class') {
+          return '';
+        } else {
+          return value.name + '=' + value.value;
+        }
+      })
+      .sortBy()
+      .value()
+      .join(';');
+  }
+
+  function isClonedNode(node1, node2) {
+    return node1.tagName === node2.tagName &&
+      attributesToString(node1) === attributesToString(node2);
+  }
 })(angular.element);