在使用新购的z-blog模板时，发现作者预览站另一款风格有如下显示，就觉得很不错，因为之前没有接触过z-blog所以没仔细研究，刚好国庆节有时间就简单的看了下html，然后动手改了下
下面以我目前所用的主题【极致·新闻自媒体资讯】示例：
打开zb_users/theme/Jz52_information/style/style.css
找到普通样式里的.article，并将整段替换为如下样式：
.article {
width: 1120px;
margin: 105px auto 0;
overflow: hidden;
zoom: 1;
}
.article_a {
width: 1120px;
margin: 105px auto 0;
overflow: hidden;
zoom: 1;
display:block;
}
.article_b {
width: 1120px;
margin: 0px auto 0;
overflow: hidden;
zoom: 1;
}.article_a为前段新增的视频大层样式
继续搜索@media only screen and (max-width: 800.1px)在里面找到
.article替换为下方代码：
.article {
margin-top: 20px
}
.article_a {
margin-top: 80px;
width: 100%;
padding: 0 20px;
display:block;
}
.article_b {
margin-top: 0px;
width: 100%;
padding: 0 20px;
}搜索@media only screen and (max-width: 767.9px)在里面找到：
.article, .jzcms {
padding: 0 15px;
}替换为：
.article, .article_a, .article_b, .jzcms {
padding: 0 15px;
}搜索@media only screen and (max-width: 479px)在里面找到
.article替换为下方代码：
.article {
width: 100%;
padding: 0;
margin-top: 60px;
}
.article_a {
width: 100%;
padding: 0;
margin-top: 60px;
display:block;
}
.article_b {
width: 100%;
padding: 0;
margin-top: 0px;
}zb_users/theme/Jz52_information/template找到post-single.php模板文件
替换
<div class="{if $zbp->Config('Jz52_information')->seomb}{$zbp->Config('Jz52_information')->seomb} {/if}article blpost">为如下代码
{if $article.Metas.videoadd}
<style>
.topvi{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}
.topvi{overflow:hidden;background:rgba(255,255,255,.9);margin-bottom:20px;border-radius:2px;-webkit-box-shadow:0 0 10px -2px rgba(158,158,158,.2);box-shadow:0 0 10px -2px rgba(158,158,158,.2)}
.topvi{border-radius:0;margin-bottom:10px}
.topvi{width:1030px;float:right;display:block;overflow:hidden}
@media only screen and (max-width:768.1px){.topvi{width:100%;display:block;overflow:hidden}}
.topvi img{width:100%;height:400px;border-radius:3px;-o-object-fit:cover;object-fit:cover}.vplay{width:44px;height:44px;line-height:45px;position:absolute;top:50%;left:50%;margin:-22px 0 0 -22px;background-color:rgba(21,21,22,.5);color:#fff;font-size:18px;border-radius:100px;text-align:center;-webkit-transition:all .3s;-moz-transition:all .3s ease-out;transition:all .3s ease-out}.r_box li:hover .vplay{opacity:0}.r_box .isvideo{padding:2px 6px;border:0 solid currentColor;font-size:14px;vertical-align:1px;margin-right:5px;display:inline-block;background:#f1404b;color:#fff;border-radius:2px}.topvii{position:relative;height:400px}.topmaximg{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff;text-align:center;background:#222831;background:-o-linear-gradient(top,rgba(6,6,8,0),rgba(6,6,8,.6));background:-webkit-gradient(linear,left top,left bottom,from(rgba(6,6,8,0)),to(rgba(6,6,8,.6)));background:linear-gradient(to bottom,rgba(6,6,8,0),rgba(6,6,8,.6))}.topmaximg a{color:rgba(255,255,255,.8)}.topmaximg h1{font-size:26px;margin:20px 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.topmaximg .bloginfo{border:0;color:rgba(255,255,255,.8);margin:0;padding:0}
.topviv{height:645px}.topviv iframe{height:100%;width:100%}@media only screen and (max-width:768.1px){.topvi img,.topvii{height:300px}.topmaximg h1{font-size:24px}.topviv{height:415px}}@media only screen and (max-width:479px){.topvi img,.topvii{height:200px}.topmaximg{padding:10px;text-align:left}.topmaximg h1{margin:10px 0;font-size:22px}.topviv{height:258px}}@media only screen and (max-width:376px){.topviv{height:203px}}@media only screen and (max-width:321px){.topviv{height:173px}}
</style>
<div class="article_a">
<div class="topvi topviv">{$article.Metas.videoadd}</div>
</div>
<div class="{if $zbp->Config('Jz52_information')->seomb}{$zbp->Config('Jz52_information')->seomb} {/if}article_b blpost">
{else}
<div class="{if $zbp->Config('Jz52_information')->seomb}{$zbp->Config('Jz52_information')->seomb} {/if}article blpost">
{/if}在使用之前记得安装
并且设置文章自定义字段
videoadd
安装自定义字段插件后设置如下：
然后在发布文章时，填写整个视频框架代码即可。
发表评论