之前我們做了一個首頁衫樊，那是面向管理員和博客作者的飒赃，是后臺首頁，我們還需要一個前臺首頁，即博客首頁來給普通用戶進行文章的瀏覽盒揉，或者文章評論晋被，一般評論還需要用戶進行登錄。我們先來完成博客首頁刚盈。
1、設計布局
博客首頁布局有很多種挂脑，自己設計或者參考別的博客設計都行藕漱，這里我們采用一個常見的簡單布局。
2崭闲、添加頁面
測試
這里筆者就不再分組件了肋联，因為現(xiàn)在這種前端代碼編寫方式，不好自定義Vue組件刁俭，做iframe又不友好橄仍，所以這里就將首頁所有內(nèi)容寫到這一個頁面里面。
3牍戚、添加文章分類導航
我們先添加一個后臺請求侮繁，用來返回文章分類樹
接下來我們寫頁面，理論上我們的分類是支持無限層級如孝，前端我們應該使用遞歸的方式以支持任意層級宪哩，但必須用到vue組件封裝，或者使用freemarker自定義遞歸函數(shù)第晰，比較麻煩锁孟，我們的重點不在這，所以這里我們最多只顯示3個層級茁瘦，即寫死層級品抽。一般情況下，目錄導航也不會太深甜熔。
另外博客上面的分類導航理論上其實也是屬于菜單的一種圆恤，我們可以在菜單上加上一個類型屬性，不同類型的菜單用在不同的地方纺非。這樣更加靈活哑了，我想顯示哪些分類，我配置相應的菜單項即可烧颖。這里我們暫時先不做修改弱左，將所有分類進行顯示。
頁面效果
我們再添加一個select事件監(jiān)聽方法炕淮，到時選中一個目錄的時候拆火，跳到對應的文章分類頁面
4、文章列表
頁面效果
我們來添加分頁
頁面效果
然后我們再來完善文章列表內(nèi)容。文章列表頁面们镜，一般都是顯示摘要信息币叹，摘要信息可以是作者自己寫的，也可以是系統(tǒng)根據(jù)文章內(nèi)容自動截取的模狭。如果是自動截取颈抚，這里面有個地方要注意，一般我們的文章內(nèi)容都是富文本嚼鹉，富文本里都是包含html標簽的贩汉，截取的時候，一般我們先去掉html標記再處理锚赤。
文章列表頁面一般還會顯示文章的發(fā)布時間匹舞，文章的作者，文章的分類线脚。
這里我們的作者顯示的id赐稽，這顯然是不合適的。我們可以在前端根據(jù)id去查詢用戶浑侥，但是這樣性能較低姊舵，每篇文章都會發(fā)送一個請求，所以我們還是在后臺先查出來锭吨。
一般來說我們要在實體里面增加一個user屬性蠢莺，設置成@Transient，但是我們Post里面之前有個author屬性零如，author屬性是已經(jīng)廢棄了的躏将，所以我們可以直接使用這個屬性。
文章應該點擊標題能跳到文章詳情頁面考蕾，點擊分類也可以跳到具體的分類頁面祸憋，這里暫時先不處理。
5肖卧、熱門文章
首先我們需要一個屬性來記錄每篇文章的瀏覽量蚯窥，我們在Post里面新增一個Integer的views屬性，給個默認值0塞帐。
然后按照views排序拦赠，取前面10篇文章。
頁面效果
6葵姥、版權信息
版權信息荷鼠，包括博客標題，一般都是后臺可配置的榔幸，這里我們還沒做滚停，暫時占個位。
7痰娱、總結
這節(jié)主要講了怎么做博客首頁，因為我們很多功能都還沒完成蠢笋，如評論，所以這些就還沒做鳞陨。主要還是了解這么個開發(fā)流程吧昨寞。
代碼：
https://github.com/www15119258/springboot-study/tree/branch31
