MENU

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

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

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

使用步骤

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

JavaScript Code

<script>
    // PJAX 下,若存在隐藏内容,回复后自动刷新
    document.addEventListener('DOMContentLoaded', initReplayHandler);
    function initReplayHandler() {
        // 顺便改下提示
        const author = document.querySelector('#author');
        const email = document.querySelector('#mail');
        const url = document.querySelector('#url');
        if (email && author && url) {
            author.placeholder = '昵称(必填)';
            email.placeholder = '回复通知邮箱(必填)';
            url.placeholder = '网站(选填)';
        }
        const commentForm = document.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 && status.innerText === submit.getAttribute('data-posted')) {
                            observer.disconnect();
                            console.log('observation finished.');
                            let countDown = 2;
                            setInterval(() => {
                                status.innerText = template(countDown);
                                if (!--countDown) {
                                    localStorage.setItem('REPLYED', 'true');
                                    Mirages.doPJAXSendAction();
                                    setTimeout(() => $.pjax({
                                        url: location.href,
                                        container: '#body',
                                        fragment: '#body',
                                        timeout: 8000
                                    }), 400);
                                }
                            }, 800);
                        }
                    });
                });
            };
            const observer = new MutationObserver(callback);
            commentForm.addEventListener('submit', () => {
                console.log('start to observe...');
                observer.observe(document.querySelector('#comments'), { childList: true, subtree: true });
            });
        } else if (reply2View && localStorage.getItem('REPLYED')) {
            localStorage.removeItem('REPLYED');
            let view = reply2View;
            for (let i = 0; i < 2 && view.previousElementSibling; i++) {
                view = view.previousElementSibling;
            }
            view.scrollIntoView({ behavior: 'smooth' });
        }
    }
</script>

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

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

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

TG 大佬群 QQ 大佬群 QQ 追番群

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

已有 14 条评论
  1. 小童 小童     Windows 10 /    Google Chrome

    试试看。。

  2. ktlog ktlog     Windows 10 /    Google Chrome

    我竟然还要试一次

  3. sober sober     Windows 10 /    Google Chrome

    test

  4. Jerry Jerry     Windows 10 /    Google Chrome

    看看

  5. Emt Emt     Windows 10 /    QQ浏览器

    托尔斯泰

  6. sober sober     Windows 10 /    Google Chrome

    test

  7. Test Test     Windows 10 /    Google Chrome

    Test

  8. Xin Xin     Windows 10 /    Google Chrome

    Test

  9. cooyf cooyf     Windows 10 /    Google Chrome

    试试康::quyin:1huaji::

    1. LOGI LOGI     Windows 10 /    Google Chrome

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

  10. 222 222     Windows 10 /    FireFox

    @(吐舌)

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @222@(滑稽)怎样

  11. Z Z     iPhone /    Safari

    我试试

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @Z行吗

0:00