欢迎光临
我们一直在努力

大前端dux两步实现上一篇下一篇功能

大前端dux主题一开始,浩子同志就去掉了上一篇下一篇功能,但对于像我们这样的小博来说,很多盆友都想有这样的功能,下面就将上一篇下一篇功能的实现方法贴出来.

大前端dux1.0.2实现上一篇下一篇功能其实很简单,只需要两步即可:

1.打开主题根目录找到single.php文件,在代码<div class=”article-tags”><?php the_tags(‘标签:’,”,”); ?></div>后(大约在54行)加上如下代码

<?php
echo "<nav class=\"article-nav\">\r\n\t\t\t<span class=\"article-nav-prev\">";
previous_post_link(__("上一篇", "haoui") . "<br>%link");
echo "</span>\r\n\t\t\t<span class=\"article-nav-next\">";
next_post_link(__("下一篇", "haoui") . "<br>%link");
echo "</span>\r\n\t\t</nav>\r\n\t\t";
?>

2.新增样式,打开main.css文件,在文件最底部加上如下代码:

/*上一篇下一篇样式*/
.article-nav{overflow:hidden;margin-bottom: 30px;font-size:14px;color:#bbb;clear: both;}
.article-nav span{float:left;position:relative;width: 50%;}
.article-nav span.article-nav-next{float:rightright;text-align:rightright}
.article-nav span.article-nav-next::before{content: ”;position: absolute;left:0;top:0;height:100%;display: block;width: 1px;background-color: #eee;}
.article-nav a{color: #999;margin-right: 10px;display: inline-block;}
.article-nav span.article-nav-next a{margin-left: 10px;margin-right: 0;}
.article-nav a:hover{color: #FF5E52;}

以上就是大前端dux1.0.2主题实现上一篇下一篇功能,简单吧,需要此功能的盆友可以试试.

未经允许不得转载:阿神的博客 » 大前端dux两步实现上一篇下一篇功能

分享到:更多 ()