文章列表html(post_1)
模型文件路径Modules>Templates>Modules>post.php
第27行开始
首先给各项加上title
,浮动提示,不管对seo有没有好处,反正大厂都乐意这么干,我们有样学样就得了。
查找:
//文章列表
$html .= '<li class="post-list-item item-'.$post_style.'" id="item-'.$v['id'].'">
<div class="item-in box b2-radius">
<div class="post-module-thumb" style="padding-top:'.$size['ratio'].'%">
<a '.$open.' href="'.$v['link'].'" rel="nofollow"
class="thumb-link">'.b2_get_img(array('src'=>$thumb,'class'=>array('post-thumb'),'alt'=>$v['title'])).self::get_post_icon($v['id']).'</a>
'.($v['status'] === 'pending' ? '<span class="post-status">'.__('审核中...','b2').'</span>' : ($v['status']
=== 'draft' ? '<span class="post-status">'.__('草稿','b2').'</span>' : '')).'
</div>
<div class="post-info">
<h2><a '.$open.' href="'.$v['link'].'">'.$v['title'].'</a></h2>
'.(in_array('des',$post_meta) ?
'<div class="post-excerpt">
'.$v['des'].'
</div>' :
'').'
'.$meta_html.'
'.$list_footer.'
</div>
</div>
</li>';
修改:
//文章列表
$html .= '<li class="post-list-item item-'.$post_style.'" id="item-'.$v['id'].'">
<div class="item-in box b2-radius">
<div class="post-module-thumb" style="padding-top:'.$size['ratio'].'%">
<a '.$open.' href="'.$v['link'].'" rel="nofollow" class="thumb-link"
title="'.$v['title'].'">'.b2_get_img(array('src'=>$thumb,'class'=>array('post-thumb'),'alt'=>$v['title'])).self::get_post_icon($v['id']).'</a>
'.($v['status'] === 'pending' ? '<span class="post-status">'.__('审核中...','b2').'</span>' : ($v['status']
=== 'draft' ? '<span class="post-status">'.__('草稿','b2').'</span>' : '')).'
</div>
<div class="post-info">
<h2><a '.$open.' href="'.$v['link'].'" title="'.$v['title'].'">'.$v['title'].'</a></h2>
'.(in_array('des',$post_meta) ?
'<div class="post-excerpt">
'.$v['des'].'
</div>' :
'').'
'.$meta_html.'
'.$list_footer.'
</div>
</div>
</li>';
目标:模块标题只显示一行
修改思路:7b2原css设置的多行溢出第二行省略号,且设置了2行的高度,改为第一行省略号,首先修改溢出省略号要显示的行,再调整高度。顺便修改一下字号,感觉16px有点大,改为14px好了
样式文件路径Assets>fontend>style.css
查找:
.post-info h2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: 44px;
margin: 16px 16px 10px;
font-size: 16px;
}
修改:
.post-info h2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
margin: 16px 16px 10px;
font-size: 14px;
}

修改解读:
-webkit-line-clamp
多行溢出:…
注意:-webkit-line-clamp
是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp
用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
延伸:单行文本溢出显示省略号…代码
.css{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
好像看上去太呆板了,那么我们加一点小玩意(鼠标触发效果啦hover)
查找.post-info h2
下面添加:
.post-info h2 a:hover{
color: #d36f16;
}
图片也来一下吧,移动改变透明度opacity
查找:.post-module-thumb
下面添加
.post-module-thumb:hover{
opacity: .85;
}
😊学习了
666666666666
继续学习
👍👍👍牛