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() 检查当前页面是否为文章 -->
<% if (is_post()) { %>
<div class="article-container">
<div class="post-title">
<div class="article-title">
<h3><a><%= page.title %></a></h3>
</div>
<div class="post-meta-info">
<div class="article-meta-info">
<div class="meta">
<div class="info">
<span>
@ -25,15 +25,26 @@
</div>
</div>
</div>
<div class="post-content">
<div class="article-content">
<%- page.content %>
</div>
<!-- TODO: 上一篇,下一篇 -->
<!--<div class="post-prev-next">
<a class="prev btn" rel="prev" role="navigation" href="/">上一篇</a>
<a class="next btn" rel="next" role="navigation" href="/">下一篇</a>
</div>-->
<div class="article-nav">
<% if (page.prev) { %>
<div class="article-prev">
<a class="prev btn" rel="prev" role="navigation"
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">
<%- partial('valine') %>
</div>

View File

@ -1,6 +1,6 @@
.article-container {
.post-title {
.article-title {
h1 {
text-transform: uppercase;
font-size: 30px;
@ -41,7 +41,7 @@
}
}
.post-meta-info {
.article-meta-info {
margin-top: 20px;
@ -106,9 +106,10 @@
}
.post-content {
.article-content {
padding-bottom 10px
border-bottom 1px solid #f2f2f2
a {
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
}
a.next {
.article-next {
float right
}