之前我們做了一個首頁，那是面向管理員和博客作者的，是后臺首頁，我們還需要一個前臺首頁，即博客首頁來給普通用戶進(jìn)行文章的瀏覽，或者文章評論，一般評論還需要用戶進(jìn)行登錄。我們先來完成博客首頁。

1、設(shè)計布局

博客首頁布局有很多種，自己設(shè)計或者參考別的博客設(shè)計都行，這里我們采用一個常見的簡單布局。

2、添加頁面

測試

這里筆者就不再分組件了，因?yàn)楝F(xiàn)在這種前端代碼編寫方式，不好自定義Vue組件，做iframe又不友好，所以這里就將首頁所有內(nèi)容寫到這一個頁面里面。

3、添加文章分類導(dǎo)航

我們先添加一個后臺請求，用來返回文章分類樹

接下來我們寫頁面，理論上我們的分類是支持無限層級，前端我們應(yīng)該使用遞歸的方式以支持任意層級，但必須用到vue組件封裝，或者使用freemarker自定義遞歸函數(shù)，比較麻煩，我們的重點(diǎn)不在這，所以這里我們最多只顯示3個層級，即寫死層級。一般情況下，目錄導(dǎo)航也不會太深。

另外博客上面的分類導(dǎo)航理論上其實(shí)也是屬于菜單的一種，我們可以在菜單上加上一個類型屬性，不同類型的菜單用在不同的地方。這樣更加靈活，我想顯示哪些分類，我配置相應(yīng)的菜單項(xiàng)即可。這里我們暫時先不做修改，將所有分類進(jìn)行顯示。

頁面效果

我們再添加一個select事件監(jiān)聽方法，到時選中一個目錄的時候，跳到對應(yīng)的文章分類頁面

4、文章列表

頁面效果

我們來添加分頁

頁面效果

然后我們再來完善文章列表內(nèi)容。文章列表頁面，一般都是顯示摘要信息，摘要信息可以是作者自己寫的，也可以是系統(tǒng)根據(jù)文章內(nèi)容自動截取的。如果是自動截取，這里面有個地方要注意，一般我們的文章內(nèi)容都是富文本，富文本里都是包含html標(biāo)簽的，截取的時候，一般我們先去掉html標(biāo)記再處理。

文章列表頁面一般還會顯示文章的發(fā)布時間，文章的作者，文章的分類。