基于紫罗兰主题修改，其它主题也可以使用。

本来是想写个鼠标悬停显示摘要的，但是我又要换回nexmoe了就直接弃坑了hhh 预览

紫罗兰用户

如果你是紫罗兰用户，只需要进行以下几步修改就可以了 打开 index.php 找到第 174 行的这段代码删掉即可

<div class="card-body">
P.S把这一块全删掉，由于是收费主题所以就不把具体的贴出来了
</div>

然后连着上面的题图输出整段替换成

<div class="show">
<div class="card d-block"><div class="card-img-bili">
<img style="z-index:100;"class="card-img-top b-lazy" src="<?php echo theurl; ?>img/load.gif" data-url="<?php showThumbnail($this); ?>" alt="<?php $this->title(); ?>">
  <a href="<?php $this->permalink() ?>">
<div class="black"> 
<h1 style="z-index:101; position:absoulte!important;">
<?php $this->title() ?></h1>
  <div align="center">
  <hr>
   <span> <?php $this->date('F j, Y'); ?> </span>
     <span><?php $this->category(','); ?></span>
  <span> <?php $this->author(); ?> </span>
</div>
</div></a> </div></div>

然后加入样式内容

 .black {
 position:absolute;
    height: 100%;
	   z-index:101;
width:100%;
    background-color: rgba(0,0,0,.3);
    color: #fff!important;
    transition: all .3s;
}

.black h1 {
margin-top:25%;
  text-align:center;
  font-size:38px;
}
 #widget-to-top {
z-index:102;
  }
  .show:hover {
	box-shadow:0px 1rem 2rem 0px 	rgb(182,178,188);
	transform:translate(0,-5px);
    transition: all .3s;
}
  .show {
    margin-top:10px;
  }
  .black a {
    color:white;
      font-size:20px;
  }
  .black span {
    text-align:center;
    font-size:20px;
  }
@media screen and (max-width: 1028px) {
.about {
    display: none;
}
}
  @media screen and (max-width: 370px) {
.black a {
    font-size: 13px !important;
}
    .black span {
    font-size: 13px !important;
}
    .black h1 {
      font-size:25px !important;
    }
}
    @media screen and (max-width: 600px) {
          .black h1 {
      font-size:30px;
    }
          .black span {
    font-size: 18px;
}
      .black a {
    font-size: 18px;
}
    }
    @media screen and (max-width: 1400px) {
                .black h1 {
      font-size:35px;
    }
          .black span {
    font-size: 18px;
}
      .black a {
    font-size: 18px;
}
    }
   @media screen and (max-width: 1141px) {
                     .black h1 {
      font-size:30px;
    }
          .black span {
    font-size: 18px;
}
      .black a {
    font-size: 18px;
}
   }
     @media screen and (max-width: 890px) {
          .black span {
    font-size: 15px;
}
      .black a {
    font-size: 15px;
}
   }
       @media screen and (max-width: 830px) {
                              .black h1 {
      font-size:26px;
    }
          .black span {
    font-size: 14px;
}
      .black a {
    font-size: 14px;
}
       }
     @media screen and (max-width: 767px) {
         .black a {
      font-size:20px;
  }
  .black span {
    text-align:center;
    font-size:20px;
  }
  #horizontal-topbar-placeholder {
  	display: block !important;
  }
.black h1 {
  font-size:40px;
}}
  @media screen and (max-width: 470px) {
             .black a {
      font-size:18px;
  }
  .black span {
    text-align:center;
    font-size:18px;
  }
.black h1 {
  font-size:30px;
}}

针对不同的设备字体也是不同的，就是这个实现方法太硬核了hhh

如果你想要预览图中左侧的个人介绍，可以移步到这篇文章侧边栏增加个人介绍

其他用户

其实并没有多复杂，只需要加上泽泽之前写的获取缩略图就可以了

/** 输出文章缩略图 */ 
function showThumbnail($widget)
{ 
    // 当文章无图片时的默认缩略图
    $rand = rand(1,5); // 随机 1-5 张缩略图
    $random = $widget->widget('Widget_Options')->themeUrl . '/img/sj/' . $rand . '.jpg'; // 随机缩略图路径
   // $random = $widget->widget('Widget_Options')->themeUrl . '/img/mr.jpg'; // 若只想要一张默认缩略图请删除本行开头的"//"

    $attach = $widget->attachments(1)->attachment;
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; 
    

if (preg_match_all($pattern, $widget->content, $thumbUrl)) {
         echo $thumbUrl[1][0];
    } else     if ($attach->isImage) {
      echo $attach->url; 
    } else {
        echo $random;
    }
}

大功告成~（又水了一篇