Add: 文章内容详情页面的上一篇/下一篇功能

This commit is contained in:
XPoet 2020-03-19 22:12:09 +08:00
parent 7b2625d11b
commit 9e87dfc702
2 changed files with 28 additions and 15 deletions

View File

@ -1,10 +1,10 @@
<!-- is_post() 检查当前页面是否为文章 --> <!-- is_post() 检查当前页面是否为文章 -->
<% if (is_post()) { %> <% if (is_post()) { %>
<div class="article-container"> <div class="article-container">
<div class="post-title"> <div class="article-title">
<h3><a><%= page.title %></a></h3> <h3><a><%= page.title %></a></h3>
</div> </div>
<div class="post-meta-info"> <div class="article-meta-info">
<div class="meta"> <div class="meta">
<div class="info"> <div class="info">
<span> <span>
@ -25,15 +25,26 @@
</div> </div>
</div> </div>
</div> </div>
<div class="post-content"> <div class="article-content">
<%- page.content %> <%- page.content %>
</div> </div>
<!-- TODO: 上一篇,下一篇 --> <div class="article-nav">
<!--<div class="post-prev-next"> <% if (page.prev) { %>
<a class="prev btn" rel="prev" role="navigation" href="/">上一篇</a> <div class="article-prev">
<a class="next btn" rel="next" role="navigation" href="/">下一篇</a> <a class="prev btn" rel="prev" role="navigation"
</div>--> href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %>
</a>
</div>
<% } %>
<% if (page.next) { %>
<div class="article-next">
<a class="next btn" rel="next" role="navigation"
href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i>
</a>
</div>
<% } %>
</div>
<div class="comment-container"> <div class="comment-container">
<%- partial('valine') %> <%- partial('valine') %>
</div> </div>

View File

@ -1,6 +1,6 @@
.article-container { .article-container {
.post-title { .article-title {
h1 { h1 {
text-transform: uppercase; text-transform: uppercase;
font-size: 30px; font-size: 30px;
@ -41,7 +41,7 @@
} }
} }
.post-meta-info { .article-meta-info {
margin-top: 20px; margin-top: 20px;
@ -106,9 +106,10 @@
} }
.post-content { .article-content {
padding-bottom 10px padding-bottom 10px
border-bottom 1px solid #f2f2f2
a { a {
text-decoration: none; text-decoration: none;
@ -133,15 +134,16 @@
} }
.post-prev-next { .article-nav {
margin-bottom 60px height 40px
margin 20px 0
a.prev { .article-prev {
float left float left
} }
a.next { .article-next {
float right float right
} }