阅读数:

Hexo分页

0

说明

由于博客量的增加,单页给人的体验不太友好,加载缓慢,因此需要分页来提升用户的体验效果,怎么做呢,
我以TKL主题为例给大家说明,因为这个主题只有首页是带分页的,其他分类啊,标签,archive是不带分页的,默认只加载config.per_page条博客,具体实现如下:
我们可以参考首页的实现来修改

实现

  • 进入casper/index.ejs

进入之后我们可以看到这样的类似代码

1
2
3
4
<nav class="pagination" role="pagination">
<% if (page.prev) { %><a class="pull-left" href="<%- url_for(page.prev_link) %>">← 上一页</a><% } %>
<% if (page.next) { %><a class="pull-right" href="<%- url_for(page.next_link) %>">下一页 →</a><% } %>
</nav>

很明显这事分页的html和css

  • 其他分类啊,标签,archive是如何渲染的

打开源码我们发现,他们几个模版都用的是casper/archive.ejs这个模版

1
2
3
<%- partial('casper/archive', {pagination: config.tag}) %>
<%- partial('casper/archive', {pagination: config.category}) %>
<%- partial('casper/archive', {pagination: config.archive}) %>

好那我们就放心了,改一个地方就行,我们把上面的分页代码copy到archive.ejs,看看会不会生效呢?

copy

见证奇迹的时刻

bingo

这样我们就很简单的实现了hexo博客中所有的分页设置,包括首页、分类啊,标签,archive等


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^