還在美化部落格嗎？試試一鍵更換部落格主題吧！

YJLAugus發表於2019-07-22

很多小夥伴是不是對於自己的部落格主題用久了就會產生些許厭煩呢？每個人都會有，也就是貝勃定律。那麼為了解決這樣的問題呢，許多小夥伴就會再次的更改自己的樣式。這樣一來，原來的部落格樣式就會被丟棄，這樣是及其不有好的。第二個原因呢就是不同人群不同的年齡段不同的性格等外界因素，都會對於事物的喜感而不同。為了讓廣大地球同步都能夠愉快的再我的小窩愉快的玩耍，於是這篇文章出生了。

使用前提

已經獲得js許可權，如果還沒有話呢，就需要向官方大大申請了。吶~給你郵箱contact@cnblogs.com。

效果預覽

樣式動態預覽

深夜黑主題：。超級美麗漂亮可愛的小姐姐主題：。闊耐的動漫主題：，或者點選部落格左上角進行預覽。

功能實現

實現思路

本質上講，“皮膚主題更換”就是通過指令碼修改頁面配色、圖片亮度等，因此我們把問題拆開為三部分進行分析：

  • 動態修改頁面配色、圖片亮度
  • 具體的樣式內容
  • 使用 JavaScript 動態修改頁面配色、圖片亮度 。

關鍵程式碼


function switchModelMode(){
    var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(model == '0'){
        document.body.classList.add('model');
        document.cookie = "model=1;path=/"
        console.log('皮膚模式開啟');
    }else{
        document.body.classList.remove('model');
        document.cookie = "model=0;path=/"
        console.log('皮膚模式關閉');
    }
}


(function(){

        var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(model == '0'){
            document.body.classList.remove('model');
        }else if(model == '1'){
            document.body.classList.add('model');
        }
  
})();

利用JS中Element.classList的add()和remove()方法，正好滿足我們的需求，且支援絕大多數瀏覽器(IE10以上支援)
但先別急著寫，在皮膚更改的時，注意一個小的細節還：更改後的這個狀態應被儲存下來一直生效，或持續到本次會話結束，此事我們便可以利用cookie來解決這個問題。

注意到model,接下來的樣式中我們將多次使用它。

具體的樣式

在上面的程式碼中，我們控制了body的class，這是所有頁面元素的祖先元素。更改皮膚模式時候，body的class值含有model，因此在編寫夜間模式的樣式時，在樣式選擇器前加body.night即可，可酌情使用!important，在下面的樣式中，大家可以根據自己的部落格主題的class 或 id 名稱寫樣式。
例如:

//body樣式
body.model{
    background-color: #263238;
    color: #aaa;
}
//class 樣式
body.model .footer {
 
    color: #aaa;
}
//ID 樣式
body.model #footer {
    color: #aaa;
   border: 1px solid #52646d !important;
}

如何在部落格園中使用

  • 樣式可以直接寫在自定義css中，也可以用link標籤引入。
  • 上面的js程式碼可以寫在側邊欄。
  • 呼叫可以是使用按鈕或是連結的方式,即呼叫js方法。例如：
闊耐的動漫主題：<input type="button" value="開啟/關閉ercy模式" onclick="switchModelErcyMode();">。

最後說明

因為時間的原因，很多樣式做的不盡人意，歡迎大家批評指正，後續的樣式我會一點點修改，此文章僅供大家參考，同時也歡迎大家在評論區交流。只要你熟悉css樣式，那麼便可以隨心所欲的寫出你想要得到的任何主題的樣式！
其實這個和夜間模式有異曲同工之妙，思路上是完全一致的。

相關文章