更新

assets/css/joe.global.scss

@@ -1493,11 +1493,11 @@ html[data-night='night'] {
                     height: 44px;
                     line-height: 44px;
                     width: 44px;
-                    transition: opacity 0.35s;
                     cursor: pointer;
                     text-align: center;
                     font-size: 13px;
                     color: var(--main);
+                    user-select: none;
                 }
             }
         }
@@ -1804,7 +1804,6 @@ html[data-night='night'] {
                         padding: 0 15px;
                         height: 40px;
                         color: var(--routine);
-                        font-size: 14px;
                     }
                     &:nth-child(2) {
                         position: relative;
@@ -1837,7 +1836,7 @@ html[data-night='night'] {
                     vertical-align: middle;
                     color: var(--routine);
                     background: transparent;
-                    font-size: 14px;
+                    font-size: 15px;
                 }
                 .draw {
                     position: relative;
@@ -1915,6 +1914,16 @@ html[data-night='night'] {
                 justify-content: flex-end;
                 padding: 0 15px 15px;
                 .submit {
+                    .cancle {
+                        display: none;
+                        color: var(--main);
+                        cursor: pointer;
+                        margin-right: 10px;
+                        transition: color 0.35s;
+                        &:hover {
+                            color: var(--theme);
+                        }
+                    }
                     button {
                         border-radius: 3px;
                         height: 32px;
@@ -1928,10 +1937,11 @@ html[data-night='night'] {
             }
         }
     }
-    &__list {
+    .comment-list {
         padding-top: 15px;
-        .comment-list__item {
+        &__item {
-            .contain {
+            &-contain {
+                .term {
                     display: flex;
                     margin-bottom: 15px;
                     .avatar {
@@ -2002,15 +2012,43 @@ html[data-night='night'] {
                             .date {
                                 margin-right: 10px;
                             }
+                            .reply {
+                                display: flex;
+                                align-items: center;
+                                color: var(--main);
+                                font-size: 13px;
+                                cursor: pointer;
+                                transition: color 0.35s;
+                                .icon {
+                                    margin-right: 5px;
+                                    fill: var(--main);
+                                    transition: fill 0.35s;
+                                }
+                                &:hover {
+                                    color: var(--theme);
+                                    .icon {
+                                        fill: var(--theme);
                                     }
                                 }
                             }
-            .children {
+                        }
+                    }
+                }
+            }
+            &-children {
                 padding-left: 63px;
-                .children {
+                .comment-list__item-children {
                     padding-left: 0;
                 }
             }
+            .joe_comment__respond {
+                margin-left: 63px;
+                margin-bottom: 15px;
+                animation: showComment 0.5s;
+            }
+        }
+        .comment-list {
+            padding-top: 0;
         }
     }
     .joe_pagination {
@@ -2098,6 +2136,24 @@ html[data-night='night'] {
 .profile-color-modes-illu-frame:nth-child(10) {
     animation: none;
 }
+
+@keyframes showComment {
+    0% {
+        opacity: 0;
+        transform: scale(0.3);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.05);
+    }
+    70% {
+        transform: scale(0.9);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
 @keyframes box_shadow {
     0% {
         box-shadow: 0 0 0 0 #f56c6c;

assets/js/joe.archive.js

@@ -1,3 +1,4 @@
+/* 搜索页面需要用到的JS */
 console.time('Archive.js执行时长');
 document.addEventListener('DOMContentLoaded', () => {
     /* 激活列表特效 */

assets/js/joe.global.js

@@ -1,3 +1,4 @@
+/* 全局公用JS */
 console.time('Global.js执行时长');
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -216,8 +217,12 @@ document.addEventListener('DOMContentLoaded', () => {
             if ($(this).attr('data-type') === 'draw') {
                 $('.joe_comment__respond-form .body .draw').show().siblings().hide();
                 $('#joe_comment_draw').prop('width', $('.joe_comment__respond-form .body').width());
+                /* 设置表单格式为画图模式 */
+                $('.joe_comment__respond-form').attr('data-type', 'draw');
             } else {
                 $('.joe_comment__respond-form .body .text').show().siblings().hide();
+                /* 设置表单格式为文字模式 */
+                $('.joe_comment__respond-form').attr('data-type', 'text');
             }
         });
     }
@@ -244,6 +249,74 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    /* 重写评论功能 */
+    {
+        const respond = $('.joe_comment__respond');
+        /* 重写回复功能 */
+        $('.joe_comment__reply').on('click', function () {
+            /* 父级ID */
+            const coid = $(this).attr('data-coid');
+            /* 当前的项 */
+            const item = $('#' + $(this).attr('data-id'));
+            /* 添加自定义属性表示父级ID */
+            respond.find('.joe_comment__respond-form').attr('data-coid', coid);
+            item.append(respond);
+            $(".joe_comment__respond-type .item[data-type='text']").click();
+            $('.joe_comment__cancle').show();
+            window.scrollTo({
+                top: item.offset().top - $('.joe_header').height() - 15,
+                behavior: 'smooth'
+            });
+        });
+        /* 重写取消回复功能 */
+        $('.joe_comment__cancle').on('click', function () {
+            /* 移除自定义属性父级ID */
+            respond.find('.joe_comment__respond-form').removeAttr('data-coid');
+            $('.joe_comment__cancle').hide();
+            $('.joe_comment__title').after(respond);
+            $(".joe_comment__respond-type .item[data-type='text']").click();
+            window.scrollTo({
+                top: $('.joe_comment').offset().top - $('.joe_header').height() - 15,
+                behavior: 'smooth'
+            });
+        });
+    }
+
+    /* 激活评论提交 */
+    {
+        $('.joe_comment__respond-form').on('submit', function (e) {
+            e.preventDefault();
+            const url = $('.joe_comment__respond-form').attr('action');
+            const type = $('.joe_comment__respond-form').attr('data-type');
+            const parent = $('.joe_comment__respond-form').attr('data-coid');
+            const author = $(".joe_comment__respond-form .head input[name='author']").val();
+            const mail = $(".joe_comment__respond-form .head input[name='mail']").val();
+            let text = $(".joe_comment__respond-form .body textarea[name='text']").val();
+            if (author.trim() === '') return alert('请输入用户名！');
+            if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(mail)) return alert('请输入正确的邮箱！');
+            if (type === 'text' && text.trim() === '') return alert('请输入评论内容！');
+            if (type === 'draw') {
+                const txt = $('#joe_comment_draw')[0].toDataURL('image/webp', 0.1);
+                text = '{!{' + txt + '}!} ';
+            }
+            $.ajax({
+                url,
+                type: 'POST',
+                data: { author, mail, text, parent },
+                success(res) {
+                    let arr = [],
+                        str = '';
+                    arr = $(res).contents();
+                    Array.from(arr).forEach(_ => {
+                        if (_.parentNode.className === 'container') str = _;
+                    });
+                    if (!/Joe/.test(res)) return alert(str.textContent.trim() || '');
+                    window.location.href = Joe.changeURLArg(location.href, 'scroll', 'joe_comment');
+                }
+            });
+        });
+    }
+
     /* 懒加载 */
     new LazyLoad('.lazyload');
 

assets/js/joe.index.js

@@ -1,3 +1,4 @@
+/* 首页需要用到的JS */
 console.time("Index.js执行时长")
 document.addEventListener('DOMContentLoaded', () => {
 	/* 激活轮播图功能 */

assets/js/joe.post&page.js

@@ -1,6 +1,10 @@
+/* 详情页和独立页面需要用到的JS */
 console.time('Post&Page.js执行时长');
 
 document.addEventListener('DOMContentLoaded', () => {
+    /* 当前页的CID */
+    const cid = $('.joe_detail').attr('data-cid');
+
     /* 获取本篇文章百度收录情况 */
     {
         $.ajax({
@@ -62,9 +66,6 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    /* 当前页的CID */
-    const cid = $('.joe_detail').attr('data-cid');
-
     /* 激活浏览功能 */
     {
         let viewsArr = localStorage.getItem(Joe.encryption('views')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('views')))) : [];
@@ -137,6 +138,13 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    /* 密码保护文章，输入密码访问 */
+    {
+        $('.joe_detail__article-protected').on('submit', function (e) {
+                    
+        });
+    }
+
     console.timeEnd('Post&Page.js执行时长');
 });
 

core/api.php

@@ -145,3 +145,4 @@ function _pushRecord($self)
     $result = curl_exec($ch);
     $self->response->throwJson(json_decode($result));
 }
+

public/article.php

@@ -40,16 +40,16 @@
 <div class="joe_detail__article">
     <?php if ($this->is('post')) : ?>
         <?php if ($this->hidden) : ?>
-            <div data-cid="<?php $this->cid(); ?>" class="joe_detail__article-protected" data-action="<?php echo Typecho_Widget::widget('Widget_Security')->getTokenUrl($this->permalink); ?>">
+            <form class="joe_detail__article-protected" action="<?php echo Typecho_Widget::widget('Widget_Security')->getTokenUrl($this->permalink); ?>">
                 <div class="contain">
                     <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                         <path d="M812.63104 664.064h-439.0912a79.0272 79.0272 0 0 0-78.95552 79.09888v196.9664h518.04672a79.0272 79.0272 0 0 0 78.9504-79.09888v-117.84704a79.0272 79.0272 0 0 0-78.9504-79.11936z" fill="#F4CA1C" p-id="7008"></path>
                         <path d="M812.97408 382.976h-32.36864V313.3696a272.256 272.256 0 1 0-544.512 0V382.976h-25.0624A113.91488 113.91488 0 0 0 97.28 496.77312v367.32928A113.91488 113.91488 0 0 0 211.03104 977.92h601.94304A113.90976 113.90976 0 0 0 926.72 864.1024V496.77312A113.90976 113.90976 0 0 0 812.97408 382.976zM305.7152 313.3696a202.63424 202.63424 0 1 1 405.26848 0V382.976H305.7152V313.3696zM857.088 864.1024a44.1856 44.1856 0 0 1-44.12416 44.15488H211.03104a44.19584 44.19584 0 0 1-44.11904-44.15488V496.77312a44.19584 44.19584 0 0 1 44.11904-44.16512h601.94304a44.1856 44.1856 0 0 1 44.12416 44.16v367.3344z m-331.71456-309.9648a62.69952 62.69952 0 0 0-34.816 114.82112v103.45984a34.816 34.816 0 1 0 69.632 0v-103.45984a62.69952 62.69952 0 0 0-34.80576-114.82112z" fill="#595BB3" p-id="7009"></path>
                     </svg>
                     <input class="password" type="password" placeholder="请输入访问密码...">
-                    <span class="submit">确定</span>
+                    <button class="submit" type="submit">确定</button>
-                </div>
                 </div>
+            </form>
         <?php else : ?>
             <?php _parseContent($this, $this->user->hasLogin()) ?>
         <?php endif; ?>

public/comment.php

@@ -1,14 +1,23 @@
 <?php $this->comments()->to($comments); ?>
+
 <div class="joe_comment">
     <h3 class="joe_comment__title">评论 <?php if ($this->allow('comment')) : ?>(<?php $this->commentsNum(); ?>)<?php endif; ?></h3>
 
+    <?php if ($this->hidden) : ?>
+        <div class="joe_comment__close">
+            <svg class="joe_comment__close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18417" width="18" height="18">
+                <path d="M512.3072 0.9728C794.624 0.9728 1023.488 202.24 1023.488 450.56a402.8416 402.8416 0 0 1-39.2704 173.2608 232.448 232.448 0 0 0-52.6336-45.9776c16.384-39.7824 25.2928-82.688 25.2928-127.2832 0-211.0976-199.1168-382.1568-444.6208-382.1568-245.5552 0-444.5696 171.0592-444.5696 382.1568 0 133.4272 79.5136 250.88 200.0384 319.1808v107.9808l102.0416-65.1264a510.1568 510.1568 0 0 0 142.4896 20.1216l19.4048-0.3584c19.4048-0.7168 38.7584-2.5088 57.9584-5.4272l3.584 13.4144c5.376 17.7152 12.8512 34.7136 22.3232 50.688l-20.6336 3.328a581.4784 581.4784 0 0 1-227.1232-12.288l-131.1232 100.352c-19.6608 15.0016-35.6352 7.168-35.6352-17.664v-157.3888C79.4112 725.1968 1.024 595.968 1.024 450.56 1.024 202.24 229.9392 0.9728 512.3072 0.9728z m318.464 617.0112c97.4848 0 176.7936 80.4352 176.7936 179.2s-79.3088 179.0464-176.7936 179.0464c-97.4336 0-176.7424-80.2816-176.7424-179.0464 0-98.816 79.3088-179.1488 176.7424-179.1488z m-103.0144 101.0176a131.1744 131.1744 0 0 0-25.7536 78.1824c0 71.8848 57.8048 130.4064 128.768 130.4064 28.8768 0 55.552-9.6256 77.056-26.0096z m103.0144-52.3264c-19.712 0-39.1168 4.5568-56.6784 13.312l172.2368 174.592c8.4992-17.3056 13.1584-36.864 13.1584-57.3952 0-71.9872-57.8048-130.5088-128.7168-130.5088z m-318.464-283.5456l6.8608 0.3584a67.072 67.072 0 0 1 59.8528 67.072l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584A67.072 67.072 0 0 1 445.6448 450.56a67.072 67.072 0 0 1 66.6624-67.4304z m266.752 0l6.8608 0.3584a67.072 67.072 0 0 1 59.8528 67.072l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584a67.072 67.072 0 0 1-59.8528-67.072h-0.0512l0.3072-6.8608a67.072 67.072 0 0 1 66.4064-60.5696z m-533.504 0l6.8608 0.3584A67.072 67.072 0 0 1 312.2688 450.56l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584A67.072 67.072 0 0 1 178.8928 450.56a67.072 67.072 0 0 1 66.6624-67.4304z" p-id="18418"></path>
+            </svg>
+            <span>当前文章受密码保护，无法评论</span>
+        </div>
+    <?php else : ?>
         <?php if ($this->allow('comment')) : ?>
             <div class="joe_comment__respond">
                 <div class="joe_comment__respond-type">
                     <button class="item" data-type="draw">画图模式</button>
                     <button class="item active" data-type="text">文本模式</button>
                 </div>
-            <div class="joe_comment__respond-form" data-action="<?php $this->commentUrl() ?>">
+                <form method="post" class="joe_comment__respond-form" action="<?php $this->commentUrl() ?>" data-type="text">
                     <div class="head">
                         <div class="list">
                             <input type="text" value="<?php $this->user->hasLogin() ? $this->user->screenName() : $this->remember('author') ?>" autocomplete="off" name="author" maxlength="16" placeholder="请输入昵称..." />
@@ -21,7 +30,7 @@
                         </div>
                     </div>
                     <div class="body">
-                    <textarea class="text" name="text" autocomplete="off" rows="5" placeholder="说点什么吧，点击右上方切换成画图试试？"></textarea>
+                        <textarea class="text" name="text" autocomplete="off" placeholder="说点什么吧，点击右上方切换成画图试试？"></textarea>
                         <div class="draw" style="display: none;">
                             <ul class="line">
                                 <li data-line="3">细</li>
@@ -45,17 +54,15 @@
                         </div>
                     </div>
                     <div class="foot">
-                    <div class="owo" id="OwO_Container"></div>
                         <div class="submit">
-                        <button>发表评论</button>
+                            <span class="cancle joe_comment__cancle">取消</span>
-                    </div>
+                            <button type="submit">发表评论</button>
                         </div>
                     </div>
+                </form>
             </div>
             <?php if ($comments->have()) : ?>
-            <div class="joe_comment__list">
                 <?php $comments->listComments(); ?>
-            </div>
                 <?php $comments->pageNav(
                     '<svg class="icon icon-prev" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg>',
                     '<svg class="icon icon-next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg>',
@@ -81,13 +88,17 @@
                 <span>博主关闭了当前页面的评论</span>
             </div>
         <?php endif; ?>
+    <?php endif; ?>
+
+
 </div>
 
 <?php
 function threadedComments($comments, $options)
 { ?>
-    <li class="comment-list__item" id="<?php $comments->theId(); ?>">
+    <li class="comment-list__item">
-        <div class="contain">
+        <div class="comment-list__item-contain" id="<?php $comments->theId(); ?>">
+            <div class="term">
                 <img class="avatar lazyload" src="<?php _getAvatarLazyload() ?>" data-original="<?php _getAvatarByMail($comments->mail); ?>" alt="<?php $comments->author(); ?>" />
                 <div class="content">
                     <div class="user">
@@ -106,11 +117,18 @@ function threadedComments($comments, $options)
                     </div>
                     <div class="handle">
                         <time class="date" datetime="<?php $comments->date('Y-m-d'); ?>"><?php $comments->date('Y-m-d'); ?></time>
+                        <span class="reply joe_comment__reply" data-id="<?php $comments->theId(); ?>" data-coid="<?php $comments->coid(); ?>">
+                            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
+                                <path d="M947.2 467.968h-276.48v61.44h276.48zM947.2 650.24h-363.52v61.44h363.52zM947.2 832.512H482.304v61.44H947.2zM519.168 179.2l122.368 85.504-352.256 503.808-122.368-85.504L519.168 179.2m-14.848-85.504L81.92 698.368l223.232 156.16L727.04 249.856 504.32 93.696z" p-id="6645"></path>
+                                <path d="M433.152 195.072L397.824 245.76l223.232 155.648 35.328-50.176zM143.36 740.864l-61.44-42.496v237.056l222.72-81.408-60.928-43.008-100.352 36.864z" p-id="6646"></path>
+                            </svg>回复
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
         <?php if ($comments->children) : ?>
-            <div class="children">
+            <div class="comment-list__item-children">
                 <?php $comments->threadedComments($options); ?>
             </div>
         <?php endif; ?>

public/include.php

@@ -10,6 +10,21 @@
         BAIDU_PUSH: <?php echo $this->options->JBaiduToken ? 'true' : 'false' ?>,
         encryption: str => window.btoa(unescape(encodeURIComponent(str))),
         decrypt: str => decodeURIComponent(escape(window.atob(str))),
+        changeURLArg: function(url, arg, arg_val) {
+            let pattern = arg + '=([^&]*)'
+            let replaceText = arg + '=' + arg_val
+            if (url.match(pattern)) {
+                let tmp = '/(' + arg + '=)([^&]*)/gi'
+                return url.replace(eval(tmp), replaceText)
+            } else {
+                if (url.match('[?]')) {
+                    return url + '&' + replaceText
+                } else {
+                    return url + '?' + replaceText
+                }
+            }
+            return url + '\n' + arg + '\n' + arg_val
+        }
     }
 </script>
 <style>