文章面页美化

发布于 2022-02-22  461 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

预览

今天带来的美化是文章列表的美化!先来看看图片展示

美化分为两个部分,一部分是侧栏的颜色线条效果,另一部分就是阅读,评论分类的底色..

第一部分,侧栏颜色

打开sakura主题的inc/decorate.php文件大约 80行代码

.post-list-thumb:nth-child(2n) .post-content-wrap {
    float: left;
    padding-left: 30px;
    padding-right: 0;
    text-align: right;
    margin: 20px 10px 10px 0
}

修改为

.post-list-thumb:nth-child(2n) .post-content-wrap {
    float: left;
    padding-left: 30px;
    padding-right: 0;
    text-align: right;
    margin: 20px 37px 10px 0;
}

把下面的代码复制到你主题下的style.css最底部,或 后台-Sakura主题设置-自定义-额外CSS

 /*側邊條*/
 .post-list-thumb:hover:after {
    height: 100%;
}
.post-list-thumb:after {
    content: ' ';
    width: 4px;
    height: 0;
    position: absolute;
    top: 0;
    background-color: #f27db6;
    box-shadow: 0 0 6px rgb(255 0 0);
    border-radius: 10px;
    transition: 1s all;
}
.post-list-thumb-left:after{
  right: 0;
 left: auto;
}

当中颜色代码可自行修改

第二部分,底色添加

同样下面的代码复制到你主题下的style.css最底部,或 后台-Sakura主题设置-自定义-额外CSS

.post-meta span:nth-child(1) {
        background-color: rgb(0 255 231);/*颜色自己換*/
    padding: 3px 10px 3px 3px; /*尺寸自己換*/
    border-radius: 5px;/*尺寸自己換*/
    }
.post-meta span:nth-child(2) {
    background-color: rgb(255 247 0);/*颜色自己換*/
    padding: 3px 10px 3px 3px;/*尺寸自己換*/
    border-radius: 5px;/*尺寸自己換*/
}
.post-meta span:nth-child(3) {
        background-color:#ebebeb;/*颜色自己換*/
    padding: 3px 10px 3px 3px;/*尺寸自己換*/
    border-radius: 5px;/*尺寸自己換*/
    }       /*1,2,3 分別對應 3個 底色*/

.post-date {
    background-color: rgb(255 207 249 / 85%);
	border-radius: 5px;
}

可根据自己的喜好修改相关颜色代码

发布时间修改

  • 发现sakura的发布时间 大于一个月才会显示正确时间,由于个人喜欢准确的日子
    所以对文章的面页进行了修改…
  • 打开主题的 tpl/content-thumb.php 文件,大约在第35行,代码如下
<i class="iconfont icon-time"></i><?php echo poi_time_since(strtotime($post->post_date_gmt)); ?>

修改为

<i class="iconfont icon-time"></i>发布于 <?php the_time('Y年n月d日 H:i:s'); ?>

文章封面就会显示 年月日时间..或者可以去掉H:i:s

想要加上文章的最后修改时间 就将代码取代为下面代码

					<i class="iconfont icon-time"></i>
发布<?php the_time('Y-n-d'); ?>
<?php if ((get_the_modified_time('Y')*365+get_the_modified_time('z')) >(get_the_time('Y')*365+get_the_time('z'))) { ?>
	<?php echo ',修改' ?><?php the_modified_time('Y-n-d'); ?>
<?php } ?>

注意,个人不建议写上时分秒,会超出框架界限.