添加分页

上篇教程已经把首页内容给填充上去了,接下来继续给首页添加上分页。在文档辅助函数里有关如下

直接复制这段代码到index.ejs最下面:

1
2
3
4
5
6
7
<div class="paginator">
<%- paginator({
prev_text: '<i class="fa fa-angle-left"></i>',
next_text: '<i class="fa fa-angle-right"></i>',
escape: false
}) %>
</div>

为了看到效果将根目录下config中的per_page改为三,表示每页三篇文章,这样我们八篇文章就会有三页了

1
2
3
4
index_generator:
path: ''
per_page: 3
order_by: -date

hexo s后的效果如下:

样式有点不能忍受,用f12工具查看其html代码如下:

1
2
3
4
5
6
<div class="paginator">
<span class="page-number current">1</span>
<a class="page-number" href="/page/2/">2</a>
<a class="page-number" href="/page/3/">3</a>
<a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a>
</div>

为了方便直接在index.ejs中写css如下:(最终效果如下图)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
.paginator {
margin-top: 2em;
width: 100%;
text-align: center;
}
.paginator .page-number{
display: inline-block;
border-radius: 50%;
font-size: 0.8em;
font-weight: 600;
height: 2em;
line-height: 2em;
margin: 0 0.125em;
min-width: 2em;
padding: 0 0.5em;
text-decoration: none;
}
.paginator .current{
box-shadow: inset 0 0 0 1px #47D3E5;
color: #47D3E5 !important;
}
</style>

添加文章详情页

首先在_partial下新建article.ejs,里面代码如下:(story居然没有文章页的模板233,果然好模板都被人用了)

1
2
3
<article>
<%- page.content %>
</article>

然后在index.ejs中的a标签中加入文章超链接:

1
2
3
4
5
6
7
<div class="content">
<h2><a href="<%- url_for(post.path) %>"><%= post.title %></a></h2>
<p><%= post.description %></p>
<ul class="actions stacked">
<li><a href="<%- url_for(post.path) %>" class="button">Learn More</a></li>
</ul>
</div>

那么怎样让文章页能更根据我们的article.ejs页生成呢?回到一开始的模板介绍:

按照hexo的文档来,post是用来显示文章的,我们在layout目录下新建这几个ejs(post、page、archive、category、tag),然后暂且把article中的内容复制到post.ejs下,hexo s预览下效果:

已经是能渲染出来了,但是md里面还没有内容,这里我直接把这篇文章的md复制到测试的md中

样式又差不行不行,这个留到下篇教程再美化,现在把之前留下的问题解决,乍一看article.ejs是无用武之地了,不过考虑到page这个单页面的渲染和post差不多一致,所以我们要把文章部分抽离到article.ejs中,这样就可以复用代码了。抽离在教程二中就已经讲到,用局部模版(Partial),代码如下:

1
<%- partial('_partial/article', {post: page}) %>

后面的{post: page}表示把page变量存到post中传递给了article,所以article中的代码就要改为:

1
2
3
<article>
<%- post.content %>
</article>

代码同步上传在github仓库和百度云上,回复story004获取。
未完待续 To be continued……

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦