给博客添加上一篇下一篇功能

image

前言

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

实现

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

第一步 copy代码

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

image

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

image
得到的代码如下：

<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代码如下：

<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，从父级抄到子级(有些不需要的看情况)

image

稍微改了一下：

.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了

查看效果：

image