【转载】Typecho的handsome主题-栏目列表美化

博主：小屁
发布时间：2021 年 08 月 02 日
2070 次浏览
3 条评论
3548字数
分类：程序解析

在基于handsome主题栏目列表的代码上，为列表中简介部分添加模糊图片背景，效果可查看首页列表。

在开始之前，你可以将下面的粗代码复制另存为html文件查看修改：

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
.li-box{position:relative;z-index:1;display:flex;overflow:hidden;margin-top:50px;margin-right:auto;margin-left:auto;width:800px;background-color:#333;color:#fff}
.left-img{z-index:1;display:flex;margin:0;width:30%;height:190px;-webkit-clip-path:polygon(0 0,95% 0,100% 100%,0 100%);clip-path:polygon(0 0,95% 0,100% 100%,0 100%)}
.left-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:14.5rem;background-position:center;background-size:cover;transform:scale(1.2);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.875rem) brightness(.8);filter:blur(1.875rem) brightness(.8)}
.right-cont{z-index:1;display:flex;width:70%;text-shadow:0 .1875rem .3125rem rgb(0 0 0 / 30%);letter-spacing:.06rem;flex-direction:column;justify-content:space-between}
.right-cont a{color:inherit;text-decoration:none}
    </style>
  </head>
  <body>
    <div class="li-box">
      <a class="left-img" href="#"><img src="https://www.ttker.com/usr/uploads/2021/04/503481875.jpg"/></a>
      <div class="blur-img" style="background-image: url(https://www.ttker.com/usr/uploads/2021/04/503481875.jpg);"></div>
      <div class="right-cont">
        <a class="cont-title" href="#">Cesium - 开源好用的图片压缩软件</a>
        <a class="cont-des">Cesium能将您的图片压缩高达90％，而不会出现明显的质量损失。你可以使用此软件将诸如JPG，JPEG，PNG，BMP或WMF等图片格式，压缩保存为JPG，PNG或BMP。</a>
        <div class="cont-info"><a href="#">其它信息</a></div>
      </div>
    </div>
  </body>
</html>
```

---

**`修改后的使用前提：`** 文章编辑页面中，**文章头图样式选择** 选择**小版式** 。

## 模板代码部分

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

```
<div class="panel-small single-post box-shadow-wrap-normal">
    <div class="index-post-img-small post-feature index-img-small">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy" {$backgroundImageHtml}></div>
        </a>
    </div>
```

替换为：

```
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
    <div class="index-post-img-small post-feature index-img-small tt-left-box">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
        </a>
    </div>
    <div class="tt-blur-img" {$backgroundImageHtml}></div>
```

## CSS部分

设置外观→开发者设置→自定义CSS，填入以下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-bottom: 1px;}}
```

---

参考 **[秦枫鸢梦](https://blog.zwying.com/)** 博客主题 《Cuteen》。

End

本文标题：Typecho的handsome主题-栏目列表美化

本文链接：https://www.ttker.com/archives/20.html

除非另有说明，本作品采用[知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议](http://creativecommons.org/licenses/by-nc-sa/4.0/)。

声明：转载请注明文章来源。

最后修改：2023 年 07 月 04 日