markdown 基础语法扩展，开启 footnote 支持 [#39]

files/amWiki.css

@@ -101,6 +101,13 @@ body{position:relative;background:#e7e8eb;}
 
 .main{position:relative;height:100%;margin-left:250px;}
 .main .markdown-body{padding:45px;}
+
+.main .footnote{position:relative;padding-top:35px;border-top:#ddd 1px solid;}
+.main .footnote i{position:absolute;top:5px;left:10px;font-size:15px;font-style:normal;color:#999;}
+.main .footnote li:focus{background:#EAFFEA;}
+.main .footnote svg{display:inline-block;width:14px;height:14px;margin-bottom:-1px;}
+.main .footnote-none{width:0;height:0;overflow:hidden;}
+
 .main-sibling{display:none;width:100%;padding:30px 45px 20px;font-size:14px;border-top:1px solid #e7e7eb;}
 .main-sibling.on{display:block;}
 .main-sibling p{position:relative;height:22px;}

files/amWiki.docs.js

@@ -123,28 +123,33 @@
     //创建脚注
     Docs.prototype.createFootnote = function (text) {
         var footnotes = [];
-        var footReg = /\[\^([ a-zA-Z\d]+)]: ?([\S\s]+?)(?=\[\^(?:[ a-zA-Z\d]+)]|\n\n|$)/g;
         var noteReg = /\[\^([ a-zA-Z\d]+)]/g;
-        var noteTmp = '<sup><a href="#fn:foot{index}" name="#fn:note{index}">[{index}]</a></sup>';
+        var footReg = /\[\^([ a-zA-Z\d]+)]: ?([\S\s]+?)(?=\[\^(?:[ a-zA-Z\d]+)]|\n\n|$)/g;
+        var templates = $.trim($('#template\\:footnote').text()).split(/[\r\n]+\s*/g);
         var html = '';
+        //提取脚注内容
         text = text.replace(footReg, function (match, s1, s2, index) {
-            //console.log(match, s1, index);
+            var title = '';
+            s2 = s2.replace(/"(.*?)"\s*$/, function (m, ss1) {
+                title = ss1;
+                return '';
+            });
             footnotes.push({
                 index: index,
                 note: s1,
                 content: s2,
+                title: title,
                 used: false
             });
             //从页面上删除底部脚注内容
             return '';
         });
         //将脚注的标记转为序号
         text = text.replace(noteReg, function (match, s1) {
-            console.log(s1);
             for (var i = 0, foot; foot = footnotes[i]; i++) {
                 if (foot.note == s1) {
                     foot.used = true;
-                    return noteTmp.replace(/{index}/g, i + 1 + '');
+                    return templates[0].replace(/{{index}}/g, i + 1 + '').replace('{{title}}', foot.title);
                 }
             }
             //当脚注的正文不存在，视标记文本为正文
@@ -154,19 +159,21 @@
                 content: s1,
                 used: true
             });
-            return noteTmp.replace(/{index}/g, length + '');
+            return templates[0].replace(/{{index}}/g, length + '');
         });
         //生成底部脚注html
         if (footnotes.length >= 1) {
-            html += '<ol class="footnote">';
             for (var i = 0, foot; foot = footnotes[i]; i++) {
                 if (foot.used) {
-                    html += '<li id="fn:foot' + (i + 1) + '">' + foot.content + '</li>';
+                    html += templates[2]
+                        .replace('{{index}}', i + 1)
+                        .replace('{{content}}', foot.content)
+                        .replace('{{back}}', templates[4].replace('{{index}}', i + 1));
                 } else {
-                    html += '<li style="width:0;height:0;overflow:hidden;">' + foot.content + '</li>'
+                    html += templates[3].replace('{{content}}', foot.content);
                 }
             }
-            html += '</ol>';
+            html = templates[1].replace('{{list}}', html);
         }
         return text + html;
     };

files/amWiki.tpl

@@ -51,7 +51,15 @@
             </div>
             <div class="main scroller" id="main">
                 <div class="main-inner scroller-inner">
+                    <!-- 正文 -->
                     <article class="markdown-body scroller-content" id="view"></article>
+                    <script id="template:footnote" type="text/html">
+                        <sup><a href="#fn:foot{{index}}" name="fn:note{{index}}" title="{{title}}">[{{index}}]</a></sup>
+                        <ol class="footnote"><i>[参考资料]：</i>{{list}}</ol>
+                        <li id="fn:foot{{index}}">{{content}} {{back}}</li>
+                        <li class="footnote-none" data-msg="匹配缺失">{{content}}</li>
+                        <a href="#fn:note{{index}}"><svg><use xlink:href="#icon:footnoteBack"></use></svg></a>
+                    </script>
                     <!-- 上下翻页 -->
                     <div class="main-sibling scroller-content" id="mainSibling">
                         <p><span>上一篇：</span>