search

MeiK2333 / github-style

https://themes.gohugo.io/themes/github-style
MIT License
533 stars 173 forks source link

pjax刷新区域的选择。 #111

Open ventusoon opened 2 years ago

ventusoon commented 2 years ago

作者大大，最近又在折腾博客，加了一些动态元素，但是每次跳转页面都会刷新，导致动画元素、或者后台歌曲重新加载。

后来无意中发现了pjax，经过一番折腾也实现了无刷新加载。

我的操作如下：

extended_head.html下引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

<script>
  $(document).pjax('a[target!=_blank]', '#pageContent', {fragment: '#pageContent'});
</script>

用<div id="pageContent"></div>包裹刷新区域，不想刷新的区域用了其他的内容划分。

但是奈何才疏学浅，刷新区域的选择还是有问题，导致某些应该正常加载的页面不加载了：

1.Overview下的Post activity、以及贡献图不加载了；

2.post页面下的目录失效，点击无反应；

3.gitalk不刷新。

想请教我的哪些思路出了问题，又或者作者大大能不能给出更好的方案。 感恩😋

MeiK2333 commented 2 years ago

你可以尝试一下 iframe 的方式

ventusoon commented 2 years ago

你可以尝试一下 iframe 的方式

研究了一会会儿，还是不会用😭

MeiK2333 commented 2 years ago 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body style="margin:0; padding:0;overflow:hidden">
<iframe src="http://www.luvsia.com/" frameborder="0"
        style="overflow:hidden;height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0"
        height="100%" width="100%"></iframe>
<!--
在这里写你想保持的内容，比如音乐等
-->
</body>
</html>

大概这样

ventusoon commented 2 years ago 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body style="margin:0; padding:0;overflow:hidden">
<iframe src="http://www.luvsia.com/" frameborder="0"
        style="overflow:hidden;height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0"
        height="100%" width="100%"></iframe>
<!--
在这里写你想保持的内容，比如音乐等
-->
</body>
</html>

大概这样 c62ba995801d73d45082c9ddf4f412b

重影。。。

MeiK2333 commented 2 years ago

可以研究一下 html 的基本操作等