这里简单讲一下什么是pjax,可以理解为点击连接时不刷新页面,而是替换页面的内容,来达到优化访问速度的目的,同时还可以保留一些不需要刷新的内容(如正在播放的音乐)。
如何在Material X主题中使用pjax,我们需要首先引进pjax的脚本,插入layout/_partial/head.ejs
:
1
| <script src="https://unpkg.com/pjax/pjax.js"></script>
|
然后我们在layout/layout.ejs
插入如下代码(注意要在</body>
)的前面
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
| <script> var pjax = new Pjax({ elements: "a", selectors: [ "title", ".l_body", "cover-wrapper" ] }) function LoadHitoKoto(){ fetch('https://v1.hitokoto.cn/?c=a') .then(function (res){ return res.json(); }) .then(function (data) { var h_content = document.getElementById('hitokoto-content'); var h_from = document.getElementById('hitokoto-from'); h_content.innerText = data.hitokoto; h_from.innerText = "——" + data.from; }) .catch(function (err) { console.error(err); }) } function LoadGitalk(){ $.getScript("/js/gitalk.js", function() { var gitalk = new Gitalk({ clientID: "xxx", clientSecret: "xxx", repo: "gaisaiyuno.github.io", owner: "GaisaiYuno", admin: "GaisaiYuno", id: location.pathname, distractionFreeMode: false }); gitalk.render('gitalk-container'); }); } function LoadMathJax(){ $.getScript("//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML", function() { MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); var math = document.getElementsByClassName("entry-content")[0]; MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]); }); } function LoadFancybox(){ $(".article-entry").find("img").each(function () { var t = document.createElement("a"); $(t).attr("data-fancybox", "gallery"), $(t).attr("href", $(this).attr("src")), $(this).wrap(t) }) } function LoadWpac(){ wpac_init = window.wpac_init || []; wpac_init.push({widget: 'Rating', id: 21085}); WIDGETPACK_LOADED=false; (function() { WIDGETPACK_LOADED = true; var mc = document.createElement('script'); mc.type = 'text/javascript'; mc.async = true; mc.src = 'https://embed.widgetpack.com/widget.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling); })(); } document.addEventListener('pjax:send', function (){ $(".loading").css("display", "block"); });
document.addEventListener('pjax:complete', function (){ $(".loading").css("display", "none"); LoadMathJax(); LoadHitoKoto(); LoadWpac(); LoadFancybox(); LoadGitalk(); }); </script>
|
然后我们还得魔改一下css,首先是加上一个加载动画:
1 2 3 4 5 6 7 8
| .loading{display:none} .loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:999999;background-color:rgba(250,250,250,.9)} .loading img{width: 280px;height:210px;position: relative;top: 45%;left: 50%;margin-left:-140px;margin-top: -105px;} #loader{display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ff5a5a; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;} #loader:before{content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #5af33f; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite;} #loader:after{content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #6dc9ff; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;} @-webkit-keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}} @keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
|
加入source/style.less
,然后把
1
| <div class="loading"><div id="loader"></div></div>
|
插入layout/_partial/head.ejs
。
后来发现gitalk的css会出点问题,需要把gitalk.css的全部内容加入source/style.less
。
友链的图片显示也会有点问题,我们就不要占位图了,把layout/links.ejs
里面的:
1
| <img class='avatar' src='<%- theme.avatar_placeholder %>' data-echo='<%- url_for(item.avatar ? item.avatar : "https://img.vim-cn.com/a4/87a96e2e01b1180bba1e76e190df5220378c1a.png") %>'/>
|
改成:
1
| <img class='avatar' src='<%- url_for(item.avatar ? item.avatar : "https://img.vim-cn.com/a4/87a96e2e01b1180bba1e76e190df5220378c1a.png") %>'/>
|
这样就差不多了。
参考:https://sunhang.top/2019/12/20/pjax/