最後,我選擇了部落格園

9plus發表於2019-05-26

這是一個最帥的網站,也是一個最low的網站;

這是一個機智的網站,也是一個愚蠢的網站;

這是一篇記錄我為什麼選擇了部落格園並如何調♂教她的文章。看完這篇文章你可以收穫什麼?你會再也不想寫CSS!

前言

最近想找個地方整理一些自己的想法,研究了一些熱門站點,

CSDN

和大多數人一樣,CSDN是我從小白到入門最常逛的網站,兩年前曾在CSDN上持續記過100多篇的leetcode解題思路,堅持了大概1年吧。記得當時參加網易的筆試,考完後把演算法題的解析往部落格上一貼,幾個小時就達到了1w+的訪問量,這是第一次親身體驗什麼叫“蹭熱點”(笑)。後來由於校招結束,演算法題也就沒再刷了。現在再去看看自己的部落格,看看CSDN,感覺CSDN現在的廣告與抄襲還是有點多...

掘金 && 思否

掘金是最近兩年火起來的網站吧,個人感覺掘金的markdown編輯器是眾多部落格網站中最好用的,文章排版也好看,掘金上最多的還是前端開發相關。而思否作為一個國內版的stackoverflow,像我這種面向stackoverflow程式設計的選手對它的好感度是直接拉滿啊,感覺這兩個網站差不多,都作為備選。

知乎

知乎上寫文章倒是中規中矩吧,專欄的訪問量與我當時在CSDN上訪問量增長速度差不多。最難受的一點就是,知乎的markdown編輯器太太太難用了!

自建網站

有人說你這麼挑乾脆自己搞一個網站吧,確實我有搞過,不信你可以訪問下我的個人網站。部署過Hexo,感覺發一篇文章太麻煩了,Gayhub Page訪問太慢。最後自己買了個阿里雲伺服器,又在Gayhub上找個了開源的基於SpringBoot的部落格系統tale,吭哧吭哧的就開搞了,雖然現在一直在伺服器上跑著,訪問者寥寥無幾。

最後選擇了部落格園

還記得第一次開啟部落格園首頁的時候,這90年代的網站吧,這麼low,直接秒關。後來看一些部落格的時候,嗯?這些部落格好炫啊,怎麼都是cnblogs開頭的。

真香,自定義CSS天下第一。

綜合來說,部落格園支援markdown(雖然每次我都是用神器typora寫好然後copy上去),也願意被當成一個圖床,SEO也還行,又是一個大牛雲集十分專業的網站,非常讚的一點就是,廣告居然可以直接通過自定義CSS給隱藏掉,我和我的小夥伴都驚呆了,部落格園不會突然有一天沒錢倒閉了吧?

雖然最後在好馬也吃回頭草的心理下選擇了部落格園,但是調♂教是必不可少的(主要還是改的多,怕忘記?)。

主題選擇

在部落格園後臺的設定->部落格皮膚中可以進行主題的選擇。

親,這裡推薦你這四款皮膚哦:

最後,我選擇了部落格園

這幾款皮膚除了IMetro,都比較符合我的審美。但是我曾有幸見識過某位二次元大佬將IMetro這個主題改的“面目全非”,不過一時找不到它的站點了(逃)。

根據個人部落格主題的不同,頁面定製的CSS程式碼也不一樣。大家可以直接搜尋"部落格園美化",有很多超炫調教。

這裡呢我自己選擇了darkgreentrip。給大家看看對比圖:

左側公告欄(我不是給自己打廣告)

最後,我選擇了部落格園

導航欄

最後,我選擇了部落格園

目錄

最後,我選擇了部落格園

引用

部落格園預設的引用樣式很僵,直接採用大眾接受的這種風格:

最後,我選擇了部落格園

程式碼塊

採用sublime主題:

最後,我選擇了部落格園

評論區

最後,我選擇了部落格園

最後,我選擇了部落格園

定製CSS

部落格園的CSS定製功能其實就是你自定義一個同名樣式去頂掉當前部落格使用的樣式。各個模板由於樣式不同會有一定的區別,但整個html樹都是一致的。需要我們會用F12去除錯。

不得不說,部落格園的這個CSS定製功能真是太棒了。

比如將部落格園的引用改為通用markdown的引用效果,則在頁面定製CSS程式碼中輸入:

.postBody blockquote{
  border: none;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  /*隱去預設的引號圖片*/
  background: none;    
  /*覆蓋預設90%*/
  width: 100%; 
}

通過border-left在左邊畫一條灰色的線即可。

程式碼塊功能採用sublime樣式,這裡需要去highlight.js官網下載相關CSS樣式,國內訪問+下載比較慢。因此呢我把它放在gayhub上,打個廣告,大家需要獲取這個程式碼塊樣式的可以關注我的公眾號:Plus技術棧,回覆部落格園獲取。

如圖,我們只需要這個檔案(當然其他的風格大家可以自己試試)。

最後,我選擇了部落格園

我們將裡面的樣式全部匯入到部落格園中,但是注意一定要在第一行的.hljs前面加上.cnblogs-markdown,不然樣式會失效。例如我的(也放在了gayhub上):

最後,我選擇了部落格園

最後,最最有意思的是,我通過修改廣告的CSS樣式,真的讓整個部落格沒有廣告了。

這是正常的:

最後,我選擇了部落格園

這是我的:

最後,我選擇了部落格園

手動點個贊?。

最後

其實整個頁面元素很多,包括頁首的漂浮著的github飄帶,頁尾的求關注等等樣式我還沒加,尤其針對我這種青銅級別的CSS水平,整個修改花了巨長的時間,所以文末再次向各位讀者朋友求個關注(下次我再更新下超強編輯器VIM的魔改)。關注公眾號Plus技術棧,回覆部落格園獲取整個頁面的樣式程式碼。

相關文章