奇乐网 - 草根博客网站

Typecho文章页面添加notice提醒,文章修改日期

admin 169 0

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

说明
好久没认认真真写文章了,今天给大家分享一个本站一直使用的代码。用于提醒用户当前文章更新日期,以及其他信息,比如:加入Q群等。当然,你也可以写文章最后编辑于几天前。你可以在本站任何文章页面,看到这条提示。如下图所示:
e16838c05ca99054fa38cb7d548f4362.png

post.php
首先,打开主题目录下post.php文件,在适当位置添加如下代码,一般添加在post-content后面(表示文章正文开始的地方)

<p class="notice">
最后更新于<?php echo date('Y年m月d日' , $this->modified);?>;
如遇到问题,请留言及时通知站长;
欢迎加入<i class="iconfont icon-qq"></i>&nbsp;<a href="https://jq.qq.com/?_wv=1027&k=5gp5d2X" target="_blank">三生三世</a>,讨论各种问题!
</p>

625e8ee3b25605a00d361460bb9387e1.png

css
这时,你文章里应该以及可以看到这条提示了。但是,不太美观。那么,请在你的主题css文件中,放入如下代码,即可美化,效果与本站一致!

p.notice{position:relative;padding:.5rem;border:1px dashed #b00;background:#eee}
p.notice::before{position:absolute;top:-.5rem;left:.5rem;z-index:1;padding:0 .3rem;content:"Notice";font-size:.8rem;line-height:1}
p.notice::after{position:absolute;top:-1px;left:.5rem;z-index:0;width:50px;height:6.4px;background:#eee;content:""}

后续说明
当然,文章中的提示,用到的QQ图标是阿里云图标库。请自行更换自己主题的图标。当然,这么好看的样式自然不是自己写的,从别人网站扒的。
代码扒自:imalan

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)

选择表情