instantclick是什么？
instantclick是一个预加载的js文件，就是能提前加载网页内容的东西，他有几种模式，第一种就是鼠标放在超链接上就开始预加载，第二种就是鼠标放上去xx毫秒后(时间可自定义)进行预加载，第三种就是鼠标点击后进行预加载。 项目官网：http://instantclick.io/ 项目地址：https://github.com/dieulot/instantclick
使用这个预加载js
因为前两种方式可能比较浪费资源，所以我们使用鼠标点击后进行预加载方式，代码类似如下
代码语言：javascript复制InstantClick.init('mousedown');注：我使用的是instantclick3.1.0的版本。这里不着重讲instantclick的使用方法，建议去官网查阅
搜索功能这样的非超链接怎么实现不刷新
在香菇的点拨之下，我们强行将搜索功能表单模式变成了超链接，效果如下
搜索功能.jpg
因为搜索结果地址一般为是站点地址加search加搜索内容如https://zezeshe.com/search/搜索的内容/
所以如上图所示，我们将搜索图标的超链接写为搜索地址https://zezeshe.com/search/
然后用js获取这个地址A，再将图标上的超链接清空，防止没有搜索内容却直接点击图标的情况。
随后在事实获取输入框的内容B，然后将A和B拼接，就获得了最终地址C，然后将地址C添回图标的超链接地址上，这是我们点击图标就可以在预加载的条件下实现搜索内容了,代码如下：
var bb=$("#soux").attr("href");//获取搜索地址
$("#soux").attr("href",""); //清空默认地址
$('#keyword').bind('input propertychange', function () {
var aa=$("input[name=s]").val();//获取输入框内容
$("#soux").attr("href",bb aa); //将拼接好的地址重新添加
});当然，这还不太完美，万一喜欢按回车呢，在监控下回车,在input上加上 onkeypress="$.getKey();",然后js代码上写上这个监控函数
$.extend({
getKey: function() {
if(event.keyCode==13){
$('#soux').get(0).click();
}
},
})至此结束
评论也不兼容呢
然后找到了个可用的ajax评论的js，自己改了改就用上了， 然后在友人C的帮助下，修复了评论嵌套的问题，然后他又提出个问题
如果你启用了评论分页功能，由于typecho显示最新评论总是在第一页，所以当用户不在第一页发出了母评论，用户是看不到评论的，因为评论是在第一页
最后我根据上边搜索功能的原理，用了几行代码修复了这个问题，最终ajax的评论js代码如下
代码语言：javascript复制function ajaxc() {
var
txt_1 = '必须填写用户名',
txt_2 = '必须填写电子邮箱地址',
txt_3 = '邮箱地址不合法',
txt_4 = '必须填写评论内容';
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
var
comments_order = 'DESC',
comment_list = '.comment-list',
comments = '.comment-num',
comment_reply = '.comment-reply',
comment_form = '#comment-form',
respond = '#comments',
textarea = '#textarea',
submit_btn = '.submit',
new_id = '', parent_id = '';
click_bind();
$(comment_form).submit(function() { // 提交
$(submit_btn).attr('disabled', true).fadeTo('slow', 0.5);
/* 预检 */
if ($(comment_form).find('#author')[0]) {
if ($(comment_form).find('#author').val() == '') {
toastr.info(txt_1);
msg_effect('#error');
return false;
}
if ($(comment_form).find('#mail').val() == '') {
toastr.info(txt_2);
msg_effect('#error');
return false;
}
var filter = /^[^@s<&>] @([a-z0-9] .) [a-z]{2,4}$/i;
if (!filter.test($(comment_form).find('#mail').val())) {
toastr.info(txt_3);
msg_effect('#error');
return false;
}
}
var textValue = $(comment_form).find(textarea).val().replace(/(^s*)|(s*$)/g, ""); //排除空格
if (textValue == null || textValue == "") {
toastr.info(txt_4);
msg_effect('#error');
console.log("内容为空");
return false;
}
$(submit_btn).addClass("active");
$('#loading').show();
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serializeArray(),
error: function() {
toastr.info("提交失败，请重试！");
msg_effect('#error');
return false;
},
success: function(data) { //成功取到数据
//console.log(data);
$(submit_btn).removeClass("active");
$('#loading').slideUp();
try {
if (!$(comment_list, data).length) {
toastr.info("提交失败,可能输入内容不符合规则！");
msg_effect('#error');
return false;
} else {
new_id = $(comment_list, data).html().match(/id="?comment-d /g).join().match(/d /g).sort(function(a, b) {
return a - b
}).pop(); // TODO：找新 id，如果在第二页评论的话，找到的ID是有问题的！
if ($('.page-navigator .prev').length && parent_id == ""){
new_id = '';
var dd=$(".prev a").attr("href");//获取上页地址
$(".prev a").attr("href",""); //将地址清空
dd=dd.replace(/comment-page-(.*?)#comments/, "comment-page-1#comments");//将获取的地址页码改为1
$(".prev a").attr("href",dd); //将地址放回去
$('.prev a').get(0).click(); //点击这个超链接
}//判断当前评论列表是否在第一页,并且只会在母评论时候才会生效
console.log("new id " new_id);
msg_effect("#success");
//插入评论内容到当前页面
if (parent_id) {
data = $('#li-comment-' new_id, data).hide(); // 取新评论
if ($('#' parent_id).find(".comment-children").length <= 0) {
$('#' parent_id).append("");
}
if (new_id)//new_id不为空的时候才会插入
$('#' parent_id " .comment-children .comment-list").prepend(data);
console.log('该评论为子评论,parent_id:' parent_id);
parent_id = '';
//console.log(data);
} else {
data = $('#li-comment-' new_id, data).hide(); // 取新评论
//console.log('该评论为母评论');
if (!$(comment_list).length) //如果一条评论也没有的话
$(respond).append('仅有0</span>条评论</div></ol>'); // 加 ol
$(comment_list).prepend(data);
//console.log('评论内容:');
//console.log(data);
}
$('#li-comment-' new_id).fadeIn(); // 显示
var num;
$(comments).length ? (num = parseInt($(comments).text().match(/d /)), $(comments).html($(comments).html().replace(num, num 1))) : 0;
//console.log($('#comments h4').length);
// 评论数加一
TypechoComment.cancelReply();
$(textarea).val('');
$(comment_reply ' a, #cancel-comment-reply-link').unbind('click');
click_bind(); // 新评论绑定
$(submit_btn).attr('disabled', false).fadeTo('slow', 1);
if (new_id){
$body.animate({scrollTop: $('#li-comment-' new_id).offset().top - 50}, 500);
}else{
$body.animate({scrollTop: $('#comments').offset().top - 50}, 500);
}
}
} catch(e) {
//alert('评论ajax错误!请截图并联系主题制作者！nn' e);
window.location.reload();
}
} // end success()
}); // end ajax()
return false;
}); // end $(comment_form).submit()
function click_bind() { // 绑定
$(comment_reply ' a').click(function() { // 回复
//$body.animate({scrollTop: $(respond).offset().top - 180}, 400);
//console.log($(this).parent().parent().parent().parent());
parent_id = $(this).parent().parent().parent().parent().parent().parent().attr("id");//parent()数量根据模板而定，否则评论嵌套可能有问题
console.log("parent_id:" parent_id);
$(textarea).focus();
});
$('#cancel-comment-reply-link').click(function() { // 取消
parent_id = '';
});
}
function msg_effect(id) { // 出错
$(submit_btn).attr('disabled', false).fadeTo('', 1);
}
}
ajaxc();注：上述代码中提示功能使用了jquery通知插件toastr，如果你不想使用可将上述代码中的 toastr.info改成alert
代码参考文章：
原作者文章：http://www.iyanlei.com/typecho_ajax_comment.html
友人C文章：https://www.ihewro.com/archives/691/
注意
本文中的所有代码都依靠jquery,且本文内容预加载模式只有选择第三种方法才能实现全站无刷新。
