MENU

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

2020 年 01 月 27 日 • 阅读: 11206 • 博客

当存在 回复可见 内容时,正常逻辑是回复后 重载 整个或局部页面。在未开启 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 大佬群

最后编辑于: 2021 年 08 月 25 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

Loading captcha...

已有 28 条评论
  1. 32323 32323   Windows 10 x64 Edition  Google Chrome 102.0.0.0

    成为哦查看为基础

  2. Tom Tom   Android 11  WebView 4.0

    看看写的啥

  3. Xz Xz   Windows 10 x64 Edition  Google Chrome 97.0.4692.71

    膜拜大佬哒哒哒哒

  4. 隔壁小胡 隔壁小胡   Windows 10 x64 Edition  Google Chrome 92.0.4515.159

    嗯嗯嗯嗯嗯

  5. 谭先生 谭先生   Windows 10 x64 Edition  Google Chrome 89.0.4389.114

    感谢大佬,学到了

  6. 参观参观大佬博客

  7. Dark Dark   Android 11  WebView 4.0

    好文章#(邪恶)

  8. CodeSkyStar CodeSkyStar   Windows 10 x64 Edition  Google Chrome 86.0.4240.183

    来瞅瞅看看写的啥

  9. Dark Dark   Android 9  WebView 4.0

    来瞅瞅看看写的啥::quyin:1huaji::

  10. 咖啡 咖啡   Windows 10 x64 Edition  Google Chrome 85.0.4183.102

    来瞅瞅看看写的啥

  11. ZGGSONG ZGGSONG   Mac OS X 10.15.3  Google Chrome 83.0.4103.106

    来瞅瞅看看写的啥

  12. MZRME MZRME   Android 9  Google Chrome 83.0.4103.0

    我要看看啊

  13. 临江寒 临江寒   Windows 10 x64 Edition  Google Chrome 80.0.3987.122

    我来试试,刚买的主题,还不怎么上手

  14. 小忆 小忆   Android 9  Google Chrome 79.0.3945.116

    牛批呢@(哈哈)

  15. 小童 小童   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

    试试看。。

  16. ktlog ktlog   Windows 10 x64 Edition  Google Chrome 73.0.3683.86

    我竟然还要试一次

  17. sober sober   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

    感谢大佬分享

  18. Jerry Jerry   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

    感谢大佬分享

  19. Emt Emt   Windows 10 x64 Edition  QQ 浏览器 10.5.3863.400

    感谢大佬分享

  20. sober sober   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

    感谢大佬分享