image

前言

發(fā)現(xiàn)其他主題有上一篇下一篇的功能，于是就給自己用的主題也加了一個。就是這樣子~喵

實現(xiàn)

廢話不多說，直接開始實現(xiàn)。

第一步 copy代碼

當(dāng)然是去有的博客上面去抄代碼啊(抄作業(yè)什么的最擅長了)
找了個用next的友鏈博客，嗯...可以去我友鏈看

image

隨便打開一片文章，按F12打開開發(fā)者工具。使用左上角的指針工具選擇到上一篇下一篇元素的代碼，右鍵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>

第二步 修改代碼

根據(jù)自己主題修改成模板的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這個文件里。

第三步 增加樣式

繼續(xù)使用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