上次課程我們新建了管理員的模板頁。
本次我們就完善這個模板頁，順便加入樣式和一些基本的組件，配置好整個項目的UI風格。
一、引入 共用的css和js文件
后端庫用nuget, 前端庫用libman.
右鍵wwwroot文件夾，選擇菜單 Add / Client-Side Library
我們使用admin-lte作為前端UI。
輸入admin-lte搜索會自動產生推薦的版本號，如下圖，安裝路徑默認在wwwroot/lib/admin-lte文件夾。
安裝完后，可以看到相應位置已經有了admin-lte相關文件。
並且項目根目錄下會產生 libman.json 配置文件，我們可以直接修改這份配置文件來方便的管理客戶端庫（如新增、刪除庫，修改庫版本號等， 而且vs編輯器也是有智能感知的）。
二、完善 管理員模板頁
打開 Views/Shared/_LayoutAdmin.cshtml
首先引入相應的css和js文件
css放到head里面
js放到body里面。
* jquery和bootstrap在vs模板中已有，我們可以不需要再用libman來管理。
修改整個文檔的結構
我們把文檔分成三部分：標題欄、側邊欄、內容塊。
最后我們用個div把這三個部分都包起來，方便代碼的展開收合。
緊跟着Body后面，結構如下：
下面我們來逐步填充這三部分
官方網站 https://adminlte.io/ 給出了示例代碼，我們直接從示例代碼中粘貼修改即可快速完成前端展示頁面的樣式。
1、標題欄
由於Admin-LTE標題欄會用到一些第三方圖標，打開地址https://fontawesome.com/ 下載。
（如果網站打不開，也可以搜索fontawesome-free從其他網站下載）
我們在wwwroot/lib/admin-lte下新建個plugins文件夾，專門用來存放這些組件。
添加相關引用
我們加兩個鏈接，導航到新建項目默認生成的兩個視圖上，最終的標題欄代碼：
2、側邊欄
分兩部分，LOGO和側邊欄菜單，如下：
代碼：
3、內容塊
最后是內容塊。
三、使用管理員模板頁
1、新建View使用模板頁
打開 Controllers/HomeController.cs文件，增加一個action及相應的view
增加action
右鍵方法名，增加view，
2、運行查看並微調
我們再來調整兩個小問題：
如果將側邊欄折疊起來，側邊欄會完全消失，如下圖：
我們需要給一個寬度，這樣可以看到菜單的圖標。做法很簡單，直接在body中應用 class="sidebar-mini"，折疊起來的效果如下。
另外，我們再增加一個底部欄，放一些版權信息啥的。最終的代碼結構如下：
最終效果圖
總結
本次教程我們完成了UI模板的修改。 注意兩點：
1、學會使用libman來管理前端庫。
2、熟悉前端UI框架admin-lte的基本結構，並熟練修改。對前端不熟悉的同學來說，熟練使用一套成熟的UI框架能節約不少時間。
祝大家學習進步 ：）