大前端 D5 主题首页标题前显示图片

最近，80后生活博客从大前端D4升级到了D5主题 ，升级后发现首页之前的特色图片消失了，取而代之的是评论数和浏览数。个人不是很喜欢，博客的首页我觉得还是有图片显示会比较好，废话少说，接下来就说下大前端D5主题首页添加显示特色图片方法：

1、将D5目录下的INDEX.PHP文件修改，替换excerpt-num样式中的内容，注意不能直接通过后台修改，需要下载了用专业的工具进行修改：文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

<li>
<?php dm_the_thumbnail(); ?>
<h2>
<?php if( is_sticky() ) echo '<strong>[置顶]</strong>'; ?><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</h2>
<div>
<span><?php the_time('m-d');?></span>
<span><?php comments_number('0条评论', '1条评论', '%条评论'); ?></span>
<span><?php dtheme_views(); ?></span>
</div>
<div>
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 160, '…'); ?>
</div>
</li>文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

第二步：在后台－编辑中找到functions.php这个文件，添加缩略图获取和访问量代码；文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

//缩略图获取
function dm_the_thumbnail() {    global $post;   if ( has_post_thumbnail() ) {   echo '<a href="'.get_permalink().'">';   $domsxe = simplexml_load_string(get_the_post_thumbnail());   $thumbnailsrc = $domsxe->attributes()->src;   echo '<img src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" />';   echo '</a>';   } else {   $content = $post->post_content;   preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);   $n = count($strResult[1]);   $random = mt_rand(1, 20);   if($n > 0){   echo '<a href="'.get_permalink().'"><img src="'.$strResult[1][0].'" alt="'.get_the_title().'" title="'.get_the_title().'"/></a>';   }else {   echo '<a href="'.get_permalink().'"><img src="'.get_bloginfo('template_url').'/img/random/tb'.$random.'.jpg" alt="'.get_the_title().'" title="'.get_the_title().'"/></a>';       }     }  }文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

//访问量 function dtheme_views(){ if(function_exists(‘the_views’)) the_views(); }文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

第三步：后台－编辑style.css，将如下代码添加到样式表最底部；文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

/* excerpt */ .excerpt li{padding:20px 0 20px 164px;overflow:hidden;border-bottom:solid 1px #eee} .excerpt .pic{float:left;width:140px;margin-left:-164px;border:solid 1px #ddd;padding:4px;box-shadow:0px 1px 1px #eee} .excerpt .pic img{width:140px;height:98px;display:block} .excerpt .pic:hover{border-color:#ccc;border-bottom-color:#bbb} .excerpt h2{font-size:15px;margin:4px 0 12px;height:18px;overflow:hidden} .excerpt h2 strong{color:#8CAC52;margin-right:10px} .excerpt .note{color:#777;line-height:20px} .info{margin-bottom:8px} .info,.info a{color:#777} .info a:hover{color:#333;text-decoration:underline} .comm,.view{margin-left:20px;padding-left:20px} .comm{background-position:-118px -76px} .view{background-position:-118px -94px}文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

第四步：在D5/IMG下建立 random 文件夹，并在内放置图片，命名为 tb1.jpg ~tb2.jpg~~~如果你难得自己弄，我提供了下载，见下地址：文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

点击进入下载文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html

至此就完成了，和本站的效果一样吧~~~文章源自陈学虎-https://chenxuehu.com/article/2012/06/821.html