都2020了,带你开发hexo主题(四)
添加分页
上篇教程已经把首页内容给填充上去了,接下来继续给首页添加上分页。在文档辅助函数里有关如下
直接复制这段代码到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
4index_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 ;
}
</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……
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号