文章66
标签19
分类3

Instantclick无刷新

在实现全站无刷新的过程中出现了一些可能很常见的问题,因此在这里记录一下

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>

这样点击这个链接时网页就会正常刷新

本文作者:安和
本文链接:https://nekocoffee.com/598.html
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可

    8 评论

    1. 南瓜奶酪 2021年4月17日 回复
      dalao我可以要一份你现在在用的魔改主题嘛,比原版好看耶
      1. 安和 2021年4月18日 回复
        回复 南瓜奶酪: 在原版的基础上更改的内容以及所有的代码我有发到之前的修改记录里哦
    2. 2021年4月12日 回复
      比较好奇问吗那个作者和链接怎么加的,能出版教程么
      1. 安和 2021年4月13日 回复
        回复 叶: 很简单的实现啦,除了获取当前文章链接和文章作者两个调用之外都是写死的,我在nexmoe修改记录里应该有发这段代码
    3. 夏目贵志 2021年4月9日 回复
      以前用过一段时间,后面换了。
      1. 安和 2021年4月9日 回复
        回复 夏目贵志: 我是之前从泽泽那里看到的,我这个主题刷新的时候背景会闪一下会很难受,所以就弄了个无刷新
    4. 回忆乄幻城 2021年4月4日 回复
      好耶!比原版舒服多了
      1. 安和 2021年4月4日 回复
        回复 回忆乄幻城: 禁止好耶!