分享一款自己改進的皮膚“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="width: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="width: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