在前面幾篇文章中，我們將構(gòu)建環(huán)境弯囊、所用的技術(shù)和主題結(jié)構(gòu)都準備好了，現(xiàn)在終于可以開始著手開發(fā)自己的主題了胶果。
但在此之前蕊连，我們還要解決一個很棘手的問題载庭，就是設計我們主題的樣式了跋破。對于一個程序員來說簸淀，設計確實算得上是一個難題了，相信大家都有這種感覺毒返。是我們的審美觀不行嗎租幕，No，對于美丑我們還是有最起碼的分辨能力的拧簸，但這是站在一個欣賞者的角度劲绪。如果一旦我們站在了設計者的角度上，事情就不一樣了，否則這世界還要設計師干嘛贾富。但如果你說我恰好是一個全棧設計師歉眷，會設計又會前端開發(fā)，那恭喜你了颤枪，可以無視下面的內(nèi)容了汗捡。
設計是個專業(yè)活
有人總覺得 UI 設計很簡單，就是用 PS 拖下圖層畏纲，又不用畫畫扇住，沒有美術(shù)功底的人都能做。但想將 UI 做好就沒那么簡單了盗胀，里面的門道其實很深的艘蹋。恰好我之前做過一段時間切圖仔，接觸過一些 UI/UX 設計師票灰，與他們溝通后女阀，覺得以前的認知還是有些低級的。就拿下面這張標簽云來說吧米间，你們了解多少呢强品，這還只是 UI 設計里的冰山一角膘侮。
那難道我們做一個自己的博客還要請一個設計師來幫忙設計頁面嗎屈糊？如果你剛好認識一個設計師，又剛好那個設計師愿意幫助你去設計琼了，那你就很爽了逻锐。但事實是，人生沒有那么多碰巧雕薪，只好自己擼一套出來唄昧诱。那我不會呀，怎么辦所袁？學騰訊唄盏档，我們要善于借鑒。
博客說到底也就一個網(wǎng)站燥爷，去看看一些主流內(nèi)容網(wǎng)站的布局是怎么設計的蜈亩，頁面有哪些元素，然后就可以自己構(gòu)思一個出來了前翎。為了方便大家參考稚配，我還特意收集了一些現(xiàn)在比較主流的博客設計，請看大圖：
這些是我構(gòu)建一款主題時參考的一些網(wǎng)站港华，在沒有思路的時候道川，多看一下是沒有錯的。
設計一款博客主題，素材是至關(guān)重要的冒萄，哪怕對于一個設計師來說臊岸。所以我們得知道有哪些優(yōu)秀的網(wǎng)頁設計案例，比如之前很火的 Medium 設計宦言。我這里列出了一些常用的素材網(wǎng)站扇单，可供大家參考：
Ghost官方主題市場：Ghost 官方的主題市場，當然是我們首選的參照品
Themeforest 主題：Themeforest 是國外一個很有名的主題平臺奠旺，里面有各種高質(zhì)量的主題蜘澜，很多設計也非常有代表性，畢竟是拿來賣錢的响疚，如果你比較豪的話鄙信，可以選擇直接購買
Github：Github里面也是有很多開源的 Ghost 主題的，直接搜索 Ghost 就可以忿晕，有一個好處就是可以得到源碼
Unsplash：這個是免費的圖片網(wǎng)站装诡，想做一個高逼格的主題，高質(zhì)量的圖片自然是必不可少的践盼，同類型的還有 pixabay鸦采、pexels
常見博客風格
有了這些資源后，我們就可以慢慢瀏覽下它們的設計風格了咕幻，挑出自己喜歡的渔伯，然后給它們分個類，讓自己的思路更加清晰肄程÷嗪穑可以向我一樣，用看板工具將不同的風格放在一列里蓝厌，便于區(qū)分和整理玄叠。我一般都是按照網(wǎng)頁的布局來分類的，下面歸納了一些常見的博客主題設計風格：
側(cè)欄式風格：
側(cè)邊欄風格的網(wǎng)頁一直到現(xiàn)在還是比較受大家喜歡的拓提。一個比較有創(chuàng)意的側(cè)邊欄設計可以很好地突出我們的博客特色读恃。一般來說側(cè)邊欄就是用來展示的，比如博客封面代态，作者信息寺惫，導航等元素；內(nèi)容區(qū)就專注于博客內(nèi)容本身胆数，對于首頁來說肌蜻，就是一些列表式的文章簡介；對于文章詳情頁面就是文章內(nèi)容了必尼。
兩欄布局的側(cè)邊欄風格蒋搜，各占一半篡撵，有點雜志排版的味道：
更多的風格可參考 35個網(wǎng)頁側(cè)邊欄創(chuàng)意設計欣賞
超級頭版風格：
超級頭版風格最突出的特點就是博客首頁的大banner，通常占據(jù)很大一塊面積豆挽，甚至是全屏育谬，比如我現(xiàn)在的博客風格。關(guān)于這種類型的作品帮哈，在國外的一些博客主題設計中膛檀，是十分常見的，甚至一些商業(yè)化的展示網(wǎng)站都漸漸使用這種類型的設計娘侍。通常一個精心設計的頭版咖刃，會瞬間吸引住瀏覽者的眼球。
關(guān)于超級頭版的設計憾筏，還有很多變種嚎杨。比如用全屏化的 Video 來展示，更能突出我們博客的特點氧腰。參考：瑞士旅游的官網(wǎng)
全屏背景設計風格：
半屏式設計風格：
極簡風格：
極簡風格類似傳統(tǒng)的雜志排版設計枫浙，頁面一般都很干凈，甚至連圖片都沒有古拴。比如 Ghost 最初默認的 Casper 主題箩帚，給人耳目一新的感覺。通常這種風格深受一些技術(shù)類博主的喜愛黄痪，簡潔干練紧帕，直奔主題。
當然它也有個全屏的超級頭版满力，在有些方面焕参，這些設計風格還是相互貫通的轻纪。
上面介紹的這幾種風格差不多囊括了現(xiàn)在的主流設計油额，當然也有一些比較傳統(tǒng)的設計或很超前的設計，這就需要大家自己去慢慢挖掘了刻帚。
博客組件介紹
前面介紹了博客主題設計的風格潦嘶，現(xiàn)在該考慮的就是我們的頁面應該承載哪些元素了。按照目前組件化的思想崇众，網(wǎng)頁里的各種元素都是獨立的組件掂僵，比如：header、footer 等等顷歌。怎么去合理安排這些組件以及常用組件怎么設計是接下來我們要討論的方向锰蓬。
我們可以根據(jù)不同的頁面進行分析，一般來說眯漩，Ghost 主題有兩個很重要的頁面芹扭，index.hbs 和 post.hbs麻顶，其他的還有標簽云頁面、作者頁面等等舱卡，這里我們主要講解前面兩個辅肾。
主頁（index.hbs）
我們先來看一下主頁有哪些組件吧。按照我的主題來進行拆分轮锥，目前有header矫钓、導航、社交icon舍杜、封面新娜、post 列表、分頁區(qū)域既绩、footer杯活、最新文章、博主信息熬词、tag 展示旁钧、友鏈、版權(quán)和備案信息等等互拾。我們可以根據(jù)自己的喜好去組織這些組件并適當取舍歪今。就我參考的這些素材來看，這些組件大致可以分成幾塊區(qū)域：博客信息展示區(qū)域颜矿、post 列表區(qū)域寄猩、footer 區(qū)域
博客信息展示區(qū)域
如果是側(cè)邊欄風格的博客，側(cè)邊欄通称锝可以包含封面田篇、社交icon、導航箍铭、博主信息等等這些展示信息
如果是超級頭版風格的博客泊柬，封面、社交icon诈火、導航兽赁、博主信息等展示元素也可以放在頭版里
post 列表區(qū)域
post 列表區(qū)域最常見的就是卡片風格和列表風格了。通常每個列表項包含文章 title冷守、簡介刀崖、作者、發(fā)布日期拍摇、標簽等信息亮钦。列表的加載方式可以用分頁或無限加載來做，但之前聽產(chǎn)品同學說瀑布流的無限加載并不適合用在內(nèi)容類的網(wǎng)站里面充活，這個就看大家自己的取舍了蜂莉。
列表區(qū)域其實是主頁的一個核心區(qū)域孙咪，通常空間比較大巡语，這里可以做些文章翎蹈，比如放上推薦文章、標簽云男公、作者信息等等荤堪。比如下圖的設計，大家都不陌生吧枢赔。但其實現(xiàn)在很多的設計師都拋棄了這種做法澄阳，他們比較熱衷于 focus content 的理念。
footer 區(qū)域
前面說過 post 列表區(qū)域盡量要做得簡單一些踏拜，那么像推薦文章碎赢、標簽云這些東西放哪呢？footer 區(qū)域是一個不錯的嘗試點速梗。國外很多的博客主題設計開始嘗試了這種做法肮塞。一般分為三列，分別展示 Recent Posts姻锁、Tags 和其他信息
最最最下面的當然是版權(quán)信息和備案信息了枕赵，這是毋庸置疑的吧。
文章詳情頁（post.hbs）
文章詳情頁我們也可以打散成這些組件：header位隶、文章title拷窜、作者信息、發(fā)布日期涧黄、地點篮昧、所屬標簽、文章內(nèi)容笋妥、目錄導航懊昨、社會化分享、評論區(qū)域挽鞠、前一篇和后一篇疚颊、footer狈孔、回到頂部等等信认。
如果我們的主題是公用的 header 和 footer，那這里就只需要考慮文章的內(nèi)容怎么布局了均抽。如果要做差異化的風格嫁赏，可能文章詳情頁從上到下都得重新設計一遍了，比如我現(xiàn)在的主題文章詳情頁與主頁就只共用了 footer 這一小部分油挥。
文章內(nèi)容區(qū)域
文章內(nèi)容區(qū)域最好還是專注于內(nèi)容本身潦蝇，如果要做一些推薦性的東西款熬，可以像這樣設計：
還要注意的就是我們可能需要設計一套良好的 Markdown 樣式，Ghost 是使用 Markdown 標記語言來寫文章的攘乒，可以參考一下 簡書贤牛、segmentfault 等一些使用 Markdown 的網(wǎng)站設計。
如果我們是做一個技術(shù)類的博客则酝，還要考慮一下代碼高亮的功能了殉簸，可以用 highlightjs 等插件來實現(xiàn)。通常大家會忽略一個功能沽讹，就是一鍵復制代碼了般卑，這個是很實用的一個小功能，不要忘了加上爽雄。
TOC
TOC 是 Markdown 里面的自動生成目錄的功能蝠检，但是很多程序里面并沒有支持它，Ghost 也是一樣挚瘟。不過我們可以用其他的方式來實現(xiàn)叹谁，比如 TOC 的 js 插件习寸。有一個目錄的話瀏覽文章就很方便了敲茄，簡直堪稱神器，你是不是也要考慮一下支持了膘婶。
社會化分享和評論
這個通常是跟在文章的結(jié)尾侧漓，當用戶看完后覺得不錯锅尘，可以分享到其他的社交站點；可以在底下留下自己的評論布蔗。社會化分享和評論我們可以用一些第三方的系統(tǒng)來實現(xiàn)藤违，比如暢言，多說（這個已經(jīng)關(guān)閉了）纵揍。
上一篇和下一篇
其實我覺得這個的必要性不是那么大顿乒，但可以增加主題的豐富性。十五言的做法是 footer 就是閱讀下一篇泽谨，占據(jù)整個屏幕的寬度
還有羅磊的這種風格也是很好的
其他
到這里差不多都介紹完了璧榄。還有一些其他的頁面，比如關(guān)于我吧雹、標簽云骨杂、歸檔等等，就不詳細介紹了雄卷。大家可以根據(jù)以上這些內(nèi)容自己設計搓蚪。另外要說的是，像主題色調(diào)丁鹉、字體的設置妒潭、過渡動畫悴能、視差滾動等等設計元素，就需要大家慢慢地摸索了雳灾。
