声明：该项目是GitHub上的开源项目，本人已购买作者相关课程，仅供个人学习使用。
课程链接：/courses/1367
前面一些实验讲解的都是博客后台管理系统相关内容，这个后台管理系统通常只是网站拥有者去查看和使用，而博客页面则与此有较大的不同，博客相关页面涉及到的用户操作大多是查看，就是把后台管理系统中添加和编辑的数据通过博客页面呈现给用户，这些页面更多的偏重于展示功能，包括文章内容、网站信息、文章归类等等信息的查看，相较于后台管理系统来说，博客相关页面的开发和制作在编码逻辑、功能实现上会更简单一些，因为涉及到的操作只是数据查询和数据聚合，这不代表开发难度就降低了，这些页面往往更加注重页面观感和元素设计，如果用户觉得第一眼之后就没有了看下去的欲望也是不行的，但是博客系统也并不需要做的过于绚丽多姿，简洁美观即可。
在博客页面中，首页是最先被用户浏览到，这个页面也是非常重要的入口.
顶部导航栏：可以放置 Logo 图片、博客系统名称、其它页面的名称及跳转链接等信息；搜索框：实现文章搜索功能；文章列表：用于展示文章列表，显示文章的概览信息；博客统计：根据发布时间、点击次数等维度筛选出的博客列表；标签统计：筛选出使用频次高的标签或者分类数据；分页导航：放置分页按钮，用于分页跳转功能；页脚区域：放置博客的基本信息
基础布局
基础布局包括以下四个部分：
顶部导航栏区域：这个区域处于页面顶部或者左侧区域且占用页面的面积较小，用于放置 Logo 图、系统名称、其它页面的名称及跳转链接等导航信息用于实现页面跳转的管理。侧边工具栏区域：这个区域中包括搜索框、博客统计、标签统计等信息，会展示一些数据但并不是最主要的部分，甚至有很多博客系统中并不会有侧边工具栏区域，该区域会被文章列表区所占用。文章列表区域：这个区域会占用整个版面的大部分面积，包括前文中提到的文章列表和分页导航，因此是整个系统最重要的部分。底部页脚区域：这个区域占用的面积较小，通常会在整个版面的底部一小部分区域，用来展示辅助信息，如版权信息、系统信息、项目版本号等等，不过这个区域并不是必须的。
顶部导航栏
header.html
<!DOCTYPE html><html lang="en" xmlns:th=""><head th:fragment="head-fragment"><meta charset="utf-8"><title>主页</title><meta name="viewport" content="width=device-width"><!-- Bootstrap styles --><link rel="stylesheet" th:href="@{/blog/dist/css/bootstrap.min.css}"><!-- Font-Awesome --><link rel="stylesheet" th:href="@{/blog/dist/css/font-awesome/css/font-awesome.min.css}"><!-- Styles --><link rel="stylesheet" th:href="@{/blog/dist/css/style.css}" id="theme-styles"><!--[if lt IE 9]><script th:src="@{/blog/dist/js/respond.js}"></script><![endif]--></head><header th:fragment="header-fragment"><div class="widewrapper masthead"><div class="container"><a th:href="@{/index}" id="logo"><img th:src="@{/blog/dist/img/logo.png}" class="logo-img" alt="my personal blog"></a><div id="mobile-nav-toggle" class="pull-right"><a href="#" data-toggle="collapse" data-target=".clean-nav .navbar-collapse"><i class="fa fa-bars"></i></a></div><nav class="pull-right clean-nav"><div class="collapse navbar-collapse"><ul class="nav nav-pills navbar-nav"><li><a th:href="@{/index}">主页</a></li><li><a th:href="@{/link}">友链</a></li><li><a th:href="@{/about}">关于</a></li></ul></div></nav></div></div><div class="widewrapper subheader"><div class="container"><div class="clean-breadcrumb"><!--<th:block th:text="${pageName}"></th:block>--></div><div class="clean-searchbox"><form method="get" accept-charset="utf-8"><input class="searchfield" id="searchbox" type="text" placeholder=" 搜索"><button class="searchbutton" id="searchbutton"><i class="fa fa-search"></i></button></form></div></div></div></header><!-- /.header --></html>
主题内容及侧边栏
index.html
<!DOCTYPE html><html lang="en" xmlns:th=""><head th:replace="blog/header::head-fragment"></head><body><header th:replace="blog/header::header-fragment"></header><div class="widewrapper main"><div class="container"><div class="row"><div class="col-md-8 blog-main"><div class="col-md-6 col-sm-6 blog-main-card "><article class=" blog-summary"><header><img th:src="@{/blog/dist/img/photo1.png}" alt=""><h3><a href="##">第14课：SweetAlert 插件整合及搜索功能实现</a></h3></header></article></div><div class="col-md-6 col-sm-6 blog-main-card "><article class="blog-summary"><header><img th:src="@{/blog/dist/img/photo2.png}" alt=""><h3><a href="##">第13课：富文本信息管理模块</a></h3></header></article></div><div class="col-md-6 col-sm-6 blog-main-card "><article class="blog-summary"><header><img th:src="@{/blog/dist/img/photo1.png}" alt=""><h3><a href="##">第12课：文件导入导出功能</a></h3></header></article></div><div class="col-md-6 col-sm-6 blog-main-card "><article class="blog-summary"><header><img th:src="@{/blog/dist/img/photo1.png}" alt=""><h3><a href="##">第11课：多图上传与大文件分片上传、断点续传</a></h3></header></article></div><div class="col-md-6 col-sm-6 blog-main-card "><article class="blog-summary"><header><img th:src="@{/blog/dist/img/photo1.png}" alt=""><h3><a href="##">第10课：图片管理模块</a></h3></header></article></div><div class="col-md-6 col-sm-6 blog-main-card "><article class=" blog-summary"><header><img th:src="@{/blog/dist/img/photo2.png}" alt=""><h3><a href="##">第09课：弹框组件整合——完善添加和修改功能</a></h3></header></article></div><div class="col-md-6 col-sm-6 blog-main-card "><article class="blog-summary"><header><img th:src="@{/blog/dist/img/photo1.png}" alt=""><h3><a href="##">第09课：弹框组件整合——完善添加和修改功能</a></h3></header></article></div><div class="col-md-6 col-sm-6 blog-main-card "><article class=" blog-summary"><header><img th:src="@{/blog/dist/img/photo1.png}" alt=""><h3><a href="##">第09课：弹框组件整合——完善添加和修改功能</a></h3></header></article></div><ul class="blog-pagination"><li><a href="#">«</a></li><li class="active"><a href="#"> 1 </a></li><li class="disabled"><a href="#"> 2 </a></li><li><a href="#"> 3 </a></li><li><a href="#"> 4 </a></li><li><a href="#"> 5 </a></li><li><a href="#">»</a></li></ul></div><aside class="col-md-4 blog-aside"><div class="aside-widget"><header><h3>点击最多</h3></header><div class="body"><ul class="clean-list"><li><a href="">关于personal-blog</a></li><li><a href="">关于personal-blog</a></li><li><a href="">关于personal-blog</a></li><li><a href="">关于personal-blog</a></li><li><a href="">关于personal-blog</a></li></ul></div></div><div class="aside-widget"><header><h3>最新发布</h3></header><div class="body"><ul class="clean-list"><li><a href="">SpringBoot</a></li><li><a href="">SpringBoot</a></li><li><a href="">SpringBoot</a></li><li><a href="">SpringBoot</a></li><li><a href="">SpringBoot</a></li><li><a href="">SpringBoot</a></li></ul></div></div><div class="aside-widget"><header><h3>标签栏</h3></header><div class="body clearfix"><ul class="tags"><li><a href="#">HTML5</a></li><li><a href="#">CSS3</a></li><li><a href="#">COMPONENTS</a></li><li><a href="#">TEMPLATE</a></li><li><a href="#">PLUGIN</a></li><li><a href="#">BOOTSTRAP</a></li><li><a href="#">TUTORIAL</a></li><li><a href="#">UI/UX</a></li></ul></div></div></aside></div></div></div><!-- 引入页脚footer-fragment --><footer th:replace="blog/footer::footer-fragment"></footer><script th:src="@{/blog/js/jquery.min.js}"></script><script th:src="@{/blog/js/bootstrap.min.js}"></script><script th:src="@{/blog/js/modernizr.js}"></script></body></html>
底部页脚
footer.html
<!DOCTYPE html><html lang="en" xmlns:th=""><footer th:fragment="footer-fragment"><div class="widewrapper footer"><div class="container"><div class="row"><div class="col-md-3 footer-widget"><h3><i class="fa fa-user"></i>About</h3><p>your singal blog.</p></div><div class="col-md-3 footer-widget"><h3><i class="fa fa-info-circle"></i>ICP</h3><p>浙ICP备 xxxxxx-x号</p></div><div class="col-md-3 footer-widget"><h3><i class="fa fa-copyright"></i>Copy Right</h3><p>xxxxxx</p></div><div class="col-md-3 footer-widget"><h3><i class="fa fa-arrow-circle-o-up"></i>Powered By</h3><p>xxxxxx</p></div></div></div></div></footer></html>
