Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Typecho 自定义分页样式

Typecho 自定义分页样式

作者头像
泽泽社长
发布于 2023-04-17 09:36:55
发布于 2023-04-17 09:36:55
69700
代码可运行
举报
文章被收录于专栏:泽泽社泽泽社
运行总次数:0
代码可运行

typecho分页

typecho的这种分页样式设置最初我也是很迷茫的,所以我做的大部分模板都是只是用上一页和下一页,然而昨天翻出来看一下发现其实挺简单的,以前自己没有理解好。

其实这类文章在吕滔博客《Typecho 自定义分页样式》有讲,但是没有很细致的说明,甚至给出的代码本身有些小错误,所以我在这里细说下这个。

先上代码,然后对应的分析下 代码如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
pageNav('«', '»', 1, '...', array('wrapTag' => 'ol', 'wrapClass' => 'page-navigator', 'itemTag' => 'li', 'textTag' => 'span', 'currentClass' => 'current', 'prevClass' => 'prev', 'nextClass' => 'next',)); ?>

对应出来的的html如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<ol class="page-navigator"><li class="current"><a href="http://dmgogogo.com/page/1/">1</a></li><li><a href="http://dmgogogo.com/page/2/">2</a></li><li><span>...</span></li><li><a href="http://dmgogogo.com/page/5/">5</a></li><li class="next"><a href="http://dmgogogo.com/page/2/">»</a></li></ol>

由此可知

1,«»分别对应的是上一页按钮和下一页按钮, 2,数字1是分割范围(分几页),是当前页码附近可现实的页码数量,举个例子,当前页码为1,一共页码为5,那么上述代码输出的效果就是1,2,...5,如果当前页码为2呢,效果就是1,2,3,...53,...是分割字符,就是2中提到的那个省略页码的东西 4,wrapTag外层包裹标签名,默认ol,wrapClass外层包裹类名,itemTag内层标签名, 默认li,textTag直接输出文字的标签名,currentClass当前聚焦类名,prevClass上一页类名,nextClass下一页类名。 5,itemClass可以给其他页码的标签带上class

那么实战下目标就是下图,这个是我截取的wp某博客模板的样子

typecho分页

html代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="page"> 
<a href="#">|<</a><span class="current">1</span><a href="h#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">>|</a>
</div>

那么typecho怎么做呢,首先分析到上面的代码外围包裹标签为div类名为page,然后又看到他的上一页下一页的符号分别为|<>|,页码间隔大概是10,内层标签没有,当前页码类为current

那么整理后代码大概是这样子的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?php $this->pageNav('|<', '>|',10,'',array('wrapTag' => 'div', 'wrapClass' => 'page','itemTag' => '','currentClass' => 'current',)); ?>

最后将对应的css偷下来就行了,等等!我为什么要说偷QAQ

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
typecho重写数字分页(盒状分页)函数
之前写过《Typecho 自定义分页样式》主要是介绍typecho默认的分页文档使用方法,但是用了一段时间后发下局限性不少!
泽泽社长
2023/04/17
5630
Django 分页器
目录 Django 分页器 方法介绍 示例 分页器模板 Django 分页器 在页面显示分页数据,需要用到Django分页器组件 先看效果图: 使用分页器需要导入模块 导入:from django.core.paginator import Paginator 方法介绍 Paginator对象: paginator = Paginator(user_list, 10) # 传入分页数据,和展示的条数 # per_page: 每页显示条目数量 # count: 数据总个数 # n
HammerZe
2022/03/25
8230
Django 分页器
整理实用的Typecho分页样式和完整代码 方便实用
我们有些时候再做Typecho CMS主题的时候,分页一般随手会使用默认系统自带的,但是有些时候确实比较枯燥,所以老蒋准备在以后有遇到合适的样式分页,以及有时间的时候,就整理常用且自认为好看的通用Typecho分页,如果我们也有需要的话,那就使用上。
老蒋
2021/12/24
9160
整理实用的Typecho分页样式和完整代码 方便实用
jsp自定自定义标签
1 先要导入一个jar包 2 自定一个标签库 ,该库放在WEB-INF/tld下面 3 需要实现 该类 extends TagSupport 实现里面的方法 4 在jsp页面引入 该标签库 并
用户5927264
2019/07/31
8630
Java Web -【分页功能】详解
分页简介 分页功能在网页中是非常常见的一个功能,其作用也就是将数据分割成多个页面来进行显示。 使用场景: 当取到的数据量达到一定的时候,就需要使用分页来进行数据分割。 当我们不使用分页功能的时候,会面临许多的问题: 客户端的问题: 如果数据量太多,都显示在同一个页面的话,会因为页面太长严重影响到用户的体验,也不便于操作,也会出现加载太慢的问题。 服务端的问题: 如果数据量太多,可能会造成内存溢出,而且一次请求携带的数据太多,对服务器的性能也是一个考验。 ---- 分页的分类 分页的实现分
我没有三颗心脏
2018/04/26
2.2K0
Java Web -【分页功能】详解
Django分页器
分页功能是所有网页上都需要提供的功能,当要展示的条目比较多时,就需要进行分页,不但能减小数据库读取数据压力,也有利于用户浏览。 Django为我们提供了一个Paginator分页工具,这个类帮助我们来管理分页数据,该类存放在django/core/paginator.py它可以接收列表、元组或其他可迭代对象。
py3study
2020/01/20
7630
一个体验不错的 Typecho 评论框/样式模块整理
我们有在用Typecho主题做模板的时候,每次老蒋比较纠结的就是评论框和样式太单一。今天有看到国内的一款Echo免费主题(https://github.com/yunfeilangwu/echo)的评论框和样式不错,于是我将拆分出来,这样如果以后有需要用到的话可以直接用到主题中,当然这些需要感谢Echo主题作者。
老蒋
2021/12/24
9060
一个体验不错的 Typecho 评论框/样式模块整理
分页功能
  我们在浏览很多网页的时候,由于数据太多,很多时候不能放在一个页面上,此时就需要分页功能。比如我们看到的博客园最下面的分页栏,它是动态的显示的,比如虽然说总页数会是100页,但我们不能把100页都显示出来,始终显示当前页的前5页和后5页,然后还有首页、尾页、上一页、下一页等功能,今天我就来实现这一功能,我们可以把它封装成一个类,以后哪里需要了,直接引用就行了。   一、把分页功能定义成一个类   pagination.py class Pagination(object): def __init_
py3study
2020/01/17
7420
Django之分页组件和自定义分页
Django提供了一个新的类来帮助你管理分页数据,这个类存放在django/core/paginator.py.它可以接收列表、元组或其它可迭代的对象。
菲宇
2019/06/13
9950
Django之分页组件和自定义分页
angularjs自定义指令实现分页插件
由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能。现在单独做了个简易的小demo,主要是为了分享自己写的分页功能。注:本实例调用的
用户1174387
2018/01/17
3.2K0
angularjs自定义指令实现分页插件
几个实现分页的方法
自定义方法 def user_list(request): # user_list = data[0:10] # user_list = data[10:20] try: current_page = int(request.GET.get("page")) except Exception as e: current_page = 1 per_page = 10 # 数据总条数 total_count = len
新人小试
2018/04/12
8970
几个实现分页的方法
Typecho增加首页分页功能
本文共 87 个字数,平均阅读时长 ≈ 1分钟 1、新建文件pagination.php 路径 /Joe/public options->JPageStatus === 'default') : ?>
小东东
2023/03/20
5600
Typecho增加首页分页功能
商城项目-页面分页效果
刚才的查询中,我们默认了查询的页码和每页大小,因此所有的分页功能都无法使用,接下来我们一起看看分页功能条该如何制作。
cwl_java
2020/02/11
1.5K0
稳定易用的 Django 分页库,完善分页功能
在 通过 Django Pagination 实现简单分页[3] 中,我们实现了一个简单的分页导航。但效果有点差强人意,我们只能点上一页和下一页的按钮进行翻页。比较完善的分页效果应该像下面这样,但想实现这样一种效果,Django Pagination 内置的 API 已无能为力。接下来我们将通过拓展 Django Pagination 来实现下图这样比较完善的分页效果。
HelloGitHub
2021/05/14
9200
Mybatis分页功能
totalPage :总页数 totalPage = count / pageSize
用户11097514
2024/05/30
1120
Django学习笔记之Cookie、Session和自定义分页
cookie Cookie的由来 大家都知道HTTP协议是无状态的。 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不会直接影响后面的请求响应情况。 一句有意思的话来描述就是人生只如初见,对服务器来说,每次的请求都是全新的。 状态可以理解为客户端和服务器在某次会话中产生的数据,那无状态的就以为这些数据不会被保留。会话中产生的数据又是我们需要保存的,也就是说要“保持状态”。因此Cookie就是在这样一个场景下诞生。 什么是Co
Jetpropelledsnake21
2018/07/04
8930
Django 实现分页功能
当页面因需要展示的数据条目过多,导致无法在一个页面全部显示。这时,页面经常会采用分页形式进行展示,然后每页显示 20 或者 50 等条数据。分页经常在网站上随处可见,它大概是这样子:
猴哥yuri
2018/08/16
1.5K0
Django自定义实现分页器
思路:浏览器携带页码发送get请求,获取当前页信息。后端从get请求中获取响应的页码数,查询对应数据并返回
仙人技术
2021/08/31
9730
Flask 框架实现自定义分页
手撸的表格分页: Flask框架下的分页,我研究了很久,自带的分页方法不稳定,还不如自己手撸的好使.
王瑞MVP
2022/12/28
4990
django list类型数据分页
有一个django项目,由于业务要求,自己构造了一个list数据类型。这是一个临时数据,不需要保存到表中,但是需要分页展示。
py3study
2020/04/21
7950
相关推荐
typecho重写数字分页(盒状分页)函数
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验