fixed comment issues in pjax

nakbo · Aug 18, 2021 · 8f8b2e4 · 8f8b2e4
1 parent 302e666
commit 8f8b2e4
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 96 deletions.
diff --git a/comments.php b/comments.php
@@ -1,6 +1,5 @@
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 <div class="comments" id="comments">
-    <?php fixPjaxComment($this) ?>
     <?php $this->comments()->to($comments); ?>
     <?php if ($this->allow('comment')): ?>
         <div id="<?php $this->respondId(); ?>" class="respond">
@@ -43,11 +42,44 @@
     <?php else: ?>
         <div class="comments-notice notice"><?php _e('评论已关闭'); ?></div>
     <?php endif; ?>
+    <script type="text/javascript">
+        (function () {
+            let token = <?= Typecho_Common::shuffleScriptVar(
+                $this->security->getToken(
+                    pjax_url_filter($this->request->getRequestUrl())
+                )); ?>
+            window.function.commentPjax(
+                '<?= $this->respondId; ?>', token
+            );
+        })();
+    </script>
     <?php if ($comments->have()): ?>
         <div class="comments-row">
-            <?php $comments->listComments(); ?>
+            <?php $comments->listComments([
+                'avatarSize' => 64
+            ]); ?>
         </div>
 
         <?php $comments->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
     <?php endif; ?>
+    <?php if (isset($this->options->plugins['activated']['Links'])) :
+        $links = $this->db->fetchAll($this->db->select()->from('table.links'));
+        $friends = array();
+        $relations = array();
+        foreach ($links as $link) {
+            if (!empty($link['mail'])) {
+                $friends[] = md5($link['mail']);
+            }
+        }
+        foreach (explode("\n", $this->options->plugin('Links')->relations) as $mail) {
+            if (!empty($mail = trim($mail))) {
+                $relations[] = md5($mail);
+            }
+        }
+        unset($links); ?>
+        <script>
+            window.kat.friends = <?= json_encode($friends); ?>;
+            window.kat.relations = <?= json_encode($relations); ?>;
+        </script>
+    <?php endif; ?>
 </div>
diff --git a/footer.php b/footer.php
@@ -1,7 +1,7 @@
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 
 <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
-<script type="text/javascript">window.function.execute('image', 'targetAll');</script>
+<script type="text/javascript">window.function.execute('image', 'targetAll', 'friends');</script>
 
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css"/>

diff --git a/functions.php b/functions.php
@@ -142,81 +142,22 @@ function lazyload_filter($html)
 }
 
 /**
- * @param $archive
+ * @param $requestUri
+ * @return string
  */
-function fixPjaxComment($archive)
+function pjax_url_filter($requestUri)
 {
-    echo "<script type=\"text/javascript\">
-    (function () {
-        window.TypechoComment = {
-            dom : function (id) {
-                return document.getElementById(id);
-            },
-        
-            create : function (tag, attr) {
-                var el = document.createElement(tag);
-            
-                for (var key in attr) {
-                    el.setAttribute(key, attr[key]);
-                }
-            
-                return el;
-            },
-    
-            reply : function (cid, coid) {
-                var comment = this.dom(cid), parent = comment.parentNode,
-                    response = this.dom('" . $archive->respondId . "'), input = this.dom('comment-parent'),
-                    form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0],
-                    textarea = response.getElementsByTagName('textarea')[0];
-                    
-                if (null == input) {
-                    input = this.create('input', {
-                        'type' : 'hidden',
-                        'name' : 'parent',
-                        'id'   : 'comment-parent'
-                    });
-    
-                    form.appendChild(input);
-                }
-    
-                input.setAttribute('value', coid);
-    
-                if (null == this.dom('comment-form-place-holder')) {
-                    var holder = this.create('div', {
-                        'id' : 'comment-form-place-holder'
-                    });
-    
-                    response.parentNode.insertBefore(holder, response);
-                }
-    
-                comment.appendChild(response);
-                this.dom('cancel-comment-reply-link').style.display = '';
-    
-                if (null != textarea && 'text' == textarea.name) {
-                    textarea.focus();
-                }
-    
-                return false;
-            },
-    
-            cancelReply : function () {
-                var response = this.dom('{$archive->respondId}'),
-                holder = this.dom('comment-form-place-holder'), input = this.dom('comment-parent');
-    
-                if (null != input) {
-                    input.parentNode.removeChild(input);
-                }
-    
-                if (null == holder) {
-                    return true;
-                }
-    
-                this.dom('cancel-comment-reply-link').style.display = 'none';
-                holder.parentNode.insertBefore(response, holder);
-                return false;
-            }
-        };
-    })();
-    </script>
-    ";
+    $parts = parse_url($requestUri);
+
+    if (isset($parts['query'])) {
+        parse_str($parts['query'], $args);
+
+        if (isset($args['_pjax'])) {
+            unset($args['_pjax']);
+            $parts['query'] = $args ? http_build_query($args) : NULL;
+            return Typecho_Common::buildUrl($parts);
+        }
+    }
+
+    return $requestUri;
 }
diff --git a/header.php b/header.php
@@ -13,7 +13,7 @@
             'tag' => _t('标签 %s 下的文章'),
             'author' => _t('%s 发布的文章')
         ), '', ' - '); ?><?php $this->options->title(); ?></title>
-    <link rel="stylesheet" href="<?php $this->options->themeUrl('style.css?v=1.0.0'); ?>">
+    <link rel="stylesheet" href="<?php $this->options->themeUrl('style.css?v=1.0.1'); ?>">
     <link href="https://cdnjs.loli.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
     <link href="https://cdnjs.loli.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>
@@ -22,7 +22,7 @@
     <script src="//cdnjscn.b0.upaiyun.com/libs/html5shiv/r29/html5.min.js"></script>
     <script src="//cdnjscn.b0.upaiyun.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <![endif]-->
-    <script src="<?php $this->options->themeUrl('script.js?v=1.0.0'); ?>"></script>
+    <script src="<?php $this->options->themeUrl('script.js?v=1.0.1'); ?>"></script>
     <script>
         window.kat.options = {
             siteUrl: '<?php $this->options->siteUrl() ?>',
@@ -33,7 +33,7 @@
         }
     </script>
     <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <?php $this->header("pingback=&wlw=&xmlrpc=&rss2=&atom=&rss1=&template=&generator="); ?>
+    <?php $this->header("pingback=&wlw=&xmlrpc=&rss2=&atom=&rss1=&template=&generator=&antiSpam=&commentReply="); ?>
 </head>
 <body class="kat light">
 <!--[if lt IE 8]>

diff --git a/index.php b/index.php
@@ -4,7 +4,7 @@
  *
  * @package Nabo
  * @author 南博工作室
- * @version 1.0.0
+ * @version 1.0.1
  * @link https://github.com/krait-team/Nabo-theme-typecho
  */
 
@@ -77,7 +77,7 @@
                     </div>
                     <div class="markdown-body describe">
                         <?= lazyload_filter($this->type == 'dynamic' ?
-                            $this->excerpt : get_summary($this->content)); ?>
+                            $this->content : get_summary($this->content)); ?>
                     </div>
                 </div>
                 <?php if ($this->type != 'dynamic'): ?>

diff --git a/script.js b/script.js
@@ -22,6 +22,32 @@ window.function.targetAll = function () {
     $(".markdown-body a").attr("target", "_blank");
 }
 
+window.function.friends = function () {
+    let friends_length = window.kat.friends == null ? 0 : window.kat.friends.length;
+    let relations_length = window.kat.relations == null ? 0 : window.kat.relations.length;
+    if (friends_length + relations_length) {
+        $('.comment-author span img').each(function () {
+            let match = false;
+            let src = $(this).attr("src");
+            if (friends_length) {
+                for (let pos = 0; pos < friends_length; pos++) {
+                    if (src.indexOf(window.kat.friends[pos]) !== -1) {
+                        match = true;
+                        $(this).parent().addClass("avatar-by-friend");
+                    }
+                }
+            }
+            if (relations_length && match === false) {
+                for (let pos = 0; pos < relations_length; pos++) {
+                    if (src.indexOf(window.kat.relations[pos]) !== -1) {
+                        $(this).parent().addClass("avatar-by-relation");
+                    }
+                }
+            }
+        });
+    }
+}
+
 window.function.image = function () {
     let able = false;
     $.each(['.markdown-body img', '.comment-content img'], function (i, key) {
@@ -133,7 +159,86 @@ window.function.footer = function () {
 
         // targetAll image owo katex
         window.function.execute(
-            'image', 'targetAll', 'OwO', 'katex'
+            'image', 'targetAll', 'friends', 'OwO', 'katex'
         );
     });
-}
+}
+
+window.function.commentPjax = function (respondId, token) {
+    let respond = document.getElementById(
+        respondId
+    );
+
+    if (respond != null) {
+        let forms = respond.getElementsByTagName('form');
+        if (forms.length) {
+            let input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = '_';
+            input.value = token;
+            forms[0].appendChild(input);
+        }
+    }
+
+    window.TypechoComment = {
+        dom: function (id) {
+            return document.getElementById(id);
+        },
+        create: function (tag, attr) {
+            let el = document.createElement(tag);
+            for (let key in attr) {
+                el.setAttribute(key, attr[key]);
+            }
+            return el;
+        },
+
+        reply: function (cid, coid) {
+            let comment = this.dom(cid),
+                response = this.dom(respondId), input = this.dom('comment-parent'),
+                form = 'form' === response.tagName ? response : response.getElementsByTagName('form')[0],
+                textarea = response.getElementsByTagName('textarea')[0];
+
+            if (null == input) {
+                input = this.create('input', {
+                    'type': 'hidden',
+                    'name': 'parent',
+                    'id': 'comment-parent'
+                });
+                form.appendChild(input);
+            }
+
+            input.setAttribute('value', coid);
+
+            if (null == this.dom('comment-form-place-holder')) {
+                let holder = this.create('div', {
+                    'id': 'comment-form-place-holder'
+                });
+                response.parentNode.insertBefore(holder, response);
+            }
+
+            comment.appendChild(response);
+            this.dom('cancel-comment-reply-link').style.display = '';
+
+            if (null != textarea && 'text' === textarea.name) {
+                textarea.focus();
+            }
+            return false;
+        },
+
+        cancelReply: function () {
+            let response = this.dom(respondId),
+                holder = this.dom('comment-form-place-holder'), input = this.dom('comment-parent');
+
+            if (null != input) {
+                input.parentNode.removeChild(input);
+            }
+            if (null == holder) {
+                return true;
+            }
+
+            this.dom('cancel-comment-reply-link').style.display = 'none';
+            holder.parentNode.insertBefore(response, holder);
+            return false;
+        }
+    };
+};
diff --git a/style.css b/style.css
@@ -703,11 +703,11 @@ article .copyright p a {
 }
 
 #comments .comment-children {
-    margin-left: 30px;
+    margin-left: 20px;
 }
 
 #comments .comment-children li {
-    padding: 20px 0 15px 0;
+    padding: 20px 0 0 0;
 }
 
 #comments .comment-list li .comment-reply {
@@ -758,7 +758,8 @@ article .copyright p a {
 }
 
 #comments .comment-list li .comment-content p {
-    line-height: 1.8
+    line-height: 1.8;
+    letter-spacing: 1px;
 }
 
 #comments .comment-list li .comment-content img {
@@ -786,8 +787,8 @@ article .copyright p a {
     border-radius: 50%
 }
 
-#comments .comment-list li.comment-by-master > .comment-author span:after,
-#comments .comment-list li.comment-by-friend > .comment-author span:after,
+.avatar-by-friend:after,
+.avatar-by-relation:after,
 #comments .comment-list li.comment-by-author > .comment-author span:after {
     content: '';
     position: absolute;
@@ -801,16 +802,20 @@ article .copyright p a {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAmVBMVEVHcEz/////////////////////////////////////////////////////////////////////////////////////uCD/////wTv/0nD//fn/9+b/uyr/8tf/89r/yFP/uiX/wkD/3JP/+u7/2Yj/yVf/14H/9d//vC3/xUn/5rD/1Hf/35r/6r7/zWH/0Gv/4aD/vjP/7cgz761DAAAAFnRSTlMAy2YKAzcb5vZcfPIRYPnsr9u3CU6PxtEgXAAAAg1JREFUSMedltmWqjAQRaOtQjuPtRFNCyJqtz3//8fdB0ErINrc8yQrFdeuStVJjClqNl9MJ6PhcDSZLuYz80D9wdhHyR8P+nfCn7o9Sup1nyrCW00PALtdpvF6HafLrQXAa7ZuxXcaAHYfiFKwtwCNTjm+7QGrpZS0XAFeuxj/7EO4i+SGol0I/nMhHkg2UqFNAjg72j7YQCoVWPAVVccDu5Y7WlvwLpm3GpAEcldBAo28uk0IN/JAmxCa2fl6sJOH2oF3PvMurKLHG6IVdI0xpt+D7LxeADi5KABbEZEl9PrGmAHYbHELwIez4RdIjiIiYmFgjBnDPlt8BSA8qvhPuGS4h7ExMx8uJT0z6YZ64ZphAP7MzK9EN5hOTlIW5maRpaSZ1royHCL1fwszdRAOAHyp2qsvWcLUTCCVAtNb9nVM0MCSwsSMIJYKpneAz+tqDCMzBN2nmikIgV/dszAsbnhXTG8Am+IGFylnivKfzrHHMCokLbIiB/8AeNVrKUwKZVVMqa6XKqtzcHl3kkRigdCdwy0s3NZQTF8A3+5IWJi7zaeYDkD44841+DOnvRUTl7m56tzeeoA003VuNNHAHdGzvvMNBWfIR7RkAjlTwRkuJlC2mYzpVGUzJSM7Mx2iKiMrWeUxjuM4/qm2ytpmXN/u618o9a+s+pdi/Wu3/sVe/+nwH4+Tvzx//gG7W6YbwRbnBgAAAABJRU5ErkJggg==);
 }
 
-#comments .comment-list li.comment-by-friend > .comment-author span:after {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAk1BMVEVHcEz///////////////////////////////////////////////////////////////////////84l/D////c7fx/vPVQpPLo8/1Bm/Cfzfhlr/M+mvBUpvL6/P6Ux/fv9/2PxPZpsfOo0fjj8P1cqvO52vpGnvGGwPbF4frz+P47mfB3uPX3+v5wtPTO5fvY6/yWQ8wjAAAAE3RSTlMAG8sDCfQ35l74ZnwR7K+3206PqmRLEQAAAg1JREFUSMedltmWqjAQRdMKAs5aOyAqqLRTa0///3X3AYQEVC993lypwl1jolRdzmw+mY6CYDSdzGeOeqGhP3Yx5I794RNzZ2BZFz6DR3/T7XsA6GWYJXGcZOFSA+D1u/fs3zoAeheJoWinATpvTfueByxCaShcAF6vbu8HkG7WckfrTQqBX7MHtit5oNUWsDx6AehIHirSEBhUbx7oWJ4o1uCVkXc7sI3kqaItdG7Z7UO6khdapdAv6uvBRl5qA15e8wEs1q8d1gsYKKXU0IWiXhqAs40CsBQRCcEd5iXQxeESgA/L4QfYxrfv+UqpMeyKwwMA6cmw/4Qywh2MlXJcKFO6B0pAEZGrpoowAtdRs4roDtPZCkrDTM2LkEym2MwM+6vxvbmaWAg1pg3AZ9XpMFFTyKTGdCx+nS7Ab3WawVSNIJEa01cR5TvAd3WawEgFYPZpzpRTRCnwY/YsBHUHk+kIsKo72EhXg+nQKHsCo1rQIouS6QPgYJ5lMK2ltQiUo0hm5stIq1W4W3dyucovkNpzuIS53RoV03cI8G6PhIaZ3XwG0x74OtlzDa5jtbfBRDk3lfL2NgfIZAIupwaRb4+oyURjM9xGtLEEbky1zVAugeaaKZjOj9ZMY5HlTNXc1BdZY1XGSZIkyenxqmy9jNuv+/YXSvsrq/2l2P7abX+xt386/OFx8j/Pn39H1ZClVRFjjwAAAABJRU5ErkJggg==);
+.avatar-by-friend:after {
+    filter: hue-rotate(60deg);
 }
 
-#comments .comment-list li.comment-by-master > .comment-author span:after {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAilBMVEVHcEz/01P/1VP/1VP/5V7/2VX//1X/1FL/1FL/1VL/1FL/1FL/4Vr/1FL/01P/1VX/1FP/1FL/1FL/6lL/01L/Mhv/tkf/OB3/WSj/ezP/RiH/bC7/SyP/Mxv/hjf/wEr/0Ur/0FH/xk7/4E//mzr/10z/PR7/kjj/qj7/UyX/5lD/ci7/Zir/yUhKCjvpAAAAE3RSTlMAyzdmCRsD9+ZefPIR7K9O24+3roLzTwAAAh1JREFUSMedVueagjAQjBUroiaEJhYU+/u/3m0SLuxS9Lj5wZe2MLMtMFbFcLXeeEvHWXqb9WrIvmAxdR2O4LjTxYfjw9mc1zCftX1mPJjoE34aB4mUSRCnvl6YDMZN50c9fTqMBEIUapveqH6+r16/j3eigl28Vx/pV89PQesxlKIBMjyC+mnlPLzlFIgWBCfYJhZ9eL8fiVZEoMRBrEbA35fiAyRYTKzyMfjnFImPiIBV79e7A9AbiC8IQPmgiC8QCsVXhEDKxHwG/pffDSTEY6bzDfInNmvvrQL9WqCWrmoUQ14tTAj8Ir5XbeATgz2sZLmOuW+C4ZYK7trgkaPzL7WSWhUuSIaYWZcetMUTZZJieSkURhC9IVsBI7tf4xQSUcBpxdacp3a/ykleYHqwGZxyvmYb66MGTillCH7aMI9zFGXD6VbM8gwmb+Rizj225DwRFU5ZofKsJq9yN+F8ycBJOMyGkyEZPWC4x8EGN1UNMKebGgZVA0rJZILhdK+FXVOiojEnXw3uJK+UaOpWsbOcXthfyK0kcJiTSopHQgx04EhqKFy0xeupnmdaEjo1SPJZ529vSktGC90kH05vxGlr64YUqUsLCHOydVP6oyggVKKYU1k3yEe6RGtN4JfTRTY3gVqb2RWcwrY2U2tkhtNBtjWyWqvME4W8vVV2bsbd2333C6X7ldX9Uux+7Xa/2Lv/Ovzj5+Qvvz8/yaSX8RKlYQ4AAAAASUVORK5CYII=);
+.avatar-by-relation:after {
+    filter: hue-rotate(160deg);
 }
 
-#comments .comment-list li.comment-by-master > .comment-author span:after,
-#comments .comment-children li.comment-by-friend > .comment-author span:after,
+#comments .comment-list li.comment-by-author > .comment-author span:after {
+    filter: none;
+}
+
+#comments .comment-children .avatar-by-friend:after,
+#comments .comment-children .avatar-by-relation:after,
 #comments .comment-children li.comment-by-author .comment-author span:after {
     width: 15px;
     height: 15px;