安和Blog

看似寻常最奇崛,成如容易却艰辛。

2021年04月04日

Instantclick无刷新

在实现全站无刷新的过程中出现了一些可能很常见的问题,因...

最后更新于 2021年10月02日

归档于 折腾网站

目前已有 8 条评论,欢迎交流

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

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>

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

评论卡

评论区

已有 8 条评论

  1. 南瓜奶酪
    南瓜奶酪
    2021年04月17日

    dalao我可以要一份你现在在用的魔改主题嘛,比原版好看耶

    回复

    1. 安和
      安和
      2021年04月18日

      在原版的基础上更改的内容以及所有的代码我有发到之前的修改记录里哦

      回复

  2. 叶

    2021年04月12日

    比较好奇问吗那个作者和链接怎么加的,能出版教程么

    回复

    1. 安和
      安和
      2021年04月13日

      很简单的实现啦,除了获取当前文章链接和文章作者两个调用之外都是写死的,我在nexmoe修改记录里应该有发这段代码

      回复

  3. 夏目贵志
    夏目贵志
    2021年04月09日

    以前用过一段时间,后面换了。

    回复

    1. 安和
      安和
      2021年04月09日

      我是之前从泽泽那里看到的,我这个主题刷新的时候背景会闪一下会很难受,所以就弄了个无刷新

      回复

  4. 回忆乄幻城
    回忆乄幻城
    2021年04月04日

    好耶!比原版舒服多了

    回复

    1. 安和
      安和
      2021年04月04日

      禁止好耶!

      回复