Kisen - 美化
type: channel
link: https://blog.kisenhz.cn/tag/%E7%BE%8E%E5%8C%96/
items: handsome主题 美化

handsome主题 美化
type: item
date: 2024-07-15T16:34:00+08:00
description: [collapse title="小版图模式下列表美化(小图斜切效果" status="false"]注意该效果仅仅在小版图的模式下才有效果首先我们找到网站根目录/usr/themes/handsome/libs/Content.php将 替换为 然后继续在 /usr/themes/handsome/libs/Content.php 找到下面的信息//页脚部分，显示评论数、作者等信息 $html .= <<<EOF {$parameterArray['author']} {$dateString} 替换为//页脚部分，显示评论数、作者等信息 $html .= <<<EOF {$parameterArray['author']} {$dateString} 并在自定义CSS里面添加以下代码/* 头图显示斜切样式 */ .tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;color:#fff;} .tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);} .tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;} .tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);} .tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;} .tt-small-blur .text-title{color:inherit;} .tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;} .tt-small-blur .text-muted{color:inherit;} .tt-small-blur .post-meta {padding: 30px 30px 15px 30px;} @media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}} @media (max-width:500px){.tt-small-blur .summary{display:none;}} @media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}} @media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bot…