From d8d0459f1e170045aabc7321066682a7164a3dac Mon Sep 17 00:00:00 2001
From: "kun.peng" <kun.peng@outlook.my>
Date: Sun, 8 Dec 2019 10:37:56 +0800
Subject: [PATCH] Fixed issues #11. #15.

---
 layout/comment/comment.ftl |   3 +
 layout/common/article.ftl  |   4 +-
 layout/common/scripts.ftl  |  11 +++
 layout/widget/toc-post.ftl | 152 +++++++++++++++++++++++++++++++++++--
 source/css/style.css       |  55 +++++++++++++-
 source/css/style.styl      |  58 +++++++++++++-
 6 files changed, 267 insertions(+), 16 deletions(-)

diff --git a/layout/comment/comment.ftl b/layout/comment/comment.ftl
index 4e426a7..e8a954a 100644
--- a/layout/comment/comment.ftl
+++ b/layout/comment/comment.ftl
@@ -8,5 +8,8 @@
         .halo-comment .comment-placeholder {
             border: none !important;
         }
+        .comment-item-content img {
+            width: 100%;
+        }
     </style>
 </#macro>
\ No newline at end of file
diff --git a/layout/common/article.ftl b/layout/common/article.ftl
index 1ca3bd9..b949271 100644
--- a/layout/common/article.ftl
+++ b/layout/common/article.ftl
@@ -18,7 +18,7 @@
                 </div>
             </#if>
         </#if>
-        <div class="card-content article " style="width: 100%">
+        <div class="card-content article " id="card-content" style="width: 100%">
             <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
                 <div class="level-left">
                     <time class="level-item has-text-grey"
@@ -63,7 +63,7 @@
             </#if>
 
 
-            <div class="content <#if is_post?? || is_sheet??>post-article<#else>is-hidden-touch</#if>">
+            <div id="<#if is_post??>post-article<#else>is-hidden-touch</#if>" class="content <#if is_post?? || is_sheet??>post-article<#else>is-hidden-touch</#if>">
                 <#if index && post.summary?? && post.summary!=''>
                     ${post.summary!}
                 <#else>
diff --git a/layout/common/scripts.ftl b/layout/common/scripts.ftl
index b9a8edd..ef4db9e 100644
--- a/layout/common/scripts.ftl
+++ b/layout/common/scripts.ftl
@@ -10,6 +10,17 @@
 <#if is_index??>
     <script src="${static!}/source/js/widget_pin.js"></script>
 </#if>
+<#if is_post??>
+
+    <script src="${static!}/source/lib/toc/toc.min.js"></script>
+    <script>
+        new Toc({
+            wrapperId: 'post-article',
+            insertId: 'toc',
+            showSerial: true
+        }).createToc();
+    </script>
+</#if>
 
 <script>
     var url = location.href;
diff --git a/layout/widget/toc-post.ftl b/layout/widget/toc-post.ftl
index 04d277e..b48fab0 100644
--- a/layout/widget/toc-post.ftl
+++ b/layout/widget/toc-post.ftl
@@ -4,13 +4,151 @@
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"
         integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 <script>
-    initToc()
-    function initToc() {
-        var toc = $(".post-article ul").first();
-        $("#toc").html(toc);
-        initRelationship()
-        tocFixed()
-    }
+    // initToc()
+    // function initToc() {
+    //     var toc = $(".post-article ul").first();
+    //     $("#toc").html(toc);
+    //     initRelationship()
+    //     tocFixed()
+    // }
+    $(document).ready(function(){
+        $('#toc').html('');
+
+        var postDirectoryBuild = function () {
+            var postChildren = function children(childNodes, reg) {
+                    var result = [],
+                        isReg = typeof reg === 'object',
+                        isStr = typeof reg === 'string',
+                        node, i, len;
+                    for (i = 0, len = childNodes.length; i < len; i++) {
+                        node = childNodes[i];
+                        if ((node.nodeType === 1 || node.nodeType === 9) &&
+                            (!reg ||
+                                isReg && reg.test(node.tagName.toLowerCase()) ||
+                                isStr && node.tagName.toLowerCase() === reg)) {
+                            result.push(node);
+                        }
+                    }
+                    return result;
+                },
+                createPostDirectory = function (article, directory, isDirNum) {
+                    console.log("aaa",article,directory,isDirNum);
+                    var contentArr = [],
+                        titleId = [],
+                        levelArr, root, level,
+                        currentList, list, li, link, i, len;
+                    levelArr = (function (article, contentArr, titleId) {
+                        var titleElem = postChildren(article.childNodes, /^h\d$/),
+                            levelArr = [],
+                            lastNum = 1,
+                            lastRevNum = 1,
+                            count = 0,
+                            guid = 1,
+                            id = 'directory' + (Math.random() + '').replace(/\D/, ''),
+                            lastRevNum, num, elem;
+                        while (titleElem.length) {
+                            elem = titleElem.shift();
+                            contentArr.push(elem.innerHTML);
+                            num = +elem.tagName.match(/\d/)[0];
+                            if (num > lastNum) {
+                                levelArr.push(1);
+                                lastRevNum += 1;
+                            } else if (num === lastRevNum ||
+                                num > lastRevNum && num <= lastNum) {
+                                levelArr.push(0);
+                                lastRevNum = lastRevNum;
+                            } else if (num < lastRevNum) {
+                                levelArr.push(num - lastRevNum);
+                                lastRevNum = num;
+                            }
+                            count += levelArr[levelArr.length - 1];
+                            lastNum = num;
+                            elem.id = elem.id || (id + guid++);
+                            titleId.push(elem.id);
+                        }
+                        if (count !== 0 && levelArr[0] === 1) levelArr[0] = 0;
+
+                        return levelArr;
+                    })(article, contentArr, titleId);
+                    currentList = root = document.createElement('ul');
+                    dirNum = [0];
+                    for (i = 0, len = levelArr.length; i < len; i++) {
+                        level = levelArr[i];
+                        if (level === 1) {
+                            list = document.createElement('ul');
+                            if (!currentList.lastElementChild) {
+                                currentList.appendChild(document.createElement('li'));
+                            }
+                            currentList.lastElementChild.appendChild(list);
+                            currentList = list;
+                            dirNum.push(0);
+                        } else if (level < 0) {
+                            level *= 2;
+                            while (level++) {
+                                if (level % 2) dirNum.pop();
+                                currentList = currentList.parentNode;
+                            }
+                        }
+                        dirNum[dirNum.length - 1]++;
+                        li = document.createElement('li');
+                        link = document.createElement('a');
+                        link.href = '#' + titleId[i];
+                        link.innerHTML = !isDirNum ? contentArr[i] :
+                            dirNum.join('.') + ' ' + contentArr[i];
+                        li.appendChild(link);
+                        currentList.appendChild(li);
+                    }
+                    directory.appendChild(root);
+                };
+            createPostDirectory(document.getElementById('post-article'), document.getElementById('toc'), false);
+        };
+
+//建立关联关系
+        function initRelationship() {
+            var win = $(window);
+            var anchors = $('#toc').find('a');
+            var offset = 200; //偏移量看情况调
+            win.on('scroll', function () {
+                var scrollTop = win.scrollTop();
+                anchors.each(function (i, v) {
+                    var that = $(v);
+                    var id = that.attr('href');
+                    var target = $(id);
+
+                    if (scrollTop >= target.offset().top - offset) {
+                        anchors.removeClass('active');
+                        anchors.parent().removeClass("lit-active");
+                        that.addClass('active');
+                        that.parent().addClass("lit-active");
+                    }
+                })
+            })
+
+        }
+
+        postDirectoryBuild();
+        initRelationship();
+
+
+        var dir = $("#toc");
+        var postdiv = $(".article-content");
+        var offsetLength = dir.offset().top
+        $(document).scroll(function() {
+            var distance = offsetLength - $(window).scrollTop();
+            console.log(distance)
+            // console.log(allpostdiv)
+            if (distance <= 0) {
+                if (!dir.hasClass('directory-fixed')) {
+                    dir.addClass('directory-fixed');
+                }
+            } else if (distance > 0) {
+                if (dir.hasClass('directory-fixed')) {
+                    dir.removeClass('directory-fixed');
+                }
+            }
+        });
+    });
+
     function initRelationship() {
         var win = $(window);
         var anchors = $('#toc').find('a');
diff --git a/source/css/style.css b/source/css/style.css
index 00716e9..13e59c0 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -244,11 +244,14 @@ img.thumbnail {
 }
 .article .content a {
   word-wrap: break-word;
-  border-bottom: 0.0625rem dashed #eee;
 }
 .article .content p {
   line-height: 1.9rem;
 }
+.article blockquote {
+  border-left: 0.4rem solid #4b8af3;
+  background-color: #e9f5fe;
+}
 .rtl {
   direction: rtl;
 }
@@ -558,6 +561,52 @@ iframe,
 video {
   height: none;
 }
-.post-content a {
-  border-bottom: 0.0625rem dashed #eee;
+.post-article {
+  word-wrap: break-word;
+  line-height: 1.8;
+  letter-spacing: 0.013rem;
+}
+.post-article a {
+  position: relative;
+  white-space: normal;
+  color: #4b8af3;
+  background: transparent;
+  text-decoration: none;
+  font-weight: 500;
+  word-break: break-all;
+}
+.post-article a::after {
+  position: absolute;
+  bottom: -0.2rem;
+  left: 100%;
+  width: 0;
+  border-bottom: 0.13rem solid #4b8af3;
+  content: "";
+  -webkit-transition: width 350ms, left 350ms;
+  -moz-transition: width 350ms, left 350ms;
+  -ms-transition: width 350ms, left 350ms;
+  -o-transition: width 350ms, left 350ms;
+  transition: width 350ms, left 350ms;
+}
+.post-article a:hover::after {
+  left: 0;
+  width: 100%;
+  -webkit-transition: width 350ms;
+  -moz-transition: width 350ms;
+  -ms-transition: width 350ms;
+  -o-transition: width 350ms;
+  transition: width 350ms;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  text-align: justify;
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+.comment-item-content img {
+  width: 100%;
 }
diff --git a/source/css/style.styl b/source/css/style.styl
index b6fb808..ee25c65 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -217,9 +217,12 @@ img.thumbnail
             position: relative
         a
             word-wrap: break-word
-            border-bottom: .0625rem dashed #eee
+            //border-bottom: .0625rem dashed #1abc9c
         p
           line-height 1.9rem
+    blockquote
+        border-left: .4rem solid #4b8af3
+        background-color: #e9f5fe
 
 .rtl
      direction: rtl
@@ -510,7 +513,54 @@ figure.highlight
  video
      height: none
 
-.post-content
-    a
-        border-bottom: .0625rem dashed #eee;
+.post-article
+    word-wrap: break-word;
+    line-height: 1.8;
+    letter-spacing: 0.013rem;
+    //a
+    //    border-bottom: .0625rem dashed #eee;
+    a {
+        position: relative;
+        white-space: normal;
+        color: #4b8af3;
+        background: transparent;
+        text-decoration: none;
+        font-weight: 500;
+        word-break: break-all;
+    }
+    a::after {
+          position: absolute;
+          bottom: -0.2rem;
+          left: 100%;
+          width: 0;
+          border-bottom: 0.13rem solid #4b8af3;
+          content: "";
+          -webkit-transition: width 350ms,left 350ms;
+          -moz-transition: width 350ms,left 350ms;
+          -ms-transition: width 350ms,left 350ms;
+          -o-transition: width 350ms,left 350ms;
+          transition: width 350ms,left 350ms;
+    }
+    a:hover::after {
+        left: 0;
+        width: 100%;
+        -webkit-transition: width 350ms;
+        -moz-transition: width 350ms;
+        -ms-transition: width 350ms;
+        -o-transition: width 350ms;
+        transition: width 350ms;    }
+    p {
+        margin-top: 0;
+        margin-bottom: 1.25rem;
+        text-align: justify;
+        display: block;
+        margin-block-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+    }
 
+.comment-item-content
+    p
+        img
+            width: 100%