* add page reload button to document in debug mode.

index.html

@@ -73,6 +73,7 @@
           <i class="icon icon-star"></i>
           <h2><a class="name" href="###">图标</a></h2>
           <button type="button" class="btn btn-link" id="pageTogger" title="折叠/展开 章节" data-toggle="tooltip"></button>
+          <button data-toggle="tooltip" title="刷新" type="button" class="btn btn-link" id="pageReloadBtn"><i class="icon-repeat"></i></button>
           <button data-toggle="tooltip" title="关闭（ESC）" type="button" class="btn btn-link path-close-btn path-btn" id="pageCloseBtn"><i class="path-1"></i></button>
         </div>
       </div>

src/js/doc.js

@@ -58,7 +58,10 @@
     };
 
     var debug = getQueryString('debug', 0);
-    if(debug) console.warn("DEBUG ENABLED.");
+    if(debug) {
+        console.warn("DEBUG ENABLED.");
+        $('#pageReloadBtn').show();
+    }
 
     var chapters = {
         basic       : {col: 1},
@@ -81,7 +84,7 @@
         UNDEFINED = undefined,
         dataVersion,
         storageEnable,
-        docIndex, iconsIndex,
+        docIndex, iconsIndex, currentSection,
         zuiPkg,
         pkgLibs = {
             standard: null,
@@ -1154,12 +1157,115 @@
         if(!delayMutedPageLoading) stopPageLoading();
     };
 
+    var loadPage = function(section, topic, waitRemote) {
+        section = section || currentSection;
+
+        $pageContent.empty();
+        $page.addClass('loading');
+        $pageLoader.removeClass('with-error').addClass('loading');
+        var lastShowDataCall;
+
+        loadData(section.url, function(data, dataType) {
+            var showData = function() {
+                if(data && window.marked && section.targetType === 'markdown') {
+                    var $article = $();
+                    var frontMatterIndex = data.indexOf('\n---\n');
+                    if(frontMatterIndex > -1) data = data.substr(frontMatterIndex + 5);
+                    var $markdown = $(window.marked(data));
+                    var $lastSection, checkFirstH1 = true;
+                    var hasH2 = $markdown.filter('h2').length > 0;
+                    var $lastTemplate = null;
+                    $markdown.each(function() {
+                        var $tag = $(this);
+                        var tagName = $tag.prop('tagName');
+                        if(!tagName || tagName === 'STYLE' || tagName === 'SCRIPT') {
+                            $article = $article.add($tag);
+                            return;
+                        }
+                        if(tagName === 'TEMPLATE' || tagName === 'HOLDER') {
+                            $lastTemplate = $tag;
+                            return;
+                        } else if($lastTemplate) {
+                            $tag.attr($lastTemplate.allAttrs());
+                            $lastTemplate = null;
+                        }
+                        if(tagName === 'TABLE') {
+                            $tag.addClass('table');
+                        }
+                        if(checkFirstH1) {
+                            if(tagName === 'H1') {
+                                $pageHeader.find('h2 > .name').text($tag.html());
+                            }
+                            checkFirstH1 = false;
+                            return;
+                        }
+                        if(tagName === 'EXAMPLE') {
+                            $tag = $('<div/>').attr($tag.allAttrs()).html($tag.html()).addClass('example');
+                        }
+                        if((hasH2 && (tagName === 'H1' || tagName === 'H2')) || (!hasH2 && tagName === 'H3')) {
+                            if($lastSection) {
+                                $article = $article.add($lastSection);
+                            }
+                            $lastSection = $('<section><header><h3>' + $tag.html() + '</h3></header><article></article></section>');
+                        } else {
+                            if(hasH2) {
+                                if(tagName === 'H3') {
+                                    $tag = $('<h4>').html($tag.html());
+                                } else if(tagName === 'H4') {
+                                    $tag = $('<h5>').html($tag.html());
+                                } else if(tagName === 'H5') {
+                                    $tag = $('<h6>').html($tag.html());
+                                }
+                            }
+                            if(!$lastSection) {
+                                $lastSection = $('<article></article>');
+                            }
+                            if($lastSection.prop('tagName') === 'ARTICLE') {
+                                $lastSection.append($tag);
+                            } else {
+                                $lastSection.children('article').append($tag);
+                            }
+                        }
+                    });
+                    if($lastSection) {
+                        $article = $article.add($lastSection);
+                    }
+                    $pageContent.empty().append($article);
+                } else {
+                    try {
+                        $pageContent.html(data);
+                    } catch (e) {
+                        console.error('Page data has error: ', {content: data, error: e});
+                    }
+                }
+                $pageBody.scrollTop(0);
+                showPageTopic(topic);
+                handlePageLoad();
+                $pageAttrs.show();
+            }
+            if(lastShowDataCall) clearTimeout(lastShowDataCall);
+            if($page.hasClass('openning')) {
+                lastShowDataCall = setTimeout(showData, 700);
+            } else {
+                showData();
+            }
+        }, 400, waitRemote);
+
+        if($body.hasClass('page-open')) {
+            if(debug) console.log('open section in open page', section);
+            return;
+        }
+
+        $body.addClass('page-open');
+    };
+
     var openPage = function($section, section, topic) {
         var pageId = section.chapter + '-' + section.id;
         if($body.hasClass('page-open') && pageId === $body.attr('data-page')) {
             if(debug) console.warn('The page already showed.');
             return;
         }
+        currentSection = section;
         chooseSection($section, false, true);
 
         // Send ga data
@@ -1274,103 +1380,7 @@
             }
         }
 
-        $pageContent.empty();
-        $page.addClass('loading');
-        $pageLoader.removeClass('with-error').addClass('loading');
-        var lastShowDataCall;
-
-        loadData(section.url, function(data) {
-            var showData = function() {
-                if(data && window.marked && section.targetType === 'markdown') {
-                    var $article = $();
-                    var frontMatterIndex = data.indexOf('\n---\n');
-                    if(frontMatterIndex > -1) data = data.substr(frontMatterIndex + 5);
-                    var $markdown = $(window.marked(data));
-                    var $lastSection, checkFirstH1 = true;
-                    var hasH2 = $markdown.filter('h2').length > 0;
-                    var $lastTemplate = null;
-                    $markdown.each(function() {
-                        var $tag = $(this);
-                        var tagName = $tag.prop('tagName');
-                        if(!tagName || tagName === 'STYLE' || tagName === 'SCRIPT') {
-                            $article = $article.add($tag);
-                            return;
-                        }
-                        if(tagName === 'TEMPLATE' || tagName === 'HOLDER') {
-                            $lastTemplate = $tag;
-                            return;
-                        } else if($lastTemplate) {
-                            $tag.attr($lastTemplate.allAttrs());
-                            $lastTemplate = null;
-                        }
-                        if(tagName === 'TABLE') {
-                            $tag.addClass('table');
-                        }
-                        if(checkFirstH1) {
-                            if(tagName === 'H1') {
-                                $pageHeader.find('h2 > .name').text($tag.html());
-                            }
-                            checkFirstH1 = false;
-                            return;
-                        }
-                        if(tagName === 'EXAMPLE') {
-                            $tag = $('<div/>').attr($tag.allAttrs()).html($tag.html()).addClass('example');
-                        }
-                        if((hasH2 && (tagName === 'H1' || tagName === 'H2')) || (!hasH2 && tagName === 'H3')) {
-                            if($lastSection) {
-                                $article = $article.add($lastSection);
-                            }
-                            $lastSection = $('<section><header><h3>' + $tag.html() + '</h3></header><article></article></section>');
-                        } else {
-                            if(hasH2) {
-                                if(tagName === 'H3') {
-                                    $tag = $('<h4>').html($tag.html());
-                                } else if(tagName === 'H4') {
-                                    $tag = $('<h5>').html($tag.html());
-                                } else if(tagName === 'H5') {
-                                    $tag = $('<h6>').html($tag.html());
-                                }
-                            }
-                            if(!$lastSection) {
-                                $lastSection = $('<article></article>');
-                            }
-                            if($lastSection.prop('tagName') === 'ARTICLE') {
-                                $lastSection.append($tag);
-                            } else {
-                                $lastSection.children('article').append($tag);
-                            }
-                        }
-                    });
-                    if($lastSection) {
-                        $article = $article.add($lastSection);
-                    }
-                    $pageContent.empty().append($article);
-                } else {
-                    try {
-                        $pageContent.html(data);
-                    } catch (e) {
-                        console.error('Page data has error: ', {content: data, error: e});
-                    }
-                }
-                $pageBody.scrollTop(0);
-                showPageTopic(topic);
-                handlePageLoad();
-                $pageAttrs.show();
-            }
-            if(lastShowDataCall) clearTimeout(lastShowDataCall);
-            if($page.hasClass('openning')) {
-                lastShowDataCall = setTimeout(showData, 700);
-            } else {
-                showData();
-            }
-        }, 400);
-
-        if($body.hasClass('page-open')) {
-            if(debug) console.log('open section in open page', section);
-            return;
-        }
-
-        $body.addClass('page-open');
+        loadPage(section, topic);
 
         toggleCompactMode(true, function() {
             checkScrollbar();
@@ -2146,6 +2156,12 @@
             }
         });
 
+        if(debug) {
+            $('#pageReloadBtn').on('click', function() {
+                loadPage(null, null, true);
+            });
+        }
+
         // init code copy function
         initCopyable();
 

src/less/doc.less

@@ -1462,6 +1462,18 @@ body.query-enabled {
   border-radius: 4px;
 }
 
+#pageReloadBtn {
+  position: absolute;
+  right: 70px;
+  top: 5px;
+  width: 48px;
+  height: 48px;
+  color: @color-gray;
+  display: none;
+
+  &:hover {color: @color-fore}
+}
+
 #pageBody {
   padding: 15px 0;
   position: absolute;