Posts List
  1. 创建导航footer-nav
  2. 修改导航布局
  3. 添加导航
  4. 删除原导航

文章底部添加"上一篇"及"下一篇"

不太喜欢landscape+自带的文章导航,上下方式太占空间,整体感觉太丑.
个人比较喜欢简洁明了的风格

创建导航footer-nav

目录切换到 themes\landscape-plus\layout_partial\post, 新建文件 footer-nav.ejs
复制以下代码至 footer-nav.ejs 文件中,然后保存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<% if (post.next){ %>
<a align="left" href="<%- config.root %><%- post.next.path %>" id="article-nav-older" class="article-nav-link-wrap">
<div align="left" class="article-nav-title">上一篇 <%= post.next.title %></div>
</a>
<% } else {%>
<a align="left" id="article-nav-older" class="article-nav-link-wrap">
<div align="left" class="article-nav-title">没有了</div>
</a>
<% } %>
<% if (post.prev && post.prev.title){ %>
<a align="right" href="<%- config.root %><%- post.prev.path %>" id="article-nav-newer" class="article-nav-link-wrap">
<div align="right" class="article-nav-title">下一篇 <%= post.prev.title %></div>
</a>
<% } else {%>
<a align="right" id="article-nav-newer" class="article-nav-link-wrap">
<div align="right" class="article-nav-title">没有了</div>
</a>
<% } %>

修改导航布局

打开文件 themes/landscape-plus/source/css/_partial/article.styl
找到article-nav-newerarticle-nav-older,并按以下进行修改

1
2
3
4
5
6
7
8
9
10
11
#article-nav-older <!-- 将原来的newer修改成older -->
@media mq-normal
float: left
text-align: right
padding-right: 20px

#article-nav-newer <!-- 将原来的older修改成newer -->
@media mq-normal
float: right
text-align: left
padding-left: 20px

添加导航

打开文件 themes\landscape-plus\layout_partial\article.ejs, 并按以下位置添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a href="<%- config.root %><%- post.path %>#more"><%= __('excerpt_link') %></a>
</p>
<% } %>
<% } else { %>
<%- post.content %>
<% } %>
</div>
<!-- 文章底部,这是新添加的 -->
<% if (!index){ %>
<footer class="article-footer">
<%- partial('post/footer-nav') %>
</footer>
<% } else {%>
<p algin="center">=== THE END ===</p>
<% } %>

删除原导航

还是刚才那个文件 article.ejs, 删除掉以下代码,然后保存即可

1
2
3
<% if (!index){ %>
<%- partial('post/nav') %>
<% } %>

完事.看看效果吧

本文作者:JeremyHe
本文链接:http://www.alzz.me/posts/2014/07/25/03_文章底部添加上一篇及下一篇/
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

有问题?
微信。◕‿◕。