一、博客系统进度回顾
目前已经完成了，前台展示，以及后台发布的功能，最近都在做这个，其实我在国庆的时候就可以弄完的，但是每天自己弄，突然最后国庆2天，连电脑都不想碰，所以就一直拖着，上一篇写了前端实现用到的一些WebUI框架以及一些系统中用到的js插件，其实写了这么久，还是第一次，有人留言，不要烂尾的，感觉还是有点点价值的，至少有人关注。
废话不多说，现在开始上代码。
二、博客系统后台布局实现
2.1.这里所用的是MVC的布局页来实现的，后台主要分为三部分：导航、菜单、主要内容
代码实现：
这里把后台单独放在一个区域里面，所以我这里建立一个admin的区域
在布局页_Layout.cshtml引入公共的一些css文件以及js文件
布局页代码_Layout.cshtml：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>@ViewBag.Title - 博客系统后台管理</title> 7 <link href="~/Content/CSS/zui.css" rel="stylesheet" /> 8 <link href="~/Content/CSS/zui-theme.css" rel="stylesheet" /> 9 <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 10 <link href="~/Content/lib/metisMenu/metisMenu.css" rel="stylesheet" /> 11 <link href="~/Content/CSS/index.css" rel="stylesheet" /> 12 @RenderSection("stylesheet", required: false) 13 <script src="~/Content/JS/jquery-1.12.4.min.js"></script> 14 <script src="~/Content/JS/zui.js"></script> 15 <script src="~/Content/lib/metisMenu/metisMenu.js"></script> 16 <script src="~/Content/JS/index.js"></script> 17 18 <!--[if lt IE 9]> 19 <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> 20 <script src="http://libs.useso.com/js/respond.js/1.4.2/respond.min.js"></script> 21 <script src="lib/ieonly/excanvas.js"></script> 22 <![endif]--> 23 24 </head> 25 <body> 26 <!--header--> 27 <header> 28 <div class="navbar navbar-inverse " role="navigation"> 29 <div class="navbar-header"> 30 <!--移动设备上的导航切换按钮--> 31 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example"> 32 <span class="sr-only">切换导航</span> 33 <span class="icon-bar"></span> 34 <span class="icon-bar"></span> 35 <span class="icon-bar"></span> 36 </button> 37 <!--品牌名称或logo--> 38 <a class="navbar-brand">系统后台</a> 39 </div> 40 <div class="collapse navbar-collapse navbar-collapse-example"> 41 <ul class="nav navbar-nav navbar-right"> 42 <li><a><i class="icon icon-user"></i> 您好，admin</a></li> 43 <li><a><i class="icon icon-exchange"></i> 隐藏菜单</a></li> 44 <li><a href="/admin/Home"><i class="icon icon-home"></i> 首页</a></li> 45 <li><a><i class="icon icon-question-sign"></i> 帮助</a></li> 46 <li><a><i class="icon icon-off"></i> 退出</a></li> 47 </ul> 48 </div> 49 </div> 50 </header> 51 <!--header end--> 52 <!--content--> 53 <div class="clearfix"> 54 @Html.Partial("_sidebar") 55 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 rightmain"> 56 <div class="col-sm-12 col-md-12 rightcontent"> 57 @RenderBody() 58 </div> 59 </div> 60 </div> 61 <!--content end--> 62 <!--footer--> 63 <footer class="col-md-12 footer footerstyle"> 64 <p>© @DateTime.Now.Year - 我的博客系统</p> 65 </footer> 66 <!--footer end--> 67 68 <script src="~/Scripts/jquery.validate.js"></script> 69 <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 70 <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 71 @RenderSection("scripts", required: false) 72 </body> 73 </html>