西京同城老白极简三栏主题修改备忘录
以下为zblog老白极简三栏主题修改备忘录
（1）移动端点击菜单按钮下拉菜单去掉全屏宽度，宽度改为240px style.min.css
.mainl{display:none;width:240px;position:fixed;top:45px;left:0;right:0;z-index:122;background-color:#fff}.
（2）PC端和移动端同时修改导航菜单栏行高 ，减小行高为36px, style.min.css
.widget_navbar li a{display:block;line-height:36px;text-align:center;font-size:16px;letter-spacing:.5px}
.nav ul ul li a{display:block;line-height:36px;text-align:center;font-size:16px;letter-spacing:.5px;padding:0 30px}
（3）修改移动端文章正文页边距过大，20减小10px, style.min.css
.article_content{padding:10px}
（4）修改文章正文标题页下显示内容，让电脑端显示一些内容在移动端不一样，修改post-single.php文件，加入判断
<div class="info">
{if ydjijian_is_mobile()}
<span><i class="fa fa-navicon"></i><a href="{$article.Category.Url}" title="{$article.Category.Name}">{$article.Category.Name}</a></span>
<span><i class="fa fa-clock-o"></i>{$article.Time('Y-m-d')}</span>
<span><i class="fa fa-eye"></i>{$article.ViewNums}</span>
<span><i class="fa fa-commenting-o"></i>{$article.CommNums}</span>
{else}
<span><i class="fa fa-navicon"></i><a href="{$article.Category.Url}" title="{$article.Category.Name}">{$article.Category.Name}</a></span>
<span><i class="fa fa-user"></i><a href="{$article.Author.Url}">{$article.Author.StaticName}</a></span>
<span><i class="fa fa-clock-o"></i>{$article.Time('Y-m-d H:i')}</span>
<span><i class="fa fa-eye"></i>{$article.ViewNums}</span>
<span><i class="fa fa-commenting-o"></i>{$article.CommNums}</span>
{/if}
</div>
（4）二级菜单划过改为绿色背景style.min.css
.widget_navbar li:hover>a{background-color:#d6623d;color:#fff}.widget_navbar li ul li:hover>a{background-color:#05c160;color:#fff}
（5）菜单加入图标，参考下面网站
https://www.thinkcmf.com/font/font_awesome/icons.html
（6）首页列表页，详情页图片加入圆角效果style.min.css中 border-radius: 4px;
列表页 .cms li .img img{width:100%;height:100%;object-fit:cover;overflow:hidden;transition:all .6s;border-radius: 4px;}
正文页 .article_content img{max-width:100%;height:auto;border-radius: 4px;}
（7）修改移动端文章正文标题下信息栏宽度过大，30减小为10px, style.min.css
.mainc .info{padding:15px 30px;border-bottom:1px dotted #ddd;color:#999;font-size:13px}
@media screen and (max-width: 980px) {.mainc .info{padding:15px 10px;border-bottom:1px dotted #ddd;color:#999;font-size:13px}}
（7）电脑版屏幕宽度小于980px隐藏，去掉980-1380px宽度中间出现横向滚动条，修改头文件header.php
这样虽然不显示右侧栏的，但占的位置还在，还需要修改CSS，自动计算宽度
@media screen and (max-width:1380px){.mainc{float:left;width:calc(100% - 470px);
（8）修改文章正文h3标题样式style.min.css，这里用了一个伪元素，目的是显示箭头，让箭头能内联
.article_content h3{font-size:18px;margin: 10px 0px; font-weight: bold;color:#000000;}
.article_content h3::before{content: "";background: url(images/arrow.png);display: inline-block;background-size:16px 16px;width:16px;height:16px;}
删除掉下面
.mainc h3{color:#150707;background-color:#f7f7f7;font-size:16px;border-left:2px solid #d6623d;font-weight:400;padding-left:40px;height:40px;line-height:40px;margin-left:-2px}
同时需要修改post-single.php文件，这个里面还有两个地方用了h3标签，我们改为h1
<h1>相关文章</h1> <h1>评论区</h1>
（9）移动端列表页显示时间，控制文件post-multi-cms.php，电脑端移动端共用，移动端style.min.css中隐藏，删除下面隐藏代码
.cms li .imgr span.time{float:none;display:none}，修改个样式 .cms li .imgr span{display:inline-block;}
post-multi-cms.php文件中修改下不显示时分秒
<span class="time">{$article.Time('Y-m-d H:i')}</span>
（10）修改首页和列表页文章标题文字，当小于980px时移动端style.min.css
.cms li .imgr h5{height:75px;line-height:25px;white-space:normal;font-size:16px;font-weight:bold;margin-bottom:6px}
（11）去除空搜索问题，头文件加入如下代码
<script>
$(function(){
$(".widget_div form").submit(function(){
if($(this).find("input[type=text]").val().length == 0){
$(this).find("input[type=text]").focus();
return false;
}
});
$(".search form").submit(function(){
if($(this).find("input[type=text]").val().length == 0){
$(this).find("input[type=text]").focus();
return false;
}
});
});
</script>
(13) 浏览器宽度小于980时列表页让 显示一行标题，还有正文。
这个参考了大于980宽度时的默认css，做了局部调整，如高度.
（14）正文页面标题只显示一行问题修改，style.min.css修改如下
.mainc h1{color:#150707;background-color:#f7f7f7;font-size:18px;border-left:2px solid #d6623d;font-weight:400;padding:10px 10px 10px 40px;line-height:150%;margin-left:-2px;text-overflow:ellipsis;overflow:hidden}
修改了padding，去掉设置的高度。当宽度小于980px时，.mainc h1{padding-left:20px;l}
（15）修改移动端头条和列表栏显示，判断宽度小于650px，增加下面样式
@media screen and (max-width:650px){.cms li .imgr h5{height:75px;line-height: 25px;white-space: normal;font-size: 16px;font-weight:bold;margin-bottom: 6px}.cms li .imgr p{display:none;}.cms li .imgr span{font-size:12px;}}
（16）首页和列表蓝标题下显示内容修改post-multi-cms.php
<span><i class="fa fa-folder-o" aria-hidden="true"></i><a href="{$article.Category.Url}" title="{$article.Category.Name}">{$article.Category.Name}</a></span>
<span class="time"><i class="fa fa-eye", aria-hidden="true"></i>{$article.ViewNums}</span>
（17）修改文章正文页面行高，段落距离style.min.css
.article_content{font-size:16px;line-height:170%;word-break:break-all;word-wrap:break-word;padding-bottom:5px;position:relative}
.article_content p{padding:10px 0}.article_content table{font-size:14px;}.article_content table p{padding:2px 0}
（18）行内文字均匀 分布，左右对齐，修改style.min.css
.article_content p{padding:10px 0;text-align: justify;}
（19）默认文章内blockquote去掉引用背景图
.article_content blockquote{margin:10px;border:1px #d0d4c8 dashed;background:#f4f5f6;padding:8px 10px;border-radius:4px;}
（20）正文页面增加了个上下篇文章，修改post-single.php增加如下
<div id="related">
<h1>相近文章</h1>
<div class="related">
<ul>
<li><span><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>{if $article.Prev}{$lang['tpure']['prev']}<a href="{$article.Prev.Url}" class="single-prev">{$article.Prev.Title}</a>{else}<span>没有最新的文章了..</span>{/if}</li>
<li><span><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>{if $article.Next}{$lang['tpure']['next']}<a href="{$article.Next.Url}" class="single-next">{$article.Next.Title}</a>{else}<span>没有最新的文章了..</span>{/if}</li>
</ul>
</div>
</div>
（21）正文相关文章修改显示形式为左标题+右图片，目前改的图片貌似有bug，代码如下，还需要修改样式，让标题自动换行
<div id="related">
<h1>相关文章</h1>
<div class="relatedwang">
<ul>
{foreach GetList(6,$article.Category.ID) as $related}
<li><div class="imgleft" style="width:calc(100% - 170px);float:left"><h5><a href="{$related.Url}" target="_blank" title="{$related.Title}">{$related.Title}</a></h5></div>
<div class="imgright" style="width:160px;height:100px;float:right"><a href="{$related.Url}"><img src="{if $related->Metas->pic}{$related->Metas->pic}{else}{ydjijian_thumbnail($related)}{/if}" alt="{$related.Title}" style="width:160px;"></a></div>
</li>
{/foreach}
</ul>
</div>
</div>
样式修改如下：
.relatedwang ul{list-style:none;}.relatedwang li{display:block;font-size:16px;line-height:180%;padding:0 10px;margin-bottom:8px;height:100px;overflow: hidden;}
（21）文章正文加入目录锚文本，里面li修改行高，ul修改左边margin为0
.article_content li{margin-bottom:0}
.article_content ul{margin:0 10px;list-style:none;}
改为
.article_content ul{margin:0 10px;list-style:disc;}.article_content ol{margin:0 10px;list-style:decimal}
(22)文章搜索结果页西安市月日改为年月日，修改文件post-multi.php
{$article.Time('m-d')}改为{$article.Time('Y-m-d')}
(22)分页显示优化，让直接显示首页、末页、上一页、下一页，修改文件pagebar.php为下面
<a href="{$v}">首页</a>
{elseif $k=='‹‹' and $pagebar.PageNow==$pagebar.PageFirst}
{elseif $k=='››' and $pagebar.PageNow==$pagebar.PageLast}
{elseif $k=='››' and $pagebar.PageNow!=$pagebar.PageLast}
<a href="{$v}">末页</a>
{elseif $k=='‹'}
<a href="{$v}">上一页</a>
{elseif $k=='›'}
<a href="{$v}" class="next">下一页</a>
（23）修改置顶文章显示元素，post-istop-cms.php
<?php echo'404';die();?><li class="list_li">
<div class="img"><a href="{$article.Url}"><img src="{if $article->Metas->pic}{$article->Metas->pic}{else}{ydjijian_thumbnail($article)}{/if}" alt="{$article.Title}"></a>
</div>
<div class="imgr">
<h5><a href="{$article.Url}">{$article.Title}</a></h5>
<p><a href="{$article.Url}">{ydjijian_intro($article,1,160,'...')}</a>
</p>
<span><i class="fa fa-folder-o" aria-hidden="true"></i><a href="{$article.Category.Url}" title="{$article.Category.Name}">{$article.Category.Name}</a></span>
<span class="time">{$article.Time('Y-m-d')}<i>置顶</i></span>
</div>
</li>(24)后台编辑器上传图片撑破编辑器问题，设置宽度最大为90%，编辑此文件即可plugin/UEditor/themes/iframe.css
/*可以在这里添加你自己的css*/
img{max-width:90%;}
（25）后台编辑器标题1，标题2，标题3显示问题，编辑文件plugin/UEditor/lang/zh-cn/zh-cn.js改成如下
去掉了原标题1，避免前台出现多个h1标签，这里后台也让看的清楚明白点
'paragraph':{'p':'段落', 'h1':'标题 1', 'h2':'标题 2', 'h3':'标题 3', 'h4':'标题 4', 'h5':'标题 5', 'h6':'标题 6'},
下面是修改后显示
'paragraph':{'h2':'h2大标题竖线', 'h3':'h3次标题三角形', 'h4':'h4红色圆形标题', 'h5':'h5灰色引用','h6':'标题 6'},
下面是CSS部分修改
.article_content h2{margin-bottom:18px;background-color:#fbfbfb;color:#333;border-left:4px solid #d6623d;padding-left:8px;margin:10px 0;border-top-left-radius:2px;border-bottom-left-radius:2px;font-size:18px;font-weight:bold;line-height:220%;}.article_content h3{font-size:18px;margin: 10px 0px; font-weight: bold;color:#000000;}.article_content h3::before{content: "";background: url(images/arrow.png);display: inline-block;background-size:16px 16px;width:16px;height:16px;}.article_content h4{ margin-top: 20px;width: auto;padding: 2px 20px 3px 20px;line-height: 26px;font-size: 16px;color: #fff;font-weight: 400;display: inline-block;background: #eb4e2f;border-radius: 50px;}.article_content h5{font-size:16px}
版权声明：本文由指尖十年发布，如需转载请注明出处，如有问题可在下面留言。
本站提供的一切软件、教程和内容信息来自网络收集整理，版权争议与本站无关，仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系。
