这是移植自 WordPress 的一款主题，原作者 Tokinx个人很喜欢这种简洁而不失优雅的主题，功能也比较齐，于是就选择了移植。特色自适应/响应式设计单栏简洁设置简洁的图片灯箱护眼/夜间模式Instantclick 预加载体积轻小，压缩后仅 310KBMore to find[btn url="https://github.com/BigCoke233/adams"]下载主题[/btn] [btn url="https://guhub.cn"]作者博客[/bt...

移植自Hexo主题：hexo-theme-aircloud主题特性即时显示搜索结果自动解析 h1 h2 h3 等标签，生成 toc 目录树使用 instantclick.js 实现全站 pjax使用 highlight.js 实现代码高亮可以自定义首页头像下的用户名，默认是管理员账号的昵称自定义首页头像头像方/圆形切换缓存头像到主题目录文章首行自动缩进[btn url="https://github.com/WingLim/Typecho-Theme-AirCloud"]主题下载[/btn] [btn url="https://limxw.com/typecho_theme_aircloud.html"]作者原文[/bt...

上次在《instantclick 实现的全站无刷新》中大致说了一下实现方式，但是随着大家对文章的关注，我发现有些细节被我遗漏了，同时也发现了存在的问题，下面就接着上篇文章在说一说。搜索功能这样的非超链接怎么实现不刷新上篇文章的代码不兼容火狐浏览器，所以将上篇文章中提到的这个代码$.extend({ getKey: function() { if(event.keyCode==13){ $('#soux').get(0).click(); } }, })改为$.extend({ getKey: function() { var theEvent = window.event || arguments.callee.caller.arguments[0]; var code = theEvent.keyCode; if(code == 13){ $('#soux').get(0).click(); } }, })instantclick的情况添加ajax评论需要将typecho的模板header.php中的<?php $this->header('); ?>改成<?php $this->header('commentReply='); ?>干掉模板自动输出的评论相关的js代码然后手动将刚刚屏蔽的代码加入到comments.php里面<script type="text/javascript"> (function () { window.TypechoComment = { dom : function (id) { return document.getElementById(id); }, create : function (tag, attr) { var el = document.createElement(tag); for (var key in attr) { el.setAttribute(key, attr[key]); } return el; }, reply : function (cid, coid) { var comment = this.dom(cid), parent = comment.parentNode, response = this.dom('<?php echo $this->respondId(); ?>'), input = this.dom('comment-parent'), form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0], textarea = response.getElementsByTagName('textarea')[0]; if (null == input) { input = this.create('input', { 'type' : 'hidden', 'name' : 'parent', 'id' : 'comment-parent' }); form.appendChild(input); } input.setAttribute('value', coid); if (null == this.dom('comment-form-place-holder')) { var holder = this.create('div', { 'id' : 'comment-form-place-holder' }); response.parentNode.insertBefore(holder, response); } comment.appendChild(response); this.dom('cancel-comment-reply-link').style.display = ''; if (null != textarea && 'text' == textarea.name) { textarea.focus(); } return false; }, cancelReply : function () { var response = this.dom('<?php echo $this->respondId(); ?>'), holder = this.dom('comment-form-place-holder'), input = this.dom('comment-parent'); if (null != input) { input.parentNode.removeChild(input); } if (null == holder) { return true; } this.dom('cancel-comment-reply-link').style.display = 'none'; holder.parentNode.insertBefore(response, holder); return false; } }; })(); </script&g...

超级推荐用这个大佬写的aplayer插件地址：https://github.com/MoePlayer/APlayer-Typecho然后在预加载重载函数里写上loadMeting();即可如果遇到切换页面音乐不停止的问题，再重载函数里再补充这条语句if (typeof aplayers !== 'undefined'){ for (var i = 0; i < aplayers.length; i++) { try {aplayers[i].destroy()} catch(e){} } }↓以下文章内容已弃用APlayer Typecho插件https://github.com/FaithPatrick/APlayer-Typecho-Plugininstantclick 3.0.1版兼容方法来自https://muguang.me/php/typecho-theme-apollo.html将预加载的执行代码<script data-no-instant> InstantClick.init(); </script>改为<script data-no-instant> if (!window.audios) { audios = []; for (var i = 0; i < APlayers.length; i++) { audios[i] = APlayers[i].audio; } } InstantClick.on('change', function (isInitialLoad) { for (var i = 0; i < APlayers.length; i++) { audios.push(APlayers[i].audio); } for(var i = 0; i < audios.length; i++) {if(audios[i]){audios[i].pause()}}; }); InstantClick.init(); </script> <script>var APlayerOptions = [];</script>//如果无效果尝试删掉这行instantclick 3.1.0版兼容[不完美]这个是我参考上边的瞎弄弄出来的，虽然完全看不懂QAQ。。。打开插件的plugin.php将里面的<script> var len = APlayerOptions.length; for(var i=0;i<len;i++){ if(document.getElementById('player' + APlayerOptions[i]['id'])) { APlayers[i] = new APlayer({ element: document.getElementById('player' + APlayerOptions[i]['id']), narrow: false, preload: APlayerOptions[i]['preload'], mutex: APlayerOptions[i]['mutex'], autoplay: APlayerOptions[i]['autoplay'], showlrc: APlayerOptions[i]['showlrc'], music: APlayerOptions[i]['music'], theme: APlayerOptions[i]['theme'] }); //APlayers[i].init(); } } </script>改为<script data-no-instant>//就是这里有修改，其他都没动 var len = APlayerOptions.length; for(var i=0;i<len;i++){ if(document.getElementById('player' + APlayerOptions[i]['id'])) { APlayers[i] = new APlayer({ element: document.getElementById('player' + APlayerOptions[i]['id']), narrow: false, preload: APlayerOptions[i]['preload'], mutex: APlayerOptions[i]['mutex'], autoplay: APlayerOptions[i]['autoplay'], showlrc: APlayerOptions[i]['showlrc'], music: APlayerOptions[i]['music'], theme: APlayerOptions[i]['theme'] }); //APlayers[i].init(); } } </script>将预加载的执行代码<script data-no-instant> InstantClick.init(); </script>改为<script data-no-instant> if (!window.audios) { audios = []; for (var i = 0; i < APlayers.length; i++) { audios[i] = APlayers[i].audio; } } InstantClick.on('change', function(isInitialLoad) { if (isInitialLoad === false) { var len = APlayerOptions.length; for(var i=0;i<len;i++){ if(document.getElementById('player' + APlayerOptions[i]['id'])) { APlayers[i] = new APlayer({ element: document.getElementById('player' + APlayerOptions[i]['id']), narrow: false, preload: APlayerOptions[i]['preload'], mutex: APlayerOptions[i]['mutex'], autoplay: APlayerOptions[i]['autoplay'], showlrc: APlayerOptions[i]['showlrc'], music: APlayerOptions[i]['music'], theme: APlayerOptions[i]['theme'] }); //APlayers[i].init(); } } for (var i = 0; i < APlayers.length; i++) {audios.push(APlayers[i].audio);} for(var i = 0; i < audios.length; i++) {if(audios[i]){audios[i].pause()}}; } }); InstantClick.init();</script&g...

instantclick是什么？instantclick是一个预加载的js文件，就是能提前加载网页内容的东西，他有几种模式，第一种就是鼠标放在超链接上就开始预加载，第二种就是鼠标放上去xx毫秒后(时间可自定义)进行预加载，第三种就是鼠标点击后进行预加载。项目官网：http://instantclick.io/项目地址：https://github.com/dieulot/instantclick使用这个预加载js因为前两种方式可能比较浪费资源，所以我们使用鼠标点击后进行预加载方式，代码类似如下<script src="instantclick.min.js" data-no-instant></script> <script data-no-instant>InstantClick.init('mousedown');</script>注：我使用的是instantclick3.1.0的版本。这里不着重讲instantclick的使用方法，建议去官网查阅搜索功能这样的非超链接怎么实现不刷新在香菇的点拨之下，我们强行将搜索功能表单模式变成了超链接，效果如下因为搜索结果地址一般为是站点地址加search加搜索内容如https://qqdie.com/search/搜索的内容/所以如上图所示，我们将搜索图标的超链接写为搜索地址https://qqdie.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代码如下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("<div class='comment-children'><ol class='comment-list'></ol></div>"); } 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('<div class="info-com">仅有<span class="comment-num">0<\/span>条评论<\/div><ol class="comment-list"><\/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错误!请截图并联系主题制作者！\n\n' + 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,且本文内容预加载模式只有选择第三种方法才能实现全站无刷新。相关文章已经有了更新《续 instantclick 实现的全站无刷...

最近yodu模板的用户要求我兼容typecho的Prismjs代码高亮插件，其实在《pjax(InstantClick) 常用的重载函数》中我就提到了Prismjs的pjax重载代码，但是经测试，还是有问题，于是今早又折腾了下，找到了方法。插件方面改动打开Prismjs代码高亮插件的Plugin.php文件在第58行找到<script>var pres = document.getElementsByTagName('pre');改成<script data-no-instant>var pres = document.getElementsByTagName('pre');在第64行找到<script src="' . $jsUrl . '"></script>改成<script src="' . $jsUrl . '" data-no-instant></script在第66行找到<script defer="defer" src="' . Helper::options()->pluginUrl . '/Prismjs/line-number-wrap-fix.js' . '"></script>改成<script defer="defer" src="' . Helper::options()->pluginUrl . '/Prismjs/line-number-wrap-fix.js' . '" data-no-instant></script>就是挨个加data-no-instantinstantclick模板方面调整在重载函数里添加 if (typeof Prism !== 'undefined') { Prism.highlightAll(true,null);}这样，代码高亮就完全好使了但是随后又发现行号会不显示，于是想在重载下行号的函数，整理下就是如下代码 if (typeof Prism !== 'undefined') {<?php if (Helper::options()->plugin('Prismjs')->showln): ?> var pres = document.getElementsByTagName('pre'); for (var i = 0; i < pres.length; i++){ if (pres[i].getElementsByTagName('code').length > 0) pres[i].className = 'line-numbers';}<?php endif; ?> Prism.highlightAll(true,null); }php部分判断插件是否使用了显示行号，使用就重载行号函数；因为是对插件进行了判断，所以如果没启用插件，直接用上面代码会导致网站错误50...

YoduPlayer继YoduBGM之后的另一款支持instantclick的背景音乐播放器。特点0，支持自定义播放器css。1，支持使用pjax或者instantclick的模板。2，内置多种播放器皮肤，可自由选择3，可设置自动播放，手机端自动隐藏等4，无JQ[早期打包版本无需jq]，要求浏览器ie9+5，有上一曲，下一曲，暂停/播放，封面显示等功能，封面播放时会旋转。6，针对typecho的Yodu主题模板字体方面做过处理，减少多余字体加载，2.2.2之前的版本支持针对模板变色功能，2.2.2版本之后需要根据需求手动选择播放器皮肤。7，歌曲列表功能支持，正在播放的歌曲在列表中标注支持。小问题1，与yodubgm应该会有冲突，建议他俩之间只是用一个。2，与其他的模板样式上可能会遇到冲突。3，歌曲虽然可以解析网易云音乐，但不保证不会出现部分音乐无法播放的可能性背景因为前天有人吐槽YoduBGM太过简洁，于是昨天中午重写了个样式，js代码部分抄自己之前写的yodubgm的代码，音乐播放时间格式化借鉴与Qplayer,其余的都是现写的，边百度边写233。本来没想做成插件，想内置到模板里，但是貌似不利于传播，于是刚刚封装进了插件。测试有部分模板可能会出现错位等现象……截图下载地址https://github.com/jrotty/YoduPlayer更新记录2018,05,28默认音量调低至18%，默认本地歌曲，多皮肤机制公开手动选择，不在支持yodu模板自动变色功能，请手动选择皮肤，版本号2.2.22018,02,25新增随机播放功能，简单优化，yodu定制皮肤会根据模板自动勾选2017,12,10封面图404时，自动将内置图片补上去假装图没挂，播放器外面点击关闭抽屉，优化yodu模板的定制皮肤，版本号1.8.02017,12,06增加默认音乐与封面图【当音乐列表为空时默认填充】（内置音乐只要非盈利性质则不涉及版权问题），版本号1.7.52017,10,09歌曲列表正在播放的歌曲加入样式标注，发布测试版1.7.32017,10,08加入了歌曲列表功能，发布测试版1.7.02017,10,01修复部分浏览器抽屉失效问题，增强浏览器兼容性2017,09,27部分浏览器进度条错位问题修复2017,07,27修正进度条定位问题，版本号1.3.0。2017,07,25解决部分模板的字体冲突问题2017,07.10重新加入修复版的网易音乐获取api，版本号1.2.0。2017,06.12支持显示音乐播放进度条，删除已经失效的网易云api,版本号 1.1.0。2017.04.16修复上下曲切换播放封面不旋转问题，修复列表播放不循环问题，版本号1.0.1。2017.04.15加入自定义css，加入yodu主题模板定制化方案，版本号为1.0.02017.04.14晚修正css使其兼容更多模板，版本号为0.6.02017.04.14上传第一个版本，版本号为0.5...

pjax(InstantClick)一般需要重载的函数，希望这篇文章能让大家少浪费点时间多说评论if (typeof DUOSHUO !== 'undefined'){ DUOSHUO.EmbedThread('.ds-thread');} /网易云跟贴if (typeof Tie !== 'undefined') { Tie.loader("", true); }畅言(代码来自http://www.neurallinker.com/94.misaka)if($("#SOHUCS").length==1){ window.changyan = undefined;window.cyan = undefined; $.getScript("https://changyan.sohu.com/upload/changyan.js", function(){window.changyan.api.config({appid: "你的appid参数",conf: "你的conf参数"});}); }百度统计 if (typeof _hmt !== 'undefined'){ _hmt.push(['_trackPageview', location.pathname + location.search]); } 谷歌统计if (typeof ga !== 'undefined'){ ga('send', 'pageview', location.pathname + location.search); } piwik统计 _paq.push(['setDocumentTitle', document.title]); _paq.push(['trackPageView']);SynatxHighlighter SyntaxHighlighter.highlight();google code prettify if (typeof prettyPrint !== 'undefined'){ prettyPrint(); } MathJaxif (isInitialLoad === false) { if (typeof MathJax !== 'undefined'){ MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } Prism.js语法高亮 if (typeof Prism !== 'undefined') { Prism.highlightAll(true,null);}如果有问题，可以参考《instantclick兼容Prismjs插件》欢迎...

instantclick 中文文档文档官网：http://instantclick.io/documentation文档基于：instantclick 3.1.0版本翻译感谢；有道云翻译/谷歌翻译细节说明；部分基于自己理解有所改动，其中部分我没有接触过的位置，并没有进行翻译，以免误导特殊声明；文章允许转载，但是必须保留原文超链接出处，放置文章底部或者顶部方便查看位置！入门指南1，开始下载InstantClick，公布的最新稳定版本是3.1.0 2014/12/25版本（日志）下载压缩的版本2.7kb 或者 下载未压缩的版本21kb其他下载选项最新的开发板在github上面Bower: bower install instantclick初始化 InstantClick包括InstantClick和初始化它的页面:<script src="instantclick.min.js" data-no-instant></script> <script data-no-instant>InstantClick.init();</script> </body> </html>InstantClick现在在你的网站上激活了。阅读以下内容会更好的有助于你使用InstantClick2，InstantClick是如何工作的从传统的web开发InstantClick几乎没有差异,但重要的是要了解他们。InstantClick避开浏览器的页面变化周期可以这样的理解:InstantClick技术使你的网站一个单页面应用程序;这意味着浏览器不会改变页面了。注意事项：你不能依靠DOMContentLoaded或内jQuery.ready()来触发代码(相反可以使用文章事件和脚本的重新加载中的方法)。第三方脚本,想要兼容InstantClick可能需要一些调整(看文章下面：事件和脚本的重新加载)在页面变化上浏览器不会显示加载痕迹(看下文的自定义进度条).第二个最重要的理解是InstantClick只改变body和title,这样你的js脚本是只会加载一次(这带来能一个不错的明显的速度提升)。这所有的一切意味着什么:你的css样式和js脚本的head应该是一样的在页面InstantClick上。如果在你的head取决于页面的内容（像把一些js脚本或者css运行在页面里），它需要一点调整。InstantClick增强:如果访问者的浏览器不支持InstantClick站点，那么链接将像往常一样工作（补充翻译：就是没有预加载效果正常的浏览），只是没有速度上的提高了。3，预加载InstantClick有不同的预压的选择,使用一个或另一个取决于你的服务器将允许。In any case, not recalculating scripts and styles on every page change will already make your pages up to twice as fast (measured with Turbolinks, another project using this technique).【没看懂部分，故不翻译，好像就是个介绍】默认值：on mouseover (hover)鼠标移到超链接上就进行预加载，如果页面内容不是特别多，用户点击链接进入文章会立即显示。代码按照初始化中提到的代码即可。没有额外的服务器上的负载：on mousedown在用户鼠标点击的瞬间来预加载页面，让服务器开销几乎为零，同时还有个不错的速度提升。使用,将“mousedown”作为参数传递给InstantClick.init。InstantClick.init('mousedown');在两者之间： on mouseover with a delay如果用户将鼠标悬停你的超链接后，InstantClick将根据你设置的时间延迟预加载。建议延迟是100 ms和50 ms。超过100 ms实际上可能比on mousedown慢，小于50 ms和on mouseover (hover)几乎无差异让InstantClick预加载延迟后,通过延迟毫秒InstantClick.init作为参数InstantClick.init(50);移动端会怎样预加载会在用户手触摸超链接的一瞬间开始如果你的网站优化的移动(设备宽度视窗在Android上,使用FastClick iOS),“点击”当游客从链接,发布他的手指给大约100毫秒的延迟预加载如果你的网站不是优化了手机,这取决于操作系统。Android给300 ms,iOS给450 ms。3 g请求在同一网站通常大约需要200 ms。该怎样去选择如果你的站点可以处理额外的负载：on mouseover (hover)如果你的站点服务器不能有太多额外负载，那么用on mousedown，您的网站仍然会快于99%的网站。If you’d like to determine if your server can, start with mousedown which will put virtually zero additional stress on your server. Then use mouseover with a 100 ms delay. Then with a 50 ms delay (or go by smaller decrements, if you’re patient). Then with mouseover directly.If server-side analytics are important you are limited to mousedown, as using anything else would skew the data.【又一段翻译不好的，不太重要】4，黑名单如果一些链接不需要InstantClick预加载。黑名单可以做到。什么事黑名单什么样的连接需要设置黑名单，并且不能用白名单：链接指向一个动作,如注销和切换语言。链接指向html内容,需要一段时间来加载。链接指向页面<head>部分有不同css/js脚本在JavaScript链接触发一个动作。一些内部链接已经列入黑名单,不能白名单:含有target或者download属性的超链接上。在不同的域名上或者协议上。在相同的页面上链接指向一个#锚。黑名单的链接这样设置黑名单的链接,添加一个data-no-instant属性。<a href="/blog/" data-no-instant>Blog</a>如何设置一组黑名单有的时候为了方便，我们需要给一整组设置黑名单，这样的话就不是挨个超链接加data-no-instant属性了。只需要给父级元素添加data-no-instant属性即可例如<div data-no-instant> 无数个需要加黑名单的超链接 </div>白名单的链接或一组链接如果上述无数个需要加黑名单的超链接中有那么几个不需要添加黑名单的，可以额外为这几个链接添加白名单属性data-instant在幕后发生了什么是InstantClick穿过所有的父元素,从当前链接< html >,如果发现data-no-instant属性它认为列入黑名单并停止遍历的联系父母。如果找到一个data-instant它认为白名单的超链接。如果你想黑名单默认情况下所有的链接,然后白名单链接一个接一个的加,或白名单只有链接在一个容器,那么添加data-no-instant属性到<body>,并且将data-instant属性添加到需要预加载的容器/链接。白名单模式The following is deprecated and will likely be removed in 4.0. It’s only useful to know if you’re dealing with a website that has it activated (the true argument is passed to InstantClick.init).The Correct Way™: If you want to accomplish the same as the whitelist mode, just add data-no-instant to your , as described in “Whitelist a link or group of links”.启用白名单模式通过true来InstantClick.initInstantClick.init(true); /* or */ InstantClick.init(50, true); /* or */ InstantClick.init('mousedown', true);5，事件和脚本的重新加载InstantClick技术让你的网站成为一个单页面应用程序,所以没有DOMContentLoaded开始页面内的变化了。正因为如此,其他的js脚本可能需要调整与InstantClick正常工作。InstantClick 4个事件提供钩子为页面的生命周期:change：页面更改完毕，即click触发fetch：页面开始预加载receive：页面预加载完毕，即：hover或mousedown触发的预加载，但不一定会change，因为用户不一定click。wait：用户点击一个链接,但是还没有加载的页面。只有立即触发页面时不显示。如不在body中有个脚本不希望被重新加载，那么给他加上黑名单属性即可<script data-no-instant>alert("I’m only run once.");</script>如果你的脚本与预加载冲突，你需要一个一个的找出来，并解决他为例,这是如何让Google Analytics(2013年底代码)工作:<script src="instantclick.min.js" data-no-instant></script> <script data-no-instant> /* Google Analytics code here, without ga('send', 'pageview') */ InstantClick.on('change', function() { ga('send', 'pageview', location.pathname + location.search); }); InstantClick.init(); </script>改变内容receive【这部分我不熟悉，故不翻译】Sometimes it’s simpler to alter pages on the fly than to rearchitect your back end for InstantClick. receive allows you to do that.It gets three arguments: url, body and title.url is the address of the page received, it includes the hash. It’s read-only.body is the body object and title is the title text. You can modify those two and return an object with them (or with just one of them to modify only one) if you want to alter pages before they’re displayed.Here’s an example.InstantClick.on('receive', function(url, body, title) { var dont_display = body.querySelector('#dont_display_me_when_loaded_with_instantclick') if (dont_display) { dont_display.setAttribute('hidden', ''); } title += ' (loaded with InstantClick)'; return { body: body, title: title }; });Keep in mind the body object here is body and not document.body!When you have more than one callback listening to receive, each subsequent callback will get the last altered content.If you don’t want to alter the page on receive, either don’t return anything or return false.进一步1，跟踪资源的变化现在跟踪资产的方式改变目前有点笨拙。它可能会在InstantClick 4.0上有所改变。检查当样式表或脚本(外部或内联)被更新时,将其添加data-instant-track属性:<link rel="stylesheet" href="style.css" data-instant-track> <script src="script.js" data-instant-track></script> <style data-instant-track>body { background: aliceblue; }</style> <script data-instant-track>window.timingStart = performance.now();</script>InstantClick将检查更改href或src属性是否存在，表明一个文件被更新,修改其属性:<link rel="stylesheet" href="style.css?20140308" data-instant-track> <script src="script.js?20140308" data-instant-track></script>如果是内联js脚本或css风格,InstantClick将检查改变元素的内容<style data-instant-track>body { background: midnightblue; font: 13px Helvetica; }</style> <script data-instant-track>var timingStart = performance && performance.now();</script>当检测到任何变化,InstantClick将重新加载页面,从而使浏览器重新评估所有脚本和样式。2，自定义进度条这个进度条进度条是假的,只是让用户意识到将要发生什么。在未来可能会展示真正的进度条在未来的改变中，The bar is displayed even if the page has been loaded instantly。在GitHub上讨论。默认情况下,进度条的颜色是#29d,你可以用CSS改变:#instantclick-bar { background: white; }你也可以让他消失:#instantclick { display: none; }目标RoadmapChangel...

YoduBGM 1.6.0是一款简洁(简陋)风格的背景音乐播放器，需要主题支持pjax技术，否则页面切换歌曲会断掉。背景音乐播放器那么多了为什么还要开发呢？而且还这么丑？答：其他的背景音乐播放器只能支持常规的pjax模板，而Yodu模板使用的instantclick技术并没有得到支持，所以为了自己的模板能有个背景音乐播放器，我就自己弄了个。看这插件的名字就知道这个是专门为Yodu模板准备的，当然其他模板也是可以用的。插件特色1，这是一款简洁BGM播放器,需要您的主题支持pjax或者instantclick才能保证页面切换依旧播放2，支持多首歌曲，且默认随机播放3，可设置是否自动播放（部分手机浏览器不支持）4，支持网易云音乐调用（不保证api永远有效）5，当你按照格式只填写一首歌曲时，插件会默认隐藏掉切歌按钮，只保留播放按钮，使其更加简洁6，插件使用了原生js，所以无需加载jq等js框架7，整个插件所需要加载的文件不到5kb，可谓是非常小巧了下载地址：typecho版本：https://github.com/jrotty/YoduBGMwordpress版本：http://blog.heheda.top/archives/527更新历史2018年06月29日发布1.6.0版音乐格式填写方式简化2018年06月16日发布1.5.0版1，字体图标文件全部写入了css里，解决特殊情况下的字体跨域问题2，复活网易云调用功能3，加了了歌曲数量判断，大于一首歌曲时，切歌按钮才会出来，使其更加简洁人性化4，js梳理优化，缩减代码，解决部分bug2018年x月x日发布x版删除网易云音乐api功能，失效了2017年07月10日发布0.7.0版修正网易云音乐api获取歌单失效问题2017年01月16日发布0.6.0版与文章内音乐播放器兼容，当文章内有音乐播放器播放时，会自动暂停背景音乐播放器，当切换到没有音乐播放器播放的页面时背景音乐再次继续播放。【仅限使用Audio标签的播放器】2016年12月25日发布0.5.0版网易云解析地址全面支持https，优化了javascript代码优化完反而有毛病已改回。2016年12月11日发布0.4.0版博主简单学习了下javascript,去除了对jQuery的依赖。2016年11月30日发布0.3.0版后台加入移动端显示与否，消除插件可能存在的隐患2016年11月14日发布0.2.0版修复0.1.5版instantclick模式下，页面切换歌曲顺序播放变为乱序播放的问题。2016年11月12日发布0.1.5版加入播放按钮的交互效果2016年11月3日首次发布0.1.2版一款支持同时支持pjax和instantclick技术的背景音乐播放器。插件预...

Yodu6.6.0一款轻量的自适应模板，没有使用任何前端框架，代码极为简洁，并使用了instantclick预加载技术，让模板加载起来非常流畅。兼容方面：除ie外大部分浏览器均兼容。ie系列ie9以上勉强兼容，兼容typecho1.0和1.1免费版说明免费版是正式版的极简版，具体下载地址与介绍请访问这个地址http://forum.typecho.org/viewtopic.php?f=5&t=10124付费版说明Yodu 售价￥58元，扫码付款然后联系QQ485868654，模板仅限自己使用禁止外发，模板版权不建议修改或删除【如果模板版权被删除那么你的模板出现任何问题，我都将不理不睬】购买说明：购买此主题后，您将获得主题源码，购买后可随意使用,但不得分发、转售,因主题是可复制的商品，售出后一律不予退款；售后支持主题免费升级，但不提供免费个性化修改服务。【售后支持到模板不在开发之时】本模板里面的原创性质代码均允许被二次利用于其他模板，可以不加任何声明，同时本模板允许被其他非typecho博客平台进行移植，但不提供技术援助。模板功能与特性功能介绍使用多皮肤模板八种皮肤可供选择,初心版有所减少模板后台设置缩略图6种缩略图设置方案模板后台设置预加载pjax5种模式可供选择模板后台设置评论ajax无刷新评论模板后台设置评论设置支持原生评论，畅言，Disqus等模板后台设置邮箱头像源设置支持改变邮箱头像源，后台提供多种选项模板后台设置代码高亮默认代码高亮，支持行号，也可关闭使用兼容版Prismjs代码高亮插件模板后台设置扩展功能一言，加载音效，平滑滚动，代码压缩，动态标题等模板后台设置二维码默认就有文章二维码，打赏二维码功能模板后台可设置关闭自定义css支持在模板设置处自定义css,群内提供部分css文档模板后台设置分类汇总分类文章汇总页面建立独立页面选择对应模板时间归档按时间归档文章的页面建立独立页面选择对应模板时间归档搜索时间归档页面的时间检索默认开启后台可设置关闭友链页面内置了友联模板，根据简单的书写规则就能展现出好看的友链页面,支持直接填写对方qq获取头像，后续版本将支持直接填写邮箱获取邮箱头像建立独立页面选择对应模板作者页面类似用户中心的界面无需设置文章目录树关联文章中的h1,h2,h3标签生成目录模板设置中扩展组件设置图片灯箱模板引用了fancybox的文件，5.0版本使用了fancybox3无需设置图片排版功能能够在默认模板的情况下对图片排布进行控制，同排图片尺寸最好一致，否则会乱，需要模板版本4.0.0图片alt信息最后面写上-25，-30，-33，-50，-75，-100即可完成图片的排版，以-25为例，-25指的是图片宽度是父级的25%，并且漂浮在文章最左侧，文章末尾最好不要放图页面锁可以给文章/独立页面加密，密码支持自定义文章自定义字段，字段名为lock，字段值就是你想要的密码页面锁密码提示功能就是给上边的页面锁加密码提示文字，非强制性的，不加则不显示提示文字文章自定义字段，字段名为hint，字段值就是密码的提示文字回复可见隐藏部分文章内容，只有评论文章才能看到，cookie不过期无需重复评论在文章写上这个格式即可[@hide]要隐藏的内容[/hide](去掉@)，如果采用ajax评论，评论后需要刷新才可以看到模板cdn功能可将模板的所有js，css，图片等文件，放到又拍云等地方，然后一键引用模板后台设置附件地址替换模板设置除输入替换前地址和替换后地址保存即可3.5.0版本以上支持mulu字段自定义字段名mulu，字段值随便写，输入字段的文章会显示文章目录树，就是在全局关闭目录树的基础上，可以为个别文章开启目录树，4.1.0版本以上支持 皮肤拓展支持可以自己为模板写css皮肤，然后扔进模板skin文件夹，然后进入模板设置选择皮肤，选择自己写的那个css皮肤即可4.3.0版本以上支持，初心版不支持针对360好搜优化针对好搜搜索引擎有针对性优化，当你文章被收录时有很大几率会图文并茂的显示在搜索结果上被动技能文章列表排序自定义包括（index，front，category，tag，search，date）页面的文章列表,可设置根据文章最后修改时间进行重新排序默认是倒叙，可根据需求不同简单的修改模板代码可实现更多骚操作6.3.5版本(含)以上支持，拓展设置中最后一项其他功能及常见问题：https://qqdie.com/archives/yodu-template-strategy.html背景音乐插件：https://qqdie.com/archives/typecho-yodubgm.html缩略图扩展包：https://qqdie.com/archives/500-random-thumbnail.html首次配置模板主题配置的视频教程：https://pan.baidu.com/s/1gfvLNl5【视频中说的关闭反垃圾保护的步骤在模板3.3.0版本以上无需关闭也可以】配置模板导航新建独立页面，标题为归档，地址archives.html，自定义模板选择archives，发布页面新建独立页面，标题为友情链接，地址links.html，自定义模板选择links，友情链接设置详见群内视频，发布页面新建独立页面，标题为关于，地址about.html，内容写些关于自己的一些东西，然后发布页面新建独立页面，标题为分类汇总，地址categories.html，自定义模板选择categories，发布页面配置模板后台打开模板后台，填入头像地址(可不填)，填入微博主页地址，Github主页地址。缩略图设置，根据需要自行选择，需要的配置即可，这里付费版的用户可选项比较多打赏功能二维码图片可替换images文件夹的的tb.jpg和wx.jpg其他说明上传模板后，一定要确保模板文件夹的名字为"yodu"否则模板显示会有严重问题instantclick预加载技术也是pjax的一种，但是不保证所有的背景音乐播放器插件能够无bug播放instantclick预加载技术可能会导致你正在使用的一些插件失效，例如音乐播放器，视频播放器，文章编辑器等等。更新20190324更新6.6.0版本1，修正友链一处php代码不规范，增强兼容性。2，修复目录树被其他元素遮盖问题。3，其他9种皮肤 x 2种布局风格，也就是说能组合出16种样式，以下拿出3种作为例子模板已停售！模板即将彻底停止更新，故停售！如果不介意没有后续更新，欢迎继续入坑！...