MENU

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

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

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

使用步骤

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

JavaScript Code

<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 大佬群 QQ 追番群

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

已有 19 条评论
  1. 咖啡 咖啡     Windows 10 /    Google Chrome

    来瞅瞅看看写的啥

  2. ZGGSONG ZGGSONG     MacOS /    Google Chrome

    来瞅瞅看看写的啥

  3. MZRME MZRME     Android Pie /    Google Chrome

    我要看看啊

  4. 临江寒 临江寒     Windows 10 /    Google Chrome

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

  5. 小忆 小忆     Android Pie /    Google Chrome

    牛批呢@(哈哈)

  6. 小童 小童     Windows 10 /    Google Chrome

    试试看。。

  7. ktlog ktlog     Windows 10 /    Google Chrome

    我竟然还要试一次

  8. sober sober     Windows 10 /    Google Chrome

    感谢大佬分享

  9. Jerry Jerry     Windows 10 /    Google Chrome

    感谢大佬分享

  10. Emt Emt     Windows 10 /    QQ浏览器

    感谢大佬分享

  11. sober sober     Windows 10 /    Google Chrome

    感谢大佬分享

  12. Test Test     Windows 10 /    Google Chrome

    感谢大佬分享

  13. Xin Xin     Windows 10 /    Google Chrome

    感谢大佬分享

  14. cooyf cooyf     Windows 10 /    Google Chrome

    试试康::quyin:1huaji::

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @cooyf行八行::quyin:doubt::

  15. 222 222     Windows 10 /    FireFox

    @(吐舌)

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @222@(滑稽)怎样

  16. Z Z     iPhone /    Safari

    我试试

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @Z行吗

0:00