在实现全站无刷新的过程中出现了一些可能很常见的问题,因此在这里记录一下
instantclick实现无刷新
在footer.php加入以下代码
<script src="https://cdn.staticfile.org/instantclick/3.1.0/instantclick.min.js" data-no-instant</script>
<script data-no-instant>InstantClick.init('mousedown');</script>
其中 mousedown 是加载方式,其它方式可以参照友人C大佬的 instantclick 中文文档
样式失效
如果是在post.php内引用样式之类的话,请把所有的样式文件都移入头部或者尾部让样式文件在首页也可加载。
样式冲突
例如我在写友情链接页面时重写了 li 标签的样式,如果使用instantclick就会出现友情链接页面的样式替换掉其它页面的样式,我目前的解决方案是使用JS给友情链接页面关闭instantclick。
<script data-no-instant>
let target = document.querySelectorAll('a');
//遍历页面里所有获取到的a标签并执行需求的事件
for (var i = 0; i < target.length; i++) {
target[i].setAttribute('target','_self');
}
</script>
代码高亮失效
Nexmoe主题使用的是highlight.js,在原来的渲染代码下添加下面这段
<script>
InstantClick.on('change', function() {
var blocks = document.querySelectorAll('pre code');
for (var i = 0; i < blocks.length; i++) {
hljs.highlightBlock(blocks[i]);
}
});
</script>
如果只保留这一段会导致手动刷新后代码高亮失效。
原始渲染代码
<script>hljs.initHighlightingOnLoad();</script>
data-no-instant
使用方式就是
<a href="https://lolicorn.com" data-no-instant> 回到首页 </a>
这样点击这个链接时网页就会正常刷新