首页 » 建站手册 » Typecho添加上下篇文章的功能及样式

Typecho添加上下篇文章的功能及样式

谷歌已收录,更新于2019年07月15日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

现在用这个Lonesome主题,文章页面没有上一篇与下一篇的功能,就想着加一下。然后,看到https://blog.imalan.cn的上下篇样式不错,就给扒了。顺便,把样式表分享出来,想用的拿走,emmm

post.php

打开主题的post.php文件,可能个别主题不是这个文件,反正就是文章页面的php文件。在适当位置插入如下代码。

<div class="post-pager">
<div class="prev">
<?php $this->thePrev('%s','没有了'); ?>
</div>
<div class="next">
<?php $this->theNext('%s','没有了'); ?>
</div>
</div>

css样式

然后,打开主题的css文件,在里面加入如下代码

.post-pager{margin-top:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:5px;color:rgba(0,0,0,.86);background:rgba(0,0,0,.025);border-radius:4px}
@media screen and (max-width:767.5px){.post-pager{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
}
.post-pager>div{padding-top:30px;width:calc(50% - 10px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;position:relative}
@media screen and (max-width:767.5px){.post-pager>div:first-child{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #ddd}
}
@media screen and (max-width:767.5px){.post-pager>div{width:100%;text-align:left;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
}
.post-pager>div.prev::before{content:"上一篇"}
.post-pager>div::before{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:0;font-size:14px;padding:2px 5px;color:rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.1);border-radius:4px}
.post-pager>div.prev::after{content:"";width:1px;height:calc(100% - 10px);background:#ddd;position:absolute;right:0;top:5px}
.post-pager>div.next::before{content:"下一篇"}
@media screen and (max-width:767.5px){.post-pager>div::before{left:0;-webkit-transform:translateX(0);transform:translateX(0)}
}

演示

Typecho上下篇文章预览

就这样吧,不喜欢的话,可以把标题改下标签,直接用<h2>把上下篇输出php包括即可。

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 2 条评论

  1. Eltrac Eltrac说道:

    我 jio 得这个内边距可以调大一点

    1. 枂下 枂下说道:

      上一篇跟下一篇那几个字的内边距是吧,调一下会好一点吧。
      第十行代码的padding值改下就好

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫