分享一款本身改進的皮膚「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>

設置步驟：

一、準備一張你要設置當前寫博客文章的一張png的圖片

二、開始寫博客，在寫標題時，在末尾添一個 「.」，表示你這篇文章有你本身設置的圖片，以下圖：

三、寫完文章，發佈，而後查看這篇文章的url，複製.html以前，最後一個「/」以後，的幾位數字來做爲你要設置的圖片的名稱，如：

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

　　

四、而後上傳你的圖片到一個你全部博客圖片存放在一塊兒的地方，且要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