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

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

创建导航footer-nav

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

<% 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-newer和article-nav-older,并按以下进行修改

#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, 并按以下位置添加代码

<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, 删除掉以下代码,然后保存即可

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

完事.看看效果吧

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