CNBLOG 个性化笔记（5）——图片处理、目录

今天的任务是完善一下博客完整展示区。做完这个，在做几个js动态控件，再弄点动画效果，整个博客优化就做的差不多了。

存在的问题

图片拉伸错误、显示不全，和背景搭配起来让人看着眼花。

问题1
偏窄的图片左对齐摆放不好看。

问题3
大段文字区域没有分离设计，看着会很累。

问题2
长博客应该有回到顶部的按钮

解决方法

图片缩放

首先要让图片不要拉伸。主博文区的图片选择器是#main img即一个叫main的元素，它子孙中的img元素。

然后思考一下显示不全的原因。主博文区是宽度有限长度无限的div，所以过长都是因为宽度不够，则将图片缩放为父元素的100%宽度即可。这也会让图片等比例缩小放大，不会让图片拉伸错误。

但是这又会带来一个新的问题，就是偏窄的图片也会自动放大到与父元素等宽，造成图片过大的效果。所以实现起来的话需要根据图片内容来分支处理，这需要用到js脚本。

利用chrome浏览器打开博文界面的源代码，发现其已经自行引用了jQuery，OK。在页首或页尾或侧边栏公告(都可以，因为script脚本是优先执行的)植入以下代码,两个都可以用，我使用的是第二种：

<script tpye="text/javascript">
//网页素材加载完成后再进行
window.onload=function(){
    if($("#main img").width()>$("#main img").parent().width()){
        $("#main img").css("width","90%");
    }
};
//DOM结构加载完成时运行
$(document).ready(function(){
    var cur=$("#main img");
    var par=$("#main img").parent();
    if(cur.width()>par.width()){
        cur.css("width","90%");
    }
});
</script>

图片看着花

图片看着不舒服一种解决方法是给他增加一个比较明显的边框，让它和外面隔开来缓解信息密集，如下样式：

#main img{
  border:5px white solid;
 border-width:5px !important;
  border-radius:2px;
  box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
  box-sizing:content-box;
}

这样做出来的效果是白边框外一个黑边框，还有一个泛光的阴影，至少看着舒服了些。

图片居中

本来呢图片居中一个margin:0 auto;就可以搞定了，但是在这里不管用，为什么呢？因为我们的图片前面处理过大小，如果直接在样式文件里定义的话，浏览器读到这一句时图片还是超大的，于是就把这个auto设置为0了，我去。。在jquery里设置auto也⑧行，一劳永逸的方法是自己手动计算。在上面的内容继续添加：

x=(par.width()-cur.width())/2;
str="5px "+(x+5).toString()+"px "+"5px "+(x-5).toString()+"px";
cur.css("margin",str);

这里动了一点小聪明，左边距其实比右边距大了10px，一是因为主博文区本来就是整个屏幕左边的，而是我之前给图片设置了偏右下的阴影，这样可以图片适当往左移保持图片还在正中的错觉。

完整的script代码如下：

<script tpye="text/javascript">
$(document).ready(function(){
    var cur=$("#main img");
    var par=$("#main img").parent();
    if(cur.width()>par.width()){
        cur.css("width","90%");
    }
   x=(par.width()-cur.width())/2;
    str="5px "+(x+5).toString()+"px "+"5px "+(x-5).toString()+"px";
   cur.css("margin",str);
});
</script>

大段文字处理

这里其实也没什么好说的，预设的段落p元素是margin:10px auto上下距离已经足够了，但是因为没有设定宽度，p会自动铺满导致左右间距为0,手动设左右宽度为8px来对齐大标题。

之后只需要给小标题增加一点样式，带给文章切割开的感觉来减少视觉复杂。

博客中各个小标题的选择器是#cnblogs_post_body hx,x是2，3，4等。一般来说做到h5就可以了。h2设计如下

#cnblogs_post_body h2{
    padding:3px;
    width:100%;
    color:rgb(58,91,131);
    border-bottom:1px rgb(58,91,131) solid;
    border-left:5px rgb(58,91,131) solid;
}
#cnblogs_post_body h2:hover{
    color:white;
    text-shadow:2px 2px 3px #222222;
}

其实也就设了个左下边框还有字阴影。h3和h4类似，只需要换个颜色就是了。我是打开画图，输入大标题的颜色代码找到这一色系。

找颜色

返回顶部按钮

这里引用了这位做好的控件，这是个自动生成文章目录和返回按钮的东西；代码有点长，但其实也就是涉及到了些DOM操作，只不过jquery简化了不少，要是用原生的js程序那量更大；我把它封装到js文件里，然后自己设了一下css。

成果展示

累死我了，随便做一做就做到了快半夜三点，明天还得修论文，就先鸽一波好了……