GitHub風格的自定義博客主題
阿新 • • 發佈:2018-12-28
over 自己 imp lis 頁腳 比較 gre 想想 white
前言
cnblogs提供的默認博客主題讓人感覺很老,就是那種很老很老的很老,讓人回到了網上沖浪的時代,話說那時候我才上小學,那時候還在天天搗鼓著我的樂高積木,想象著在自己搭建的水晶宮裏吃著魚蝦,就在某個充滿著聲嘶力竭的蟬鳴聲的日子裏,老爹突然抱著一臺聯想PC機回家了,我還依稀記得那是一臺配有手寫板的電腦,那時候不會打字,所以就在手寫板上寫字,那些“太囧”的日子現在想想還真是歡樂呢。有點跑題嚴重了,趕緊收一收。
由於博客的默認主題看起來太老舊了,因此我決定要DIY一個看起來Fashion一點的主題。同時,它也不能太Fashion,要有技術博客那種簡潔的風格。史蒂夫·喬布斯曾說:要簡約!所以,我的DIY也要簡約!
正文
想了一個晚上,終於讓我有了一個比較好的idea,那就是,我要GitHub那種的簡約。因此,在瀏覽器F12的幫助下,我終於把我的DIY主題做好了。
首先,我們需要先使用cnblogs提供的BlueSky主題,你可以在設置裏找到它。
其次,把以下的CSS復制到自定義的CSS裏,Done!
#home{ background-color: #f6f8fa!important; } #main{ background-color: unset; } #header{ background-color: #24292e; color: hsla(0,0%,100%,.75); padding-bottom: 11px; padding-top: 11px; z-index: 32; } #navList li a{ background-color: #24292e; } #navList li a:hover{ background-color: #24292e; color: #bcbcbc; } #sideBar{ padding-top: 0px; display: inline-block; background-color: white; box-shadow: 1px 0px 6px #999; margin-left: 3px; } #sidebar_search{ display: none; } #author_profile{ display: none; } #green_channel{ float: left; } #div_digg{ float: right; } #ad_text_under_commentbox, #ad_t2, #opt_under_post, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb{ display: none; } .day{ padding-bottom: 0px; } .dayTitle{ display: none; }
升華
其實還有可以改進的地方,比如頁腳、背景以及評論區,不過我決定先留個坑,以後再做啦!
結語
F12真好用,怎麽有種抄作業的感覺。
GitHub風格的自定義博客主題