毕少侠也在江湖

Hugo添加Pjax功能支持

给你的Hugo博客添加Pjax功能支持

AI文章摘要
ChatGPT 3.5 turbo
介绍Hugo静态网站生成器,并阐述如何使用Hugo为博客网站添加PJAX功能以实现无刷新页面加载,提升用户体验。具体包括:解释PJAX概念,推荐使用MoOx/pjax版本,指导如何安装和配置PJAX,以及如何在页面切换时重载JavaScript文件。同时,指出在使用PJAX时需要注意的事项和使用场景。

注意
Hugo是一个使用Go语言构建的静态网站生成器,它的速度非常快,并且具有强大的主题支持和灵活的定制选项。通过Hugo,你可以轻松地构建和管理博客网站,并且添加PJAX功能也非常简单。

当你希望你的博客网站加载更快、更平滑,同时又想要保持简洁的用户体验时,PJAX(PushState + Ajax)就是一个很好的选择。Hugo是一个快速、灵活的静态网站生成器,它提供了添加PJAX功能的简便方法。在这篇博客中,我将向你介绍如何使用Hugo为你的博客网站添加PJAX功能。

1 什么是PJAX?

PJAX是一种通过Ajax和HTML5 History API来实现无刷新页面加载的技术。当用户点击链接时,PJAX会使用Ajax从服务器加载页面的一部分,然后使用History API来更新浏览器的URL,使其看起来像是完整加载了一个新页面。这种方式可以显著提高网站的加载速度,并提升用户体验。
Pjax = Ajax + pushState。当用户进行超链请求时,Pjax 会拦截请求,然后触发 Ajax 请求和 pushState。其中,Ajax 使你的页面局部刷新,pushState 用于修改 URL 而不跳转页面,从而实现不跳转页面局部刷新的功能。

2 PJAX在Hugo中的使用

PJAX实现有两大版本,一种是基于JavaScript的版本,另一种是基于jQuery的版本。

2.1 安装PJAX

本文以 MoOx/pjax 为例,介绍如何在Hugo中添加PJAX功能。
首先,在你的Hugo项目中安装pjax,使用cdn方式安装:

1
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>

2.2 配置PJAX页面demo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Liuyib's Blog</title>
    <meta name="description" content="Liuyib's Blog" />
  </head>
  <body>
    <header id="header" class="header">
      顶部栏...
    </header>
    <main id="main" class="main">
      主体部分...
    </main>
    <footer id="footer" class="footer">
      底部栏...
    </footer>
  </body>
</html>

每次切换页面时,title 会随之改变,header 和 footer 一般不变,而 main 是网站的主体部分,也会改变。因此,我们可以这样来使用 Pjax:

1
2
3
4
var pjax = new Pjax({
  // 这里填写页面中改变的部分(和 CSS 选择器用法一样)
  selectors: ["head title", "#main"],
});

2.3 重载JS

如果页面中引入了JS文件,那么切换页面时,这些JS文件也会被重新加载。因此,我们需要在切换页面时,重新加载这些JS文件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
  var pjax = new Pjax({
    // 这里填写页面中改变的部分(和 CSS 选择器用法一样)
    selectors: ["head title",".desktop .animate__faster", ".container"],
  });

  // Pjax 开始时执行的函数
document.addEventListener("pjax:send", function () {
  console.log("pjax:send");
});

// Pjax 完成之后执行的函数
document.addEventListener("pjax:complete", function () {
  console.log("pjax:complete");

  pjax_reload();
});

function pjax_reload() {
  pjax_js_reload("/js/theme.min.js");
  initCustomALink();
}

function pjax_js_reload(js_url, callback) {
  var bp = document.createElement('script');
  var curProtocol = window.location.protocol.split(':')[0];
  bp.src = js_url;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(bp, s);
}

</script>

3 PJAX使用的注意事项

  • 注意整个页面的划分和布局,PAJX 只能加载页面中改变的部分,不能加载整个页面,一般的静态的部分不需要重复加载。
  • 注意页面中的 JS 文件,切换页面时,需要重新加载 JS 文件,否则可能出现页面不完整和功能缺失的情况,需要在pjax:complete事件中重载JS。

4 PJAX的使用场景

  • 在网站运行过程,需要频繁切换页面时。
  • 需要加载大量静态资源时。
  • 需要加载大量动态资源时。

例如:网站页面贴边的音乐播放器,我在切换页面时,不需要重新加载音乐播放器,只需要重新加载页面中改变的部分即可。


相关内容

Buy me a coffee
geekswg 支付宝支付宝
geekswg 微信微信
0%