前言

发现其他主题有上一篇下一篇的功能,于是就给自己用的主题也加了一个。就是这样子~喵

实现

废话不多说,直接开始实现。

第一步 copy代码

当然是去有的博客上面去抄代码啊(抄作业什么的最擅长了)
找了个用next的友链博客,嗯…可以去我友链看

随便打开一片文章,按F12打开开发者工具。使用左上角的指针工具选择到上一篇下一篇元素的代码,右键copy代码

得到的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="post-nav">
<div class="post-nav-next post-nav-item">
<a href="/live_16/" rel="next" title="杂感">
<i class="fa fa-chevron-left"></i> 杂感
</a>
</div>
<span class="post-nav-divider"></span>
<div class="post-nav-prev post-nav-item">
<a href="/live_18/" rel="prev" title="英语四级,我是来搞笑的">
英语四级,我是来搞笑的 <i class="fa fa-chevron-right"></i>
</a>
</div>
</div>

第二步 修改代码

根据自己主题修改成模板的ejs代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="post-nav">
<% if (post.prev){ %>
<div class="post-nav-prev post-nav-item">
<a href="<%- url_for(post.prev.path) %>" ><%= post.prev.title %><i class="fa fa-chevron-left"></i></a>
</div>
<% } %>
<% if (post.next){ %>
<div class="post-nav-next post-nav-item">
<a href="<%- url_for(post.next.path) %>" ><%= post.next.title %><i class="fa fa-chevron-right"></i></a>
</div>
<% } %>
</div>

插入到渲染文章的模板中,作者hojun的是在themes\jsimple\layout_widget\common-article.ejs这个文件里。

第三步 增加样式

继续使用F12来抄css,从父级抄到子级(有些不需要的看情况)

稍微改了一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.post-nav{
display: flex;
}
.post-nav-item {
flex: 1;
padding: 10px 0 0 0;
vertical-align: top;
}
.post-nav-next a {
padding-right: 15px;
text-align: right;
}
.post-nav-prev a {
padding-left: 15px;
}
.post-nav-item a {
position: relative;
display: block;
line-height: 25px;
font-size: 14px;
color: #555;
border-bottom: none;
}
.post-nav-prev .fa {
position: absolute;
left: 0;
top: 30%;
font-size: 12px;
line-height: 100%;
}
.post-nav-next .fa{
position: absolute;
right: 0;
top: 30%;
font-size: 12px;
line-height: 100%;
}

把css加到页面中即可

第四步 oooooook了

查看效果:

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

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