Akina 主题改 pjax


众所周知,本博客主程序用的是Typecho,主题用的是子虚之人移植自wordpress的经典主题Akina,取名Akina for Typecho,首先感谢子虚之人无私的分享。

这个主题虽然好看,但,如果能支持pjax局部刷新,就更完美了。

对于一个代码小白来说如果要改成pjax是一件很难的事情。

经过主题代码的初步分析发现,作者其实预留了pjax代码,或者是作者在移植的时候没有删除代码,因为原wp主题是支持pjax局部刷新的。另外之前曾问过作者,主题内包含了pjax代码的情况,作者表示不清楚情况,且不打算更新pjax功能。

嗯~谁让我是一个完美主义的爱瞎折腾怪呢?只能自己开搞了!

pjax功能的实现其实是很简单的,早就有大神造好了轮子,只需要引入jquery和pjax.jquery库,并调用下列代码执行,即可正常工作。

$(document).pjax('a[target!=_top]', '#page', {
    fragment: '#page', //主容器
     timeout: 8000, // 8秒限时
}).on('pjax:send', function() {
    $('body').append('<div id="preloader"><div id="preloader-inner"></div></div>'); // 加载过度动画
}).on('pjax:complete', function() { // 加载完毕
    clickEvent(); // 一些点击事件
     $('#preloader').remove(); // 删除过度动画
});

你会发现其实主题已引入了库,global.js文件里也已经包含了这些代码,但是为什么不生效呢?

打开footer.php文件能找到如下代码:

var app = {"pjax":""};

是的了,就是这个地方在作怪。

在后面的双引号中间加一个空格或随便填些内容,保存文件。pjax局部刷新就生效了,至于原理?我也不知道,我也不敢问。

至此,博客已支持pjax功能了。

pjax功能有了,但是搜索的时候还是会重载整个页面,而且很多基于js的功能却失效了,首页的文章翻页出错了,不能评论了、代码高亮无效了、评论表情和右下角的小火箭也不见了。

先从简单的搞起,有了成就感,才有动力往下折腾。

打开global.js你会发现里面还在用jquery已弃用的live() 方法,把两处的live改成on
,不改的话后面会出问题,可能会导致pjax失效。为了减少问题的存在,建议替换js文件夹中的jquery.min.js和jquery.pjax.js更新的版本。

接下来解决小火箭消失的问题。小火箭最好解决,只要在header.php最后新建一个

<div id="pjax">

和footer.php最前新建

</div>

不包裹住小火箭的代码,然后将pjax执行代码中的

'#page'

改成

'#pjax'

就行了。

代码高亮失效问题,只要重载一次,在

}).on('pjax:complete', function() { // 加载完毕

下面添加

Prism.highlightAll();

就解决了。

评论表情不见的问题,和代码高亮问题差不多,都是重载一次就行了,只是为了在不加载commnets.php的页面不报错,要多在重载中多加入一个判断页面是否存在评论div,写法如下:

if(document.getElementById("comments")) {$.getScript("/usr/themes/Akina/js/OwO.js");}

搜索时的pjax也比较好解决,先打开footer.php,找到两个搜索的

<form 

在第一个form里插入

id="msearch" 

第二个form里插入

id="search"

然后在global.js中的pjax执行代码

$(document).pjax('a[target!=_top]', '#pjax', {
    fragment: '#pjax', //主容器
     timeout: 8000, // 8秒限时
})

后面插入

.on('submit', 'form[id=search], form[id=msearch], form[id=commentform]', function(a) {
    $.pjax.submit(a, {
         container: '#pjax' ,
         fragment: '#pjax' ,
         timeout: 8000,
  });
})

为了点击搜索按钮不出问题,我们还要将

//搜索盒子
function removeBox(){
    $('.js-toggle-search').toggleClass('is-active');
    $('.js-search').toggleClass('is-visible');
}
// 搜索按钮
$('.js-toggle-search').on('click', function () { removeBox() });
//第一层父
$(".js-search").click(function(){
    event.stopPropagation();
    removeBox();
});
//第一层子
$(".js-search").children().click(function(){
    event.stopPropagation();
    if($(this)[0].className!="search-form__inner"){ removeBox() }
});
//第二层父
$(".search-div").click(function(){
    event.stopPropagation(); 
    removeBox();
});
//第二层子
$(".search-div").children().click(function(){
    event.stopPropagation(); 
    if($(this)[0].className!="submit"){ removeBox() }
});

这些代码移至

/*
 * Click Event end
*/

后面就行了。

最难搞的就是评论问题,搞了好几天,弄得我头都大了。

根据大佬们的经验,typecho开启pjax,要想评论正常,就要把评论反垃圾功能关闭,然后每次pjax跳转页面要重新载入头部的评论js。

先登陆后台=>设置=>评论设置=>开启反垃圾保护,把前面的勾取消,保存设置。

然后打开comments.php,在最前面加入

<?php $this->header('commentReply=1&description=0&keywords=0&generator=0&template=0&pingback=0&xmlrpc=0&wlw=0&rss2=0&rss1=0&antiSpam=0&atom'); ?>

这代码大概是重载头部评论js的意思吧,我也不懂,我也不敢问。

由于主题已自带了ajax评论,只要在pjax里重载一次就行了,然而主题作者已经帮写好了,直接就可以评论了。

另外为了正常的ajax文章翻页,我们要把

loadSingle();

放到pjax里重载一次,并且要把global.js中

(function($) {
//Load Function

里的

loadSingle();

删除。

为了右上角的后台管理链接和退出登陆链接不出问题,要在header.php找到

<!-- 如果用户已经登录 -->

下的3个

<a

插入

target="_top"

最后,别忘了把主题设置里的CDN镜像加速的链接删除,否则是不生效的哦。

这样博客基本完成了pjax全站局部刷新功能了。

现在可以为博客添加背景音乐,不间断播放了。

在打开footer.php,在

</body>

前加入

<link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" type="text/css" rel="stylesheet" />
<div id="aplayer"></div>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js" type="application/javascript"></script>
<script>
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    audio: [{
        name: '我承认我自卑',
        artist: '杨小壮',
        url: 'https://www.gejiba.com/view.php/d02ebe6b9a6a519aeefda67ed519679f.mp3',
        cover: 'https://www.gejiba.com/view.php/fcb68f409b77a20c18d5af36213e0e49.jpg',
    }]
});
</script>

测试一下效果。


顺便给主题加个后台添加背景音乐的功能,方便后续加音乐。


声明:Hello World|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Akina 主题改 pjax


菩提本无树,明镜亦非台,本来无一物,何处惹尘埃