* add external link tip to section card heading.

docs/2/css/doc.css

@@ -490,6 +490,12 @@ body {
        -o-transition: right .1s cubic-bezier(.175, .885, .32, 1);
           transition: right .1s cubic-bezier(.175, .885, .32, 1);
 }
+#grid .card[data-target="external"].choosed:before {
+  content: '按Enter键在新窗口中打开';
+}
+#grid .card[data-target=""].choosed:before {
+  display: none;
+}
 #grid .card:hover,
 #grid .card.open {
   border-color: #e5e5e5;
@@ -847,6 +853,22 @@ body {
 #grid .chapter[data-accent="blue"] .color-accent {
   color: #00acc1;
 }
+#grid .chapter[data-accent="blue"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  display: inline-block;
+  margin-left: 5px;
+  font-family: ZenIcon;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  content: '\e684';
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 #grid .chapter[data-accent="primary"] .chapter-heading {
   color: #3280fc;
 }
@@ -907,6 +929,22 @@ body {
 #grid .chapter[data-accent="primary"] .color-accent {
   color: #3280fc;
 }
+#grid .chapter[data-accent="primary"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  display: inline-block;
+  margin-left: 5px;
+  font-family: ZenIcon;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  content: '\e684';
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 #grid .chapter[data-accent="yellow"] .chapter-heading {
   color: #fd9927;
 }
@@ -967,6 +1005,22 @@ body {
 #grid .chapter[data-accent="yellow"] .color-accent {
   color: #fd9927;
 }
+#grid .chapter[data-accent="yellow"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  display: inline-block;
+  margin-left: 5px;
+  font-family: ZenIcon;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  content: '\e684';
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 #grid .chapter[data-accent="green"] .chapter-heading {
   color: #2fb936;
 }
@@ -1027,6 +1081,22 @@ body {
 #grid .chapter[data-accent="green"] .color-accent {
   color: #2fb936;
 }
+#grid .chapter[data-accent="green"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  display: inline-block;
+  margin-left: 5px;
+  font-family: ZenIcon;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  content: '\e684';
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 #grid .chapter[data-accent="red"] .chapter-heading {
   color: #ee4e2f;
 }
@@ -1087,6 +1157,22 @@ body {
 #grid .chapter[data-accent="red"] .color-accent {
   color: #ee4e2f;
 }
+#grid .chapter[data-accent="red"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  display: inline-block;
+  margin-left: 5px;
+  font-family: ZenIcon;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  content: '\e684';
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 #grid .chapter[data-accent="brown"] .chapter-heading {
   color: #bd7b46;
 }
@@ -1147,6 +1233,22 @@ body {
 #grid .chapter[data-accent="brown"] .color-accent {
   color: #bd7b46;
 }
+#grid .chapter[data-accent="brown"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  display: inline-block;
+  margin-left: 5px;
+  font-family: ZenIcon;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  content: '\e684';
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 #grid .chapter[data-accent="purple"] .chapter-heading {
   color: #8666b8;
 }
@@ -1207,6 +1309,22 @@ body {
 #grid .chapter[data-accent="purple"] .color-accent {
   color: #8666b8;
 }
+#grid .chapter[data-accent="purple"] .card[data-target="external"] > .card-heading.hover > h5 > a:after {
+  display: inline-block;
+  margin-left: 5px;
+  font-family: ZenIcon;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  content: '\e684';
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 body.input-query-focus #grid .card.choosed:before {
   right: 0;
 }

src/js/doc.js

@@ -198,13 +198,26 @@
             var chapterName = chapter.id;
             section.chapter = chapterName;
             section.chapterName = chapter.name;
+
+            var url = section.url;
+            if(typeof url === 'undefined') {
+                section.url = 'part/' + section.chapter + '-' + section.id + '.html';
+                section.target = 'page';
+            } else if(url && (url.toLowerCase().startsWith('http://') || url.toLowerCase().startsWith('https://'))) {
+                section.target = 'external';
+            } else {
+                section.target = '';
+            }
+
             var id = chapterName + '-' + section.id;
-            var $tpl = $sectionTemplate.clone().attr('id', 'section-' + id).data('section', section);
+            var $tpl = $sectionTemplate.clone().data('section', section);
             $tpl.attr({
+                'id': 'section-' + id,
                 'data-id': section.id,
                 'data-chapter': chapterName,
                 'data-order': order++,
-                'data-accent': chapter.accent
+                'data-accent': chapter.accent,
+                'data-target': section.target
             });
             var $head = $tpl.children('.card-heading');
             var sectionUrl = '#' + chapterName + '/' + section.id;
@@ -833,7 +846,6 @@
         // Send ga data
         var pageUrl = '#' + section.chapter + '/' + section.id;
         if(topic) pageUrl += '/' + topic;
-        console.log(section);
         window.document.title = section.chapterName + ' > ' + section.name + ' - ' + documentTitle;
         window.location.hash = pageUrl;
         if($.isFunction(ga)) ga('send','pageview', window.location.pathname + pageUrl);
@@ -928,23 +940,15 @@
             $section = $temp;
         }
 
-        var url = section.url;
-
-        if(url === null) {
-            if(debug) console.error("Open section stop by null url.");
-            return;
-        }
-
-        if(!url) {
-            url = 'part/' + section.chapter + '-' + section.id + '.html';
-            section.url = url;
-        }
-
-        url = url.toLowerCase();
-        if(url.startsWith('http://') || url.startsWith('https://') ) {
-            window.open(url, '_blank');
-        } else {
-            openPage($section, section, topic);
+        switch(section.target) {
+            case 'external':
+                window.open(section.url, '_blank');
+                break;
+            case 'page':
+                openPage($section, section, topic);
+                break;
+            default:
+                if(debug) console.error("Open section failed: unknown target.");
         }
     };
 

src/less/doc.less

@@ -88,6 +88,15 @@
   .color-accent {
     color: @color;
   }
+
+  .card[data-target="external"] > .card-heading.hover {
+    > h5 > a:after {
+      display: inline-block;
+      margin-left: 5px;
+      .icon-zenicon();
+      content: @icon-external-link;
+    }
+  }
 }
 
 .page-accent(@color; @pale) {
@@ -674,6 +683,14 @@ body {
       }
     }
 
+    &[data-target="external"].choosed:before {
+      content: '按Enter键在新窗口中打开';
+    }
+
+    &[data-target=""].choosed:before {
+      display: none;
+    }
+
     &:hover, &.open {
       border-color: @color-gray-lighter;
     }