分享一款自己改进的皮肤“verdant”.

- -！我总觉得我不应该这个样子了，这是个不好的习惯，面对博客，我每周或者每个月都会有审美疲劳，然后又写一个皮肤模板，不停的循环，至今都写了好多好多了，都记不清了，汗...

下面是我这今天审美疲劳写的一个皮肤（注：此皮肤效果需js权限，仅用于加载图片用）

页面效果：

样式文件地址：http://files.cnblogs.com/files/cnsevennight/verdant.css

这里要说的比较在意的就是标题图片这个了，此皮肤里面标题图片是用js加载的，js代码

<script>    
    var posttitle = "";
    if($(".entrylistPosttitle").length!=0)
        posttitle = "entrylistPosttitle";
    if($(".postTitle").length!=0)
        posttitle = "postTitle";
    //循环添加
    $(".c_b_p_desc").each(function(i){
        var ispictures =  $("."+posttitle+" a:eq("+i+")").html();
        var hrefStr = $("."+posttitle+" a:eq("+i+")").attr("href");
        if(ispictures.substring(ispictures.length-1)=="."){//加载文章图片
            var str =hrefStr.substring(hrefStr.lastIndexOf("/")+1,hrefStr.lastIndexOf("."));
            var imgurl ="http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_"+str+".png";/*需修改地方一*/
            $(".c_b_p_desc:eq("+i+")").before('<a href="'+hrefStr+'"><img class="lazy desc_img" style="240px;height:160px;margin-right: 20px;" src="'+imgurl+'" ></a>');
        }else{//加载默认图片
            $(".c_b_p_desc:eq("+i+")").before('<a href="'+hrefStr+'"><img class="lazy desc_img" style="240px;height:160px;margin-right: 20px;" src="http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_7yelogo.png" ></a>');/*需修改地方二*/
        }
    });
</script>

设置步骤：

1、准备一张你要设置当前写博客文章的一张png的图片

2、开始写博客，在写标题时，在末尾添一个 “.”，表示你这篇文章有你自己设置的图片，如下图：

3、写完文章，发布，然后查看这篇文章的url，复制.html之前，最后一个“/”之后，的几位数字来作为你要设置的图片的名称，如：

http://www.cnblogs.com/cnsevennight/p/4326181.html

　　

4、然后上传你的图片到一个你所有博客图片存放在一起的地方，且要url路径不变，只是最后的文件名称变化，例如

http://www.xx.com/11111.png

http://www.xx.com/22222.png

http://www.xx.com/33333.png

最后到了最后设置js的步骤：

复制上面的js

在需要修改的地方一处的地方：

var imgurl ="http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_"+str+".png";/*需修改地方一*/

设置你图片存放的地址，比如我存放的图片就是存放在博客园相册(也可以找其他“七牛”，“又拍”，什么的免费cdn，加载速度快，还免费)，我就改得是这一段

http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_

在需要修改的地方二处的地方：修改假如你其他文章没有设置图片的文章显示的默认图片是什么，这个路径随便填什么都行

最后，把你修改完成的代码，放入后台管理>设置>页脚Html代码，里面，然后保存就OK，打开博客就能看见效果

　　

--------------------------------------------------要结果看上面的就行，这里是详细实现过程---------------------------------------------------------------

这里说一下怎么具体运用到文章中，拿发布一篇文章举例

我这里判断是根据文章标题后面加了一个英文的“ . ” 来判断的那篇文章需要加载指定的图片还是加载默认的图片，见下图

如果判断结果标题末尾是以“ . ”结束的，就取出这篇文章的url（用js取当前博客标题a标签的href，用substring截取到代表文章唯一性的一串数字）如

http://www.cnblogs.com/cnsevennight/p/4326181.html

向上面这个url取出来的就会是 “4326181”，这个就是博客文章图片的名称，所以在存图片的时候，名称就取你当前写的博客的这个url，.html之前的6位数字就行

http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_"+图片名称+".png

js循环当前文章数量，然后根据“.”就添加了所以的博客文章图片

这里图片存放的地方，我存放的是博客园的相册，其他的太麻烦我就没弄了，有兴趣的倒还是可以去弄七牛，又拍什么的免费cdn