个人博客-7（网站首页制作）

最新推荐文章于 2024-06-06 11:07:13 发布

初夏那片海

最新推荐文章于 2024-06-06 11:07:13 发布

阅读量2.7k

点赞数 1

分类专栏：个人博客项目

本文链接：https://blog.csdn.net/qq_42265394/article/details/114678581

版权

个人博客项目专栏收录该内容

8 篇文章 6 订阅

订阅专栏

声明：该项目是GitHub上的开源项目，本人已购买作者相关课程，仅供个人学习使用。
课程链接：https://www.lanqiao.cn/courses/1367

前面一些实验讲解的都是博客后台管理系统相关内容，这个后台管理系统通常只是网站拥有者去查看和使用，
而博客页面则与此有较大的不同，博客相关页面涉及到的用户操作大多是查看，就是把后台管理系统中添加和编辑的数据通过博客页面呈现给用户，
这些页面更多的偏重于展示功能，包括文章内容、网站信息、文章归类等等信息的查看，相较于后台管理系统来说，博客相关页面的开发和制作在编码逻辑、功能实现上会更简单一些，因为涉及到的操作只是数据查询和数据聚合，
这不代表开发难度就降低了，这些页面往往更加注重页面观感和元素设计，如果用户觉得第一眼之后就没有了看下去的欲望也是不行的，但是博客系统也并不需要做的过于绚丽多姿，简洁美观即可。

在博客页面中，首页是最先被用户浏览到，这个页面也是非常重要的入口.

顶部导航栏：可以放置 Logo 图片、博客系统名称、其它页面的名称及跳转链接等信息；
搜索框：实现文章搜索功能；
文章列表：用于展示文章列表，显示文章的概览信息；
博客统计：根据发布时间、点击次数等维度筛选出的博客列表；
标签统计：筛选出使用频次高的标签或者分类数据；
分页导航：放置分页按钮，用于分页跳转功能；
页脚区域：放置博客的基本信息

基础布局

基础布局包括以下四个部分：

顶部导航栏区域：这个区域处于页面顶部或者左侧区域且占用页面的面积较小，用于放置 Logo 图、系统名称、其它页面的名称及跳转链接等导航信息用于实现页面跳转的管理。
侧边工具栏区域：这个区域中包括搜索框、博客统计、标签统计等信息，会展示一些数据但并不是最主要的部分，甚至有很多博客系统中并不会有侧边工具栏区域，该区域会被文章列表区所占用。
文章列表区域：这个区域会占用整个版面的大部分面积，包括前文中提到的文章列表和分页导航，因此是整个系统最重要的部分。
底部页脚区域：这个区域占用的面积较小，通常会在整个版面的底部一小部分区域，用来展示辅助信息，如版权信息、系统信息、项目版本号等等，不过这个区域并不是必须的。

在这里插入图片描述

顶部导航栏

header.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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="http://www.thymeleaf.org">
<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="#">&laquo;</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="#">&raquo;</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="http://www.thymeleaf.org">
<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>

初夏那片海

关注

1
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
个人博客-7（网站首页制作）

前面一些实验讲解的都是博客后台管理系统相关内容，这个后台管理系统通常只是网站拥有者去查看和使用，而博客页面则与此有较大的不同，博客相关页面涉及到的用户操作大多是查看，就是把后台管理系统中添加和编辑的数据通过博客页面呈现给用户，这些页面更多的偏重于展示功能，包括文章内容、网站信息、文章归类等等信息的查看，相较于后台管理系统来说，博客相关页面的开发和制作在编码逻辑、功能实现上会更简单一些，因为涉及到的操作只是数据查询和数据聚合，这不代表开发难度就降低了，这些页面往往更加注重页面观感和元素设计，如果用户觉得第一眼
复制链接

扫一扫

专栏目录