当存在 回复可见
内容时,正常逻辑是回复后 重载
整个或局部页面。在未开启 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
监听,这将带来较大的时空开销。想看具体效果,那就回复试试吧!
此处内容需要评论回复后方可阅读
如有问题请在下方留言,文章转载请注明出处,详细交流请加下方群组!请大佬不要屏蔽文中广告,因为它将帮我分担服务器开支,如果能帮忙点击我将万分感谢。
博主看到后修复下代码
/usr/themes/Mirages/usr/cus.js
line:953的 ah.unProxy(); 使用错误。
建议在reload方法前定义 let proxy;
proxy在 line 975行赋值
最后将 ah.unProxy(); 修改为 proxy.unProxy();
感谢提醒,那个库的 API 发生了 breaking change,我不该把线上代码的库版本设置成 latest。
还有能麻烦问下,评论的验证码是怎么做的呢?能不能指教一下,非常感谢。
论坛找的一个插件,改了改 CSS
看看写的啥
看看写的啥
看看写的啥
喔耶,我又来看教程了
成为哦查看为基础
看看写的啥
膜拜大佬哒哒哒哒
嗯嗯嗯嗯嗯
感谢大佬,学到了
参观参观大佬博客
好文章#(邪恶)
来瞅瞅看看写的啥
来瞅瞅看看写的啥::quyin:1huaji::
来瞅瞅看看写的啥
来瞅瞅看看写的啥
我要看看啊
我来试试,刚买的主题,还不怎么上手
牛批呢@(哈哈)
试试看。。