zblog分类模板添加自定义排序的教程

李洋博客
海外宿主机,香港云主机,租用服务器CN2知名云计算-90IDC

温馨提示:这篇文章已超过521天没有更新,请注意相关的内容是否还可用!

话说首款资源类主题模板终于要上线了,目前已经完成了基本功能设置,正在做适应的兼容,资源类主题模板涉及的接口较多,而且目前上线的主题中基本都有一个常用的功能,那就是分类模板页的排序,可以自由组合,按照时间、浏览、评论等等,部分主题模板还可能设计了免费、收费、VIP等等功能,所以这个排序是必要的。参考了百度和几位朋友的介绍算是实现了,但是跟可风大佬聊天的时候顺带说了这个事,因为最初的排序有一部分代码是可风写的,然后大佬告诉我有更简介高效的代码,好吧,有技术就是任性,不多说,直接上代码。

zblog分类模板添加自定义排序的教程 第1张

首先挂载接口

需要在主题核心文件(include.php)中挂载接口

Add_Filter_Plugin('Filter_Plugin_LargeData_Article', 'LargeData_Article');

然后接口对应代码:

//分类模板排序
function LargeData_Article($select, $w, &$order, $limit, $option, $type){
    global $zbp;
    switch($type){
        case 'category':
        //分类模板标签,此段可删除
        case 'tag':
        //标签模板标签,此段可删除
            $pagebar = $option['pagebar'];
            $sort = GetVars('sort','GET') ? 'ASC' : 'DESC';
            switch($o = GetVars('order','GET')){
                case 'view':
                    $order = array('log_ViewNums' => $sort);
                    break;
                case 'comment':
                    $order = array('log_CommNums' => $sort);
                    break;
                case 'newest':
                default:
                    $order = array('log_PostTime' => $sort);
                    $sort == 'DESC' && $o = null;
                    break;
            }
            if ($o){
                $pagebar->UrlRule->__construct($zbp->option['ZC_CATEGORY_REGEX'] .($zbp->Config('system')->ZC_STATIC_MODE != 'REWRITE' ? '&' : '?'). 'order={%order%}&sort={%sort%}');
                $pagebar->UrlRule->Rules['{%order%}'] = $o;
                $pagebar->UrlRule->Rules['{%sort%}'] = (int)GetVars('sort','GET');
            }
            break;
    }
}

其次在模板添加代码:

找到主题分类模板(catalog.php)文件,在适当的位置加入排序代码:

<form id="sort-list" class="filter-tag">
    <span class="filter-l"><i class="icon font-paixu"></i>排序</span>
    <li class="filter order">
        <a href="" rel="nofollow" class="{if GetVars('order','GET') == 'newest' || !GetVars('order','GET')}current{/if}" data-type="newest">最新<i class="icon font-chevron-{if GetVars('sort','GET')}up{else}down{/if}"></i></a>
        <a href="" rel="nofollow" class="{if GetVars('order','GET') == 'view'}current{/if}" data-type="view">浏览<i class="icon font-chevron-{if GetVars('sort','GET')}up{else}down{/if}"></i></a>
        <a href="" rel="nofollow" class="{if GetVars('order','GET') == 'comment'}current{/if}" data-type="comment">评论<i class="icon font-chevron-{if GetVars('sort','GET')}up{else}down{/if}"></i></a> 
    </li>
    {if $zbp->Config('system')->ZC_STATIC_MODE != 'REWRITE'}<input type="hidden" name="cate" value="{$category->ID}">{/if}
    <input type="hidden" name="order" value="{GetVars('order','GET')}">
    <input type="hidden" name="sort" value="{php}echo (int)GetVars('sort','GET'){/php}">
</form>

添加之后css样式自己修改,图标采用的是阿里图标库,如果您的奥森图标或者其他请自行更改<i class="icon font-paixu"></i>代码,值得注意的是 name="cate" 默认是指分类模板,如果是标签模板页需要修改成 name="tags" 就可以了。

最后添加js代码:

找到主题模板自带的js文件,在最后的位置添加如下代码,如果是放在html里,记得首位加上<script>如下代码</script>

//分类排序
!function(f){
  var a=f.find('.order a'),o=f.find('[name=order]'),s=f.find('[name=sort]');
  a.click(function(){
     var v=$(this).data('type');
      if(v===o.val()){
      s.val(s.val().toString()==='1'?0:1);
    }else{
      s.val(''===o.val() && !$(this).index() ? 1 : 0);
      o.val(v);
    }
    f.submit();
    return false;
  })
}($('#sort-list'))

效果预览:

zblog分类模板添加自定义排序的教程 第2张

大功告成,勇于尝试用问题留言反馈,反正我也不知道怎么解决。。。

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

zblog利用ip地址物理化插件实现评论显示IP归属地的方法

利用 acme.sh 申请 ZeroSSL 泛域名证书的图文教程

zblog响应式极简图片灯箱插件viewimglee,不足1kb的ViewImage.js超效率

Z-BlogPHP侧栏热门文章和热评文章不显示文章怎么解决

开启CDN后怎么防止流量被恶意盗刷

网站预加载 JS 脚本 instant.page 的使用方法

zbp支付宝即时到帐插件显示 count(): Parameter must be an array or an object 错误的解决办法

Windows下安装和部署SVN服务器且同步到Web站点的图文教程

发表评论

表情:
评论列表 (有 8 条评论,8952人围观)
网友昵称:我本良民
我本良民 V 铁粉 Google Chrome 96.0.4664.110 Windows 10 x64 凉席
01-07 来自上海 回复
排序这个实验成功了
不知能否分享下你的这个分类页的 分类,子类,标签级点击高亮的的方法,
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 10 x64
01-10 来自上海 回复
@我本良民 看主题代码,没有加密。
网友昵称:二十四
二十四 V 铁粉 Google Chrome 96.0.4664.110 Windows 10 x64 板凳
21-12-26 来自天津 回复
分类,子类,标签是咋弄的呢?
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 10 x64
21-12-27 来自上海 回复
@二十四 目前来说貌似分类和标签可用,其他页面无效。
网友昵称:阿迪·想念李志超
阿迪·想念李志超 V 铁粉 QQBrowser 10.7.4313.400 Windows 7 x64 椅子
21-01-06 来自天津 回复
[Facepalm][Facepalm]试了好几次都失败了 。。[Facepalm]
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 10 x64
21-01-06 来自上海 回复
@阿迪·想念李志超 代码放上去就对了,样式得自己修改。
网友昵称:芭比
芭比 V 铁粉 Google Chrome 78.0.3904.108 Windows 10 x64 沙发
20-12-21 来自上海 回复
我也想把我的typecho添加这样
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 10 x64
20-12-22 来自天津 回复
@芭比 可以的啊
取消
微信二维码
微信二维码
支付宝二维码