Typecho Mirages 主题，PJAX下，回复后，隐藏内容的自动刷新

当存在 回复可见 内容时，正常逻辑是回复后 重载 整个或局部页面。在未开启 PJAX 时，回复事件本身就会触发页面重载，而开启后，作者似乎忘了处理，不过在我的 PY 下，他同意会在下个版本加入，在此之前，先用 JS 打个不完美补丁吧。

使用步骤

将以下代码加入到 <head> 标签中。具体步骤为，依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展，将代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后)，也可直接加入到主题对应的 header.php 中的 </head> 标签前。

当前版本

<script>
  // PJAX 下，若存在隐藏内容，回复后自动刷新
  document.addEventListener('DOMContentLoaded', initReplayHandler);
  function initReplayHandler() {
    // 顺便改下提示
    const comments = document.querySelector('#comments');
    if (!comments) return;
    const author = comments.querySelector('#author');
    const email = comments.querySelector('#mail');
    const url = comments.querySelector('#url');
    const textarea = comments.querySelector('#textarea');
    if (email && author && url && textarea) {
      author.placeholder = '昵称（必填）';
      email.placeholder = '回复通知邮箱（必填）';
      url.placeholder = '网站（选填）';
      textarea.placeholder = '听说认真评论的人最可爱哦！';
    }
    const commentForm = comments.querySelector('#comment-form');
    const reply2View = document.querySelector('.reply2view');
    if (commentForm && reply2View && reply2View.className === 'reply2view') {
      const submit = commentForm.querySelector('#submit');
      const template = (sec) => `评论提交成功，重载倒计时${sec}.`;
      submit.setAttribute('data-posted', template(3));

      commentForm.addEventListener('submit', () => {
        console.log('start to observe comment');

        let times = 0;
        (function waitStatus() {
          const status = comments.querySelector(
            '.comment-meta .comment-posted'
          );
          if (status) {
            console.log('comment success observed.');
            
            let rest = 3;
            (function countDown() {
              if (rest < 1) {
                $.pjax.reload('#body', {
                  scrollTo: reply2View.scrollTop,
                  timeout: 8000,
                });
                return;
              }
              status.innerHTML = template(rest--);
              setTimeout(countDown, 1000);
            })();
          } else if (++times < 100) {
            setTimeout(waitStatus, 200);
          }
        })();
      });
    }
  }
</script>

原始版本

<script>
    // PJAX 下，若存在隐藏内容，回复后自动刷新
    document.addEventListener('DOMContentLoaded', initReplayHandler);
    function initReplayHandler() {
        // 顺便改下提示
        const comments = document.querySelector('#comments');
        if (!comments) return;
        const author = comments.querySelector('#author');
        const email = comments.querySelector('#mail');
        const url = comments.querySelector('#url');
        const textarea = comments.querySelector('#textarea');
        if (email && author && url && textarea) {
            author.placeholder = '昵称（必填）';
            email.placeholder = '回复通知邮箱（必填）';
            url.placeholder = '网站（选填）';
            textarea.placeholder = '听说认真评论的人最可爱哦！';
        }
        const commentForm = comments.querySelector('#comment-form');
        const reply2View = document.querySelector('.reply2view');
        if (commentForm && reply2View && reply2View.className === 'reply2view') {
            const submit = commentForm.querySelector('#submit');
            const template = sec => `评论提交成功，重载倒计时${sec}.`;
            submit.setAttribute('data-posted', template(3));
            const callback = (mutations, observer) => {
                mutations.forEach(mutation => {
                    mutation.addedNodes.forEach(node => {
                        let status = null;
                        if (typeof node.querySelector === 'function') {
                            status = node.querySelector('.comment-meta .comment-posted');
                        }
                        if (status) {
                            console.log('success observed.');
                            let countDown = 2;
                            const countDownWaiter = setInterval(() => {
                                if (countDown < 0) return;
                                status.innerText = template(countDown--);
                                if (countDown === 0) {
                                    $.pjax.reload({
                                        url: location.href,
                                        container: '#body',
                                        fragment: '#body',
                                        scrollTo: reply2View.scrollTop,
                                        timeout: 8000
                                    });
                                    console.log('observation finished.');
                                    clearInterval(countDownWaiter);
                                    observer.disconnect();
                                }
                            }, 800);
                        }
                    });
                });
            };
            const observer = new MutationObserver(callback);
            commentForm.addEventListener('submit', () => {
                console.log('start to observe...');
                observer.observe(comments, { childList: true, subtree: true });
            });
        }
    }
</script>

此外还需单独加入回调函数。依次进入 控制台 - 外观 - 设置外观 - PJAX(BETA) - PJAX RELOAD，将 initReplayHandler(); 添加进入即可。

开头说过这是不完美方法，因为外部代码无法进入评论的 ajax success，此处使用 MutationObserver 监听，这将带来较大的时空开销。想看具体效果，那就回复试试吧！

此处内容需要评论回复后方可阅读

如有问题请在下方留言，文章转载请注明出处，详细交流请加下方群组！请大佬不要屏蔽文中广告，因为它将帮我分担服务器开支，如果能帮忙点击我将万分感谢。

TG 大佬群 QQ 大佬群