SpringBoot 博客开发 个人学习(项目开始和前端页面)

前言

功能点:
在这里插入图片描述
技术组合:

  • 后端:Spring Boot +JPA + thymeleaf模板
  • 数据库: MySQL
  • 前端UI: Semantic UI框架

工具环境:

  • IDEA
  • Maven3
  • JDK8
  • Axure RP 8

1、需求与功能

1.1 需求

角色:普通访客、管理员(我)
在这里插入图片描述
在这里插入图片描述

1.2 功能

在这里插入图片描述

2、页面开发(非重点,可直接跳过看后台部分)

me.css

body {
    background: url("../images/bg.jpg") repeat scroll;
}

.m-padding-tb-mini {
    /* 1em = 14px !important:提升级别*/
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}
.m-padded-tb-massive {
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}
.m-padded-tb-big {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}
.m-padding {
    padding: 0.3em !important;
}
.m-padding-big {
    padding: 3em !important;
}
.padded {
    padding: 1em !important;
}
.padding-lr {
    padding-left: 4em !important;
    padding-right: 4em !important;
}
.m-padding-middle{
    padding: 2em !important;
}
/* margin */
.m-margin-tb-mini {
    margin-top: 0.2em !important; 
    margin-bottom: 0.2em !important;
}
.m-margin-top-small {
    margin-top: 0.5em !important; 
}
.m-margin-top {
    margin-top: 1em !important; 
}
.m-margin-top-big {
    margin-top: 3em !important; 
}
/* 字体 */
.m-text-thin {
    font-weight: 300 !important;
}
.m-text-spaced {
    letter-spacing: 1px !important;
}
.m-text-height {
    line-height: 5 !important;
}
.m-opacity-mini {
    opacity: 0.8 !important;
}
.m-text{
    line-height: 1.8 !important;
    letter-spacing: 1px !important;
    font-weight: 300 !important;
}
/* display */
.m-inline-block {
    display: inline-block;
}
.m-container {
    max-width: 72em !important;
    margin: auto !important;
}
.m-container-small{
    max-width: 60em !important;
    margin: auto !important;
}
/* color */
.m-black {
    color: #333 !important;
}

/* position */
.m-top-right {
    position: absolute;
    top: 0;
    right: 0;
}
.m-mobile-show {
    display: none !important;
}
.m-fixed {
    position: fixed !important;
    z-index: 1;
}
.m-righe-bottom {
    bottom: 0 !important;
    right: 0 !important;
}
/* 阴影 */
.m-shadow-small{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
/* 手机端的时候 */
@media screen and (max-width:768px){
    .m-mobile-hide{
        display: none !important;
    }
    .m-mobile-show {
        display: block !important;
    }
    .padding-lr {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .m-mobile-wide {
        width: 100%;
    }
    .m-margin-bottom {
        margin-top: 0.3em !important;
        margin-bottom: 0.3em !important;
    }
}

===>>前端展示页面

新建文件夹bolg,新建项目目录:
在这里插入图片描述

2.1 首页

首先引用资源:JQ、Semantic UI,使用CDN方式引入

index.html :
在这里插入图片描述
目录结构:
在这里插入图片描述
然后开发首页:
index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padding-tb-mini">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui header teal item">BLOG</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于我</a>
                <div class="right item m-item m-mobile-hide">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <a href="#" class="ui icon button black m-top-right m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!-- 中间内容 -->
    <div class="m-container">
        <div class="ui container m-margin-top-big">
            <div class="ui grid stackable">
                <!-- 左边博客列表 -->
                <div class="eleven wide column">
                    <!-- 头部 -->
                    <div class="ui segment top attached">
                        <div class="ui two column grid middle alinged">
                            <div class="column">
                                <h3 class="ui teal header">博客</h3>
                            </div>
                            <div class="column right aligned"><h3 class="ui orange m-inline-block header m-text-thin">14</h3></div>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <div class="ui attached segment">
                        <div class="ui segment vertical padded m-padded-tb-big">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">标题一</h3>
                                    <p class="m-text">
                                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui link list horizontal mini">
                                                <div class="item">
                                                    <img src="https://fakeimg.pl/100x100/ff0000/"
                                                        class="ui avatar image">
                                                    <div class="content"><a href="#" class="header">zyh</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2021-03-10
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i> 2342
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column right aligned">
                                            <a href="#" target="_blank"
                                                class="ui m-text-thin label teal basic m-padding">认知升级</a>
                                        </div>
                                    </div>
                                </div>


                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="https://fakeimg.pl/800x450/ff0000/" class="ui rounded image">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui segment vertical padded m-padded-tb-big">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">标题一</h3>
                                    <p class="m-text">
                                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui link list horizontal mini">
                                                <div class="item">
                                                    <img src="https://fakeimg.pl/100x100/ff0000/"
                                                        class="ui avatar image">
                                                    <div class="content"><a href="#" class="header">zyh</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2021-03-10
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i> 2342
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column right aligned">
                                            <a href="#" target="_blank"
                                                class="ui m-text-thin label teal basic m-padding">认知升级</a>
                                        </div>
                                    </div>
                                </div>


                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="https://fakeimg.pl/800x450/ff0000/" class="ui rounded image">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui segment vertical padded m-padded-tb-big">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">标题一</h3>
                                    <p class="m-text">
                                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui link list horizontal mini">
                                                <div class="item">
                                                    <img src="https://fakeimg.pl/100x100/ff0000/"
                                                        class="ui avatar image">
                                                    <div class="content"><a href="#" class="header">zyh</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2021-03-10
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i> 2342
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column right aligned">
                                            <a href="#" target="_blank"
                                                class="ui m-text-thin label teal basic m-padding">认知升级</a>
                                        </div>
                                    </div>
                                </div>


                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="https://fakeimg.pl/800x450/ff0000/" class="ui rounded image">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui segment vertical padded m-padded-tb-big">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">标题一</h3>
                                    <p class="m-text">
                                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui link list horizontal mini">
                                                <div class="item">
                                                    <img src="https://fakeimg.pl/100x100/ff0000/"
                                                        class="ui avatar image">
                                                    <div class="content"><a href="#" class="header">zyh</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2021-03-10
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i> 2342
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column right aligned">
                                            <a href="#" target="_blank"
                                                class="ui m-text-thin label teal basic m-padding">认知升级</a>
                                        </div>
                                    </div>
                                </div>


                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="https://fakeimg.pl/800x450/ff0000/" class="ui rounded image">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui segment vertical padded m-padded-tb-big">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">标题一</h3>
                                    <p class="m-text">
                                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui link list horizontal mini">
                                                <div class="item">
                                                    <img src="https://fakeimg.pl/100x100/ff0000/"
                                                        class="ui avatar image">
                                                    <div class="content"><a href="#" class="header">zyh</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2021-03-10
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i> 2342
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column right aligned">
                                            <a href="#" target="_blank"
                                                class="ui m-text-thin label teal basic m-padding">认知升级</a>
                                        </div>
                                    </div>
                                </div>


                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="https://fakeimg.pl/800x450/ff0000/" class="ui rounded image">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui segment vertical padded m-padded-tb-big">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">标题一</h3>
                                    <p class="m-text">
                                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui link list horizontal mini">
                                                <div class="item">
                                                    <img src="https://fakeimg.pl/100x100/ff0000/"
                                                        class="ui avatar image">
                                                    <div class="content"><a href="#" class="header">zyh</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2021-03-10
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i> 2342
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column right aligned">
                                            <a href="#" target="_blank"
                                                class="ui m-text-thin label teal basic m-padding">认知升级</a>
                                        </div>
                                    </div>
                                </div>


                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="https://fakeimg.pl/800x450/ff0000/" class="ui rounded image">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 底部 -->
                    <div class="ui bottom attached segment">
                        <div class="ui two column grid middle alinged">
                            <div class="column">
                                <a href="#" class="ui teal basic button mini">上一页</a>
                            </div>
                            <div class="column right aligned">
                                <a href="#" class="ui teal basic button mini">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右边卡片 -->
                <div class="five wide column">
                    <!-- 分类 -->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="idea icon"></i>分类
                                </div>
                                <div class="column right aligned">
                                    <a href="">more <i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui segment teal">
                            <div class="ui fluid vertical menu">
                                <a href="#" class="item">
                                    学习日志
                                    <div class="ui label teal left pointing">12</div>
                                </a>
                                <a href="#" class="item">
                                    思想与感悟
                                    <div class="ui label teal left pointing">12</div>
                                </a>
                                <a href="#" class="item">
                                    学习日志
                                    <div class="ui label teal left pointing">12</div>
                                </a>
                                <a href="#" class="item">
                                    学习日志
                                    <div class="ui label teal left pointing">12</div>
                                </a>
                                <a href="#" class="item">
                                    学习日志
                                    <div class="ui label teal left pointing">12</div>
                                </a>
                                <a href="#" class="item">
                                    学习日志
                                    <div class="ui label teal left pointing">12</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- 标签 -->
                    <div class="ui segments m-margin-top-big">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="tags icon"></i>标签
                                </div>
                                <div class="column right aligned">
                                    <a href="">more <i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal segment">
                            <a href="#" target="_blank" class="ui label basic teal left pointing m-margin-tb-mini">
                                方法论 <div class="detail">13</div>
                            </a>
                            <a href="#" target="_blank" class="ui label basic teal left pointing m-margin-tb-mini">
                                方法论 <div class="detail">13</div>
                            </a>
                            <a href="#" target="_blank" class="ui label basic teal left pointing m-margin-tb-mini">
                                方法论 <div class="detail">13</div>
                            </a>
                        </div>
                    </div>
                    <!-- 最新推荐 -->
                    <div class="ui segments m-margin-top-big">
                        <div class="ui secondary segment">
                            <i class="bookmark icon"></i>最新推荐
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
                        </div>
                    </div>
                    <!-- 二维码 -->
                    <h4 class="ui horizontal divider header m-margin-top-big">扫码关注我</h4>
                    <div class="ui centered card" style="width: 11em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-margin-top-big">
        <div class="ui container center aligned">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <div class="ui centered card" style="width: 9em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emain:xxxxxxxx</a>
                        <a href="#" class="item">QQ:xxxxxxxx</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
                </div>
            </div>
            <div class="ui inverted section divider">
                <p class="m-text-thin m-text-spaced m-opacity-mini m-text-height">Copyright © 2020 - 2021 ZYH Designed
                    by ZYH</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <script>
        // 通过class控制显示隐藏
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        })
    </script>
</body>

</html>

样子:
在这里插入图片描述

2.2 详情页

blog.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="./static/css/typo.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="./node_modules/animate.css/animate.css">
    <link rel="stylesheet" href="./static/css/prism.css">
    <link rel="stylesheet" href="./static/css/me.css">
    <link rel="stylesheet" href="./node_modules/tocbot/dist/tocbot.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui header teal item">BLOG</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于我</a>
                <div class="right item m-item m-mobile-hide">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <a href="#" class="ui icon button black m-top-right m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!-- 中间内容 -->
    <div id="waypoint" class="m-container-small animate__animated animate__fadeIn">
        <div class="ui container m-margin-top-big">
            <!-- 头部区域 -->
            <div class="ui segment top attached">
                <div class="ui link list horizontal">
                    <div class="item">
                        <img src="https://fakeimg.pl/100x100/ff0000/" class="ui avatar image">
                        <div class="content"><a href="#" class="header">zyh</a></div>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i> 2021-03-10
                    </div>
                    <div class="item">
                        <i class="eye icon"></i> 2342
                    </div>
                </div>
            </div>
            <!-- 图片区域 -->
            <div class="ui segment attached">
                <img src="https://fakeimg.pl/800x450/ff0000/" class="ui fluid rounded image">
            </div>
            <!-- 内容区域 -->
            <div class="ui segment attached m-padding-big ">
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label">原创</div>
                </div>
                <!-- 文章 -->
                <h2 class="ui center aligned header">标题一</h2>
                <div id="content" class="padding-lr m-padded-tb-big typo typo-selection js-toc-content">
                    <pre><code class="language-css">p { color: red }</code></pre>
                    <h1>中文网页重设与排版:<i class="serif">Typo.css</i></h1><br />

                    <h2 id="tagline" class="serif">一致化浏览器排版效果,构建最适合中文阅读的网页排版</h2>

                    <ol id="table">
                        <li><a href="#section1">关于 <i class="serif">Typo.css</i></a></li>
                        <li><a href="#section2">排版实例</a>
                            <ul>
                                <li><a href="#section2-1">例1:论语学而篇第一</a></li>
                                <li><a href="#section2-2">例2:英文排版</a></li>
                            </ul>
                        </li>
                        <li><a href="#section3">附录</a>
                            <ul>
                                <li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></li>
                                <li><a href="#appendix2">开源许可</a></li>
                            </ul>
                        </li>
                    </ol>

                    <h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>

                    <p><i class="serif">Typo.css</i> 的目的是,在一致化浏览器排版效果的同时,构建最适合中文阅读的网页排版。</p>
                    <h4>现状和如何去做:</h4>

                    <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1">#
                附录一</a></sup>,需要精心设计,而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题,但不便变更。因为在多个 OS 中的不同浏览器渲染不同,改动需要多的时间做回归测试,所以改变变得更困难。而像我们一般使用的 Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>

                    <p><strong><i class="serif">Typo.css</i> 测试于如下平台:</strong></p>
                    <table summary="Typo.css 的测试平台列表">
                        <thead>
                            <tr>
                                <th>OS/浏览器</th>
                                <th>Firefox</th>
                                <th>Chrome</th>
                                <th>Safari</th>
                                <th>Opera</th>
                                <th>IE9</th>
                                <th>IE8</th>
                                <th>IE7</th>
                                <th>IE6</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>OS X</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>-</td>
                                <td>-</td>
                                <td>-</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>Win 7</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>Win XP</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>-</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Ubuntu</td>
                                <td></td>
                                <td></td>
                                <td>-</td>
                                <td></td>
                                <td>-</td>
                                <td>-</td>
                                <td>-</td>
                                <td>-</td>
                            </tr>
                        </tbody>
                    </table>

                    <h4>中文排版的重点和难点</h4>

                    <p>在中文排版中,HTML4 的很多标准在语义在都有照顾到。但从视觉效果上,却很难利用单独的 CSS 来实现,像<abbr title="在文字下多加一个点">着重号</abbr>(例:这里<em class="typo-em">强调一下</em>)。在 HTML4 中,专名号标签(<code>&lt;u&gt;</code>)已经被放弃,而 HTML5 被<a href="//html5doctor.com/u-element/">重新提起</a><i class="serif">Typo.css</i>                        也根据实际情况提供相应的方案。我们重要要注意的两点是:
                    </p>
                    <ol>
                        <li>语义:语义对应的用法和样式是否与中文排版一致</li>
                        <li>表现:在各浏览器中的字体、大小和缩放是否如排版预期</li>
                    </ol>
                    <p>对于这些,<i class="serif">Typo.css</i> 排版项目的中文偏重注意点,都添加在附录中,详见:</p>
                    <blockquote>
                        <b>附录一</b><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a>
                    </blockquote>

                    <p>目前已有像百姓网等全面使用 <i class="serif">Typo.css</i> 的项目,测试平台的覆盖,特别是在<abbr title="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台,希望有能力的同学能加入测试行列,或者加入到 <i class="serif">Typo.css</i> 的开发。加入方法:
                        <a href="https://github.com/sofish/Typo.css">参与 <i class="serif">Typo.css</i>
              开发</a>。如有批评、建议和意见,也随时欢迎给在 Github 直接提 <a href="https://github.com/sofish/Typo.css/issues">issues</a>,或给<abbr title="Sofish Lin, author of Typo.css" role="author"></abbr><a href="mailto:sofish@icloud.com">邮件</a></p>


                    <h2 id="section2">二、排版实例:</h2>

                    <p>提供2个排版实例,第一个中文实例来自于来自于<cite class="typo-unique">张燕婴</cite>的《论语》,由于古文排版涉及到的元素比较多,所以采用《论语》中《学而》的第一篇作为排版实例介绍;第2个来自到经典的 Lorem Ipsum,并加入了一些代码和列表等比较具有代表性的排版元素。
                    </p>

                    <h3 id="section2-1">例1:论语学而篇第一</h3>

                    <p>
                        <small><b>作者:</b><abbr title="名丘,字仲尼">孔子</abbr><time>前551年9月28日-前479年4月11日</time></small>
                    </p>

                    <h4>本篇引语</h4>

                    <p>
                        《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章,内容涉及诸多方面。其中重点是「吾日三省吾身」;「节用而爱人,使民以时」;「礼之用,和为贵」以及仁、孝、信等道德范畴。
                    </p>

                    <h4>原文</h4>

                    <p>子曰:「学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知,而不愠,不亦君子乎?」 </p>

                    <h4>译文</h4>

                    <p>孔子说:「学了又时常温习和练习,不是很愉快吗?有志同道合的人从远方来,不是很令人高兴的吗?人家不了解我,我也不怨恨、恼怒,不也是一个有德的君子吗?」 </p>

                    <h4>评析</h4>

                    <p>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高,说它是「入道之门,积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是:学了以后,又时常温习和练习,不也高兴吗等等。三句话,一句一个意思,前后句子也没有什么连贯性。但也有人认为这样解释不符合原义,指出这里的「学」不是指学习,而是指学说或主张;「时」不能解为时常,而是时代或社会的意思,「习」不是温习,而是使用,引申为采用。而且,这三句话不是孤立的,而是前后相互连贯的。这三句的意思是:自己的学说,要是被社会采用了,那就太高兴了;退一步说,要是没有被社会所采用,可是很多朋友赞同
                        <abbr title="张燕婴"></abbr>的学说,纷纷到我这里来讨论问题,我也感到快乐;再退一步说,即使社会不采用,人们也不理解我,我也不怨恨,这样做,不也就是君子吗?(见《齐鲁学刊》1986年第6期文)这种解释可以自圆其说,而且也有一定的道理,供读者在理解本章内容时参考。
                    </p>

                    <p>
                        此外,在对「人不知,而不愠」一句的解释中,也有人认为,「人不知」的后面没有宾语,人家不知道什么呢?当时因为孔子有说话的特定环境,他不需要说出知道什么,别人就可以理解了,却给后人留下一个谜。有人说,这一句是接上一句说的,从远方来的朋友向我求教,我告诉他,他还不懂,我却不怨恨。这样,「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。
                    </p>

                    <p>总之,本章提出以学习为乐事,做到人不知而不愠,反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见,有助于对第一章内容的深入了解。</p>

                    <h3 id="section2-2">例2:英文排版</h3>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
                        passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </p>

                </div>
                <!-- 标签 -->
                <div class="padding-lr">
                    <div class="ui basic teal left pointing label">方法论</div>
                </div>
                <!-- 赞赏 -->
                <div class="ui segment center aligned basic circluar">
                    <button id="payButton" class="ui orange basic button">赞赏</button>
                </div>
                <div class="ui flowing popup transition hidden payQ">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img src="https://fakeimg.pl/120x120/" class="ui image rounded bordered" style="width: 120px;">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="https://fakeimg.pl/120x120/" class="ui image rounded bordered" style="width: 120px;">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 博客信息 -->
            <div class="ui message positive attached">
                <div class="ui grid middle aligned">
                    <div class="eleven wide column">
                        <ui class="list">
                            <li>作者:zyh (联系作者)</li>
                            <li>发表时间:2021-03-11</li>
                            <li>版权声明</li>
                            <li>公众号转载</li>
                        </ui>
                    </div>
                    <div class="five wide column">
                        <img src="https://fakeimg.pl/120x120/" class="ui image right floated rounded bordered" style="width: 120px;">
                    </div>
                </div>
            </div>
            <!-- 留言区域 -->
            <div id="comment-container" class="ui segment bottom attached ">
                <div class="ui teal segment">
                    <div class="ui comments">
                        <h3 class="ui dividing header">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">评论</font>
                            </font>
                        </h3>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://fakeimg.pl/120x120/">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">马特</font>
                                    </font>
                                </a>
                                <div class="metadata">
                                    <span class="date">今天下午 5:42</span>
                                </div>
                                <div class="text">太赞了! </div>
                                <div class="actions">
                                    <a class="reply">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">回复</font>
                                        </font>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://fakeimg.pl/120x120/">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">昨天上午12:30</span>
                                </div>
                                <div class="text">
                                    <p>
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">这对我的研究是非常有用.谢谢!</font>
                                        </font>
                                    </p>
                                </div>
                                <div class="actions">
                                    <a class="reply">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">回复</font>
                                        </font>
                                    </a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://fakeimg.pl/120x120/">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <font style="vertical-align: inherit;">
                                                <font style="vertical-align: inherit;">珍妮·赫斯(Jenny Hess)</font>
                                            </font>
                                        </a>
                                        <div class="metadata">
                                            <span class="date">刚刚</span>
                                        </div>
                                        <div class="text">艾略特你永远是多么正确 :) </div>
                                        <div class="actions">
                                            <a class="reply">
                                                <font style="vertical-align: inherit;">
                                                    <font style="vertical-align: inherit;">回复</font>
                                                </font>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://fakeimg.pl/120x120/">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">乔·亨德森</font>
                                    </font>
                                </a>
                                <div class="metadata">
                                    <span class="date">5 天以前</span>
                                </div>
                                <div class="text">老兄,这太棒了。非常感谢。 </div>
                                <div class="actions">
                                    <a class="reply">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">回复</font>
                                        </font>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui form">
                    <div class="field">
                        <textarea name="content" placeholder="请输入评论信息..."></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom">
                            <div class="ui left icon input ">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="姓名">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom">
                            <div class="ui left icon input ">
                                <i class="mail icon"></i>
                                <input type="text" name="email" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom">
                            <button class="ui button teal m-mobile-wide"><i class="edit icon"></i> 发布</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="toolbar" class="m-fixed m-righe-bottom padded m-margin-top" style="display: none;">
        <div class="ui vertical icon buttons ">
            <button type="button" class="ui button teal toc-btn">目录</button>
            <a href="#comment-container" class="ui teal button">留言</a>
            <button type="button" class="ui button icon weixin"><i class="weixin icon"></i></button>
            <div id="toTop" href="#" class="ui button"><i class="chevron up icon"></i></div>
        </div>
    </div>

    <div class="ui toc-container flowing popup transition hidden" style="width: 250px !important;">
        <ol class="js-toc"></ol>
    </div>

    <div id="qrcode" class="ui flowing popup transition hidden wechat-qr" style="width: 130px !important;">

    </div>
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-margin-top-big">
        <div class="ui container center aligned">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <div class="ui centered card" style="width: 9em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emain:xxxxxxxx</a>
                        <a href="#" class="item">QQ:xxxxxxxx</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
                </div>
            </div>
            <div class="ui inverted section divider">
                <p class="m-text-thin m-text-spaced m-opacity-mini m-text-height">Copyright © 2020 - 2021 ZYH Designed by ZYH
                </p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./node_modules/tocbot/dist/tocbot.min.js"></script>
    <script src="./static/js/qrcode.min.js"></script>
    <script src="./node_modules/waypoints/lib/jquery.waypoints.min.js"></script>
    <script>
        // 通过class控制显示隐藏
        $('.menu.toggle').click(function() {
            $('.m-item').toggleClass('m-mobile-hide')
        })
        $('#payButton').popup({
            popup: $('.payQ.popup'),
            on: 'click',
            position: 'bottom center'
        })
        $('.toc-btn').popup({
            popup: $('.toc-container'),
            on: 'click',
            position: 'left center'
        })
        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.js-toc',
            // Where to grab the headings to build the table of contents.
            contentSelector: '.js-toc-content',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3',
            // For headings inside relative or absolute positioned containers within content.
            hasInnerContainers: true,
        });
        $('.weixin').popup({
            popup: $('.wechat-qr.popup'),
            on: 'hover',
            position: 'left center'
        })
        var qrcode = new QRCode("qrcode", {
            text: "http://jindo.dev.naver.com/collie",
            width: 110,
            height: 110,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        $('#toTop').click(function() {
            $(window).scrollTo(0, 500)
        })
        var waypoint = new Waypoint({
            element: document.getElementById('waypoint'),
            handler: function(direction) {
                if (direction == 'down') {
                    $('#toolbar').show(500);
                } else {
                    $('#toolbar').hide(500);
                }
            }
        })
    </script>
</body>

</html>

样子:
在这里插入图片描述

2.3 分类页

types.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui header teal item">BLOG</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于我</a>
                <div class="right item m-item m-mobile-hide">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <a href="#" class="ui icon button black m-top-right m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!-- 中间内容 -->
    <div class="m-container-small">
        <div class="ui container m-margin-top-big">
            <!-- 头部 -->
            <div class="ui segment top attached">
                <div class="ui two column grid middle alinged">
                    <div class="column">
                        <h3 class="ui teal header">分类</h3>
                    </div>
                    <div class="column right aligned"><h3 class="ui orange m-inline-block header m-text-thin">14</h3></div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="ui attached segment m-padding-big">
                <div class="ui labeled button m-margin-tb-mini">
                    <a href="#" class="ui basic teal button">思想与感悟</a>
                    <div class="ui basic teal left pointing label">24</div>
                </div>
                <div class="ui labeled button m-margin-tb-mini">
                    <a href="#" class="ui basic  button">思想与感悟</a>
                    <div class="ui basic  left pointing label">24</div>
                </div>
            </div>
            <div class="ui top attached segment teal ">
                <div class="ui segment vertical padded m-padded-tb-big">
                    <div class="ui grid stackable mobile reversed">
                        <div class="eleven wide column">
                            <h3 class="ui header">标题一</h3>
                            <p class="m-text">
                                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                            <div class="ui grid stackable">
                                <div class="eleven wide column">
                                    <div class="ui link list horizontal mini">
                                        <div class="item">
                                            <img src="https://fakeimg.pl/100x100/ff0000/" class="ui avatar image">
                                            <div class="content"><a href="#" class="header">zyh</a></div>
                                        </div>
                                        <div class="item">
                                            <i class="calendar icon"></i> 2021-03-10
                                        </div>
                                        <div class="item">
                                            <i class="eye icon"></i> 2342
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column right aligned">
                                    <a href="#" target="_blank"
                                        class="ui m-text-thin label teal basic m-padding">认知升级</a>
                                </div>
                            </div>
                        </div>
                        <div class="five wide column">
                            <a href="#" target="_blank">
                                <img src="https://fakeimg.pl/800x450/ff0000/" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="ui bottom attached segment">
                <div class="ui two column grid middle alinged">
                    <div class="column">
                        <a href="#" class="ui teal basic button mini">上一页</a>
                    </div>
                    <div class="column right aligned">
                        <a href="#" class="ui teal basic button mini">下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-margin-top-big">
        <div class="ui container center aligned">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <div class="ui centered card" style="width: 9em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emain:xxxxxxxx</a>
                        <a href="#" class="item">QQ:xxxxxxxx</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
                </div>
            </div>
            <div class="ui inverted section divider">
                <p class="m-text-thin m-text-spaced m-opacity-mini m-text-height">Copyright © 2020 - 2021 ZYH Designed
                    by ZYH</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <script>
        // 通过class控制显示隐藏
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        })
    </script>
</body>

</html>

在这里插入图片描述

2.4 标签页

tags.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui header teal item">BLOG</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide active"><i class="tags icon"></i> 标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于我</a>
                <div class="right item m-item m-mobile-hide">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <a href="#" class="ui icon button black m-top-right m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!-- 中间内容 -->
    <div class="m-container-small">
        <div class="ui container m-margin-top-big">
            <!-- 头部 -->
            <div class="ui segment top attached">
                <div class="ui two column grid middle alinged">
                    <div class="column">
                        <h3 class="ui teal header">标签</h3>
                    </div>
                    <div class="column right aligned"><h3 class="ui orange m-inline-block header m-text-thin">14</h3></div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="ui attached segment m-padding-big">
                <a href="#" target="_blank" class="ui large label basic teal left pointing m-margin-tb-mini">
                    方法论 <div class="detail">13</div>
                </a>
                <a href="#" target="_blank" class="ui large label basic left pointing m-margin-tb-mini">
                    方法论 <div class="detail">13</div>
                </a>
            </div>
            <div class="ui top attached segment teal ">
                <div class="ui segment vertical padded m-padded-tb-big">
                    <div class="ui grid stackable mobile reversed">
                        <div class="eleven wide column">
                            <h3 class="ui header">标题一</h3>
                            <p class="m-text">
                                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                            <div class="ui grid stackable">
                                <div class="row">
                                    <div class="eleven wide column">
                                        <div class="ui link list horizontal mini">
                                            <div class="item">
                                                <img src="https://fakeimg.pl/100x100/ff0000/" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">zyh</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> 2021-03-10
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> 2342
                                            </div>
                                        </div>
                                    </div>
                                    <div class="five wide column right aligned">
                                        <a href="#" target="_blank"
                                            class="ui m-text-thin label teal basic m-padding">认知升级</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <a href="#" class="ui basic teal left pointing label m-padding m-text-thin">方法论</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="five wide column">
                            <a href="#" target="_blank">
                                <img src="https://fakeimg.pl/800x450/ff0000/" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="ui bottom attached segment">
                <div class="ui two column grid middle alinged">
                    <div class="column">
                        <a href="#" class="ui teal basic button mini">上一页</a>
                    </div>
                    <div class="column right aligned">
                        <a href="#" class="ui teal basic button mini">下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-margin-top-big">
        <div class="ui container center aligned">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <div class="ui centered card" style="width: 9em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emain:xxxxxxxx</a>
                        <a href="#" class="item">QQ:xxxxxxxx</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
                </div>
            </div>
            <div class="ui inverted section divider">
                <p class="m-text-thin m-text-spaced m-opacity-mini m-text-height">Copyright © 2020 - 2021 ZYH Designed
                    by ZYH</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <script>
        // 通过class控制显示隐藏
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        })
    </script>
</body>

</html>

在这里插入图片描述

2.5 归档页

archives.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>归档</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui header teal item">BLOG</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide active"><i class="tags icon"></i> 标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于我</a>
                <div class="right item m-item m-mobile-hide">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <a href="#" class="ui icon button black m-top-right m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!-- 中间内容 -->
    <div class="m-container-small">
        <div class="ui container m-margin-top-big">
            <!-- 头部 -->
            <div class="ui segment top attached m-padding-middle">
                <div class="ui two column grid middle alinged ">
                    <div class="column">
                        <h3 class="ui teal header">归档</h3>
                    </div>
                    <div class="column right aligned"><h3 class="ui orange m-inline-block header m-text-thin">14</h3></div>
                </div>
            </div>
            <h2 class="ui center aligned header">2021</h2>
            <div class="ui fluid vertical menu">
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class=" teal circle icon"></i>关于刻意练习
                        <div class="ui teal basic left pointing label m-padding">3月10号</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padding">原创</div>
                </a>
            </div>

        </div>
    </div>
    </div>
    </div>
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-margin-top-big">
        <div class="ui container center aligned">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <div class="ui centered card" style="width: 9em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emain:xxxxxxxx</a>
                        <a href="#" class="item">QQ:xxxxxxxx</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
                </div>
            </div>
            <div class="ui inverted section divider">
                <p class="m-text-thin m-text-spaced m-opacity-mini m-text-height">Copyright © 2020 - 2021 ZYH Designed
                    by ZYH</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <script>
        // 通过class控制显示隐藏
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        })
    </script>
</body>

</html>

在这里插入图片描述

2.6 关于我页面

aboutme.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui header teal item">BLOG</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a>
                <a href="#" class="m-item item m-mobile-hide active"><i class="info icon"></i> 关于我</a>
                <div class="right item m-item m-mobile-hide">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <a href="#" class="ui icon button black m-top-right m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!-- 中间内容 -->
    <div class="m-container-small">
        <div class="ui container m-margin-top-big">
            <div class="ui grid stackable">
                <div class="eleven wide column">
                    <img src="https://fakeimg.pl/800x600/" class="ui rounded image">
                </div>
                <div class="five wide column">
                    <div class="ui top attached segment">
                        <div class="ui header">关于我</div>
                    </div>
                    <div class="ui attached segment">
                        <p class="m-text">填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容</p>
                        <p class="m-text">填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容</p>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui orange basic left pointing label m-margin-tb-mini">编程</div>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui teal basic left pointing label m-margin-tb-mini">编程</div>
                    </div>
                    <div class="ui bottom attached segment">
                        <a href="#" class="ui circular button icon github"><i class="github icon"></i></a>
                        <a href="#" class="ui circular button icon weixin"><i class="weixin icon"></i></a>
                        <a href="#" class="ui circular button icon qq" data-content="xxxxxxxx"
                            data-position="bottom center"><i class="qq icon"></i></a>
                    </div>
                    <div class="ui flowing popup transition hidden payQ">
                        <div class="image">
                            <img src="https://fakeimg.pl/120x120/" class="ui image rounded bordered"
                                style="width: 120px;">
                            <div>微信</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-margin-top-big">
        <div class="ui container center aligned">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <div class="ui centered card" style="width: 9em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emain:xxxxxxxx</a>
                        <a href="#" class="item">QQ:xxxxxxxx</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
                </div>
            </div>
            <div class="ui inverted section divider">
                <p class="m-text-thin m-text-spaced m-opacity-mini m-text-height">Copyright © 2020 - 2021 ZYH Designed
                    by ZYH</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <script>
        // 通过class控制显示隐藏
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        })
        $('.qq').popup()
        $('.weixin').popup({
            popup: $('.payQ.popup'),
            on: 'hover',
            position: 'bottom center'
        })
    </script>
</body>

</html>

在这里插入图片描述

===>>后台管理页面
2.7 博客管理列表页

blogs.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui header teal item">管理后台</h2>
                <a href="#" class="m-item item m-mobile-hide active"><i class="home icon"></i> 博客</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <div class="right menu m-item m-mobile-hide">
                    <div class="ui dropdown item">
                        <div class="text">
                            <img src="https://fakeimg.pl/100x100/" class="ui avatar image">
                            毛茸茸
                        </div>
                        <i class="dropdpwn icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a href="#" class="ui icon button black m-top-right m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!-- 二级导航 -->
    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="menu right">
                <a href="#" class="item">发布</a>
                <a href="#" class="active item teal">列表</a>
            </div>
        </div>
    </div>
    <!-- 中间内容 -->
    <div class="m-container-small">
        <div class="ui container m-margin-top-big">
            <form action="#" method="POST" class="ui form segment">
                <div class="inline fields">
                    <div class="field">
                        <input type="text" name="title" placeholder="标题">
                    </div>
                    <div class="field">
                        <div class="ui selection dropdown">
                            <input type="hidden" name="type">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div class="item" data-value="1">错误日志</div>
                                <div class="item" data-value="2">开发者手册</div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="recommend" id="recommend">
                            <label for="recommend">推荐</label>
                        </div>
                    </div>
                    <div class="field">
                        <button class="ui mini teal basic button"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </form>
            <table class="ui table celled">
                <thead>
                    <tr>
                        <th></th>
                        <th>标题</th>
                        <th>类型</th>
                        <th>推荐</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>练习</td>
                        <td>认知升级</td>
                        <td></td>
                        <td>2021-3-12</td>
                        <td>
                            <a href="#" class="ui mini teal basic button">编辑</a>
                            <a href="#" class="ui mini red basic button">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <th colspan="6">
                        <div class="ui pagination menu mini">
                            <a class="item">上一页</a>
                            <a class="item">下一页</a>
                          </div>
                          <a href="#" class="ui mini right floated teal basic button">新增</a>
                    </th>
                </tfoot>
            </table>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-margin-top-big">
        <div class="ui container center aligned">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <div class="ui centered card" style="width: 9em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emain:xxxxxxxx</a>
                        <a href="#" class="item">QQ:xxxxxxxx</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
                </div>
            </div>
            <div class="ui inverted section divider">
                <p class="m-text-thin m-text-spaced m-opacity-mini m-text-height">Copyright © 2020 - 2021 ZYH Designed
                    by ZYH</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <script>
        // 通过class控制显示隐藏
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        })
        $('.ui.dropdown').dropdown({
            on: 'hover'
        }
        )
    </script>
</body>

</html>

在这里插入图片描述

2.8 博客发布页

blogs-input.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../node_modules/editor.md/css/editormd.min.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui header teal item">管理后台</h2>
                <a href="#" class="m-item item m-mobile-hide active"><i class="home icon"></i> 博客</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <div class="right menu m-item m-mobile-hide">
                    <div class="ui dropdown item">
                        <div class="text">
                            <img src="https://fakeimg.pl/100x100/" class="ui avatar image">
                            毛茸茸
                        </div>
                        <i class="dropdpwn icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a href="#" class="ui icon button black m-top-right m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!-- 二级导航 -->
    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="menu right">
                <a href="#" class="active item teal">发布</a>
                <a href="#" class=" item ">列表</a>
            </div>
        </div>
    </div>
    <!-- 中间内容 -->
    <div class="m-container-small">
        <div class="ui container m-margin-top-big">
            <form action="#" method="POST" class="ui form">
                <div class="field required">
                    <div class="ui left labeled input">
                        <div class="ui selection dropdown teal basic label compact">
                            <input type="hidden" value="原创">
                            <i class="dropdown icon"></i>
                            <div class="text">原创</div>
                            <div class="menu">
                                <div class="item" data-value="原创">原创</div>
                                <div class="item" data-value="转载">转载</div>
                                <div class="item" data-value="翻译">翻译</div>
                            </div>
                        </div>
                        <input type="text" name="title" placeholder="标题">
                    </div>
                </div>

                <div class="field">
                    <div id="md-content" style="z-index: 1 !important;">
                        <textarea name="content" placeholder="博客内容" style="display: none;"></textarea>
                    </div>
                </div>

                <div class="two fields">
                    <div class="field">
                        <div class="ui left labeled action input">
                            <label class="ui compact teal basic label ">分类</label>
                            <div class="ui selection dropdown fluid">
                                <input type="hidden" name="type">
                                <i class="dropdown icon"></i>
                                <div class="default text">分类</div>
                                <div class="menu">
                                    <div class="item" data-value="1">错误日志</div>
                                    <div class="item" data-value="2">开发者手册</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left labeled action input">
                            <label class="ui compact teal basic label ">标签</label>
                            <div class="ui selection dropdown fluid search multiple">
                                <input type="hidden" name="tag">
                                <i class="dropdown icon"></i>
                                <div class="default text">标签</div>
                                <div class="menu">
                                    <div class="item" data-value="1">java</div>
                                    <div class="item" data-value="2">vue</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="field">
                    <div class="ui left labeled input">
                        <label class="ui teal basic label">首图</label>
                        <input type="text" name="indexPicture" placeholder="首图引用地址">
                    </div>
                </div>

                <div class="inline fields">
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="recommend" class="hidden" id="recommend" checked>
                            <label for="recommend">推荐</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="shareinfo" class="hidden" id="shareinfo">
                            <label for="shareinfo">转载声明</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="appreciation" class="hidden" id="appreciation">
                            <label for="appreciation">赞赏</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="commend" class="hidden" id="commend">
                            <label for="commend">留言</label>
                        </div>
                    </div>
                </div>

                <div class="ui error message"></div>

                <div class="ui right aligned container">
                    <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                    <button type="submit" class="ui secondary button">保存</button>
                    <button type="submit" class="ui teal button">发布</button>
                </div>
            </form>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-margin-top-big">
        <div class="ui container center aligned">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <div class="ui centered card" style="width: 9em;">
                        <img src="https://fakeimg.pl/100x100/" class="ui rounded image">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emain:xxxxxxxx</a>
                        <a href="#" class="item">QQ:xxxxxxxx</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
                </div>
            </div>
            <div class="ui inverted section divider">
                <p class="m-text-thin m-text-spaced m-opacity-mini m-text-height">Copyright © 2020 - 2021 ZYH Designed
                    by ZYH</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../node_modules/editor.md/editormd.min.js"></script>

    <script>
        // 通过class控制显示隐藏
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        })
        $('.ui.dropdown').dropdown({
            on: 'hover'
        }
        )
        $('.ui.form').form({
            fields: {
                title: {
                    identifier: 'title',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '标题不能为空'
                        }
                    ]
                }
            }
        })
        //初始化markdown编辑器
        var contentEditor;
        $(function () {
            contentEditor = editormd("md-content", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "../node_modules/editor.md/lib/"
            });

        });
    </script>
</body>

</html>

在这里插入图片描述

2.9 插件集成

编辑器Markdown
可以使用 npm install editor.md 安装 然后引入样式
内容排版typo.css
下载使用 引用css就可以了
在这里插入图片描述
动画animate.css
npm install animate.css --save
Prism代码高亮
在这里插入图片描述
下载后导入即可
目录生成Tocbot
npm install --save tocbot
滚动侦测Waypoints
npm install waypoints
二维码生成qrcode
下载解压引用使用
平滑滚动scrollTo
CDN方式

3、后端部分

稍后贴链接地址

核心功能 文章/图片/视频发布、喜欢、统计阅读次数。 文章标签tag功能、支持按tag分类 文章支持ueditor/markdown编辑器切换(后台配置) 评论功能,支持回复,支持表情。 第三方(微博、QQ)登录。 lucene实现的站内搜索。 响应式布局 支持用户订阅 先看效果图 SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) http://localhost:8080/admin/group/list SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能)SpringBoot开发非常美观的java博客系统(包含后台管理功能) 技术选型: JDK8 数据库MySQL 主框架 (Spring-boot、Spring-data-jpa) 安全权限 Shiro 搜索工具 Lucene 缓存 Ehcache 视图模板 Freemarker 其它 Jsoup、fastjson jQuery、Seajs Bootstrap 前端框架 UEditor/Markdown编辑器 font-Awesome 字体/图标 准备工作(sql文件在项目里面) 安装 Jdk8 安装 Maven 准备 IDE (如果你不看源码,可以忽略下面的步骤,直接通过Maven编译war包:mvn clean package -DskipTests) IDE 需要配置的东西 编码方式设为UTF-8 配置Maven 设置Jdk8 关于这些配置,网上有一大把的资料,所以此处不再重复。 获取代码导入到IDE 下载代码 导入到IDE的时候请选择以Maven的方式导入 项目配置参考 系统配置手册 配置完毕 启动项目,在控制台看到Mblog加载完毕的信息后,表示启动成功 打开浏览器输入:http//localhost/mblog/ (此处仅是示例,具体具体端口因人而异),访问成功即部署完毕 后台管理的地址是 /admin, 如果你是管理员账号点导航栏的头像会看到"后台管理" 启动成功后,你应该去后台的系统配置里配置你的网站信息等。 常见问题总结 进入系统后, 菜单加载不出来, 那应该是你没有导 db_init.sql 点标签显示乱码, 请设置Tomcat的 URIEncoding 为 UTF-8 项目截图 SpringBoot开发非常美观的java博客系统(包含后台管理功能) 转自:https://gitee.com/mtons/mblog SpringBoot开发非常美观的java博客系统(包含后台管理功能) 注意: 一、java main方式运行mblog-web下的BootApplication.java时抛出异常的解决方案 Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFactory bean. SpringBoot开发非常美观的java博客系统(包含后台管理功能) 注释掉后下面图片的这段后,记得maven要重新reimport SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) 否则maven依赖不生效还是会抛出以上的异常 二、第三方登录点击后无响应,那是因为第三方开放平台回调的url失效导致,需要你去对应的第三方开放平台注册app后获取对应的oauth帐号 SpringBoot开发非常美观的java博客系统(包含后台管理功能) 三、idea以maven项目导入该项目后,发现没有maven的依赖包时,需要对每个maven module进行clear和install,并且注意maven的依赖顺序 SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) 四、访问地址是http://localhost:8080 登录时,帐号,密码只要自己找个密码,然后md5下在更新到db中即可登录成功。 比如:zuidaima 111111,md5后密码是 3931MUEQD1939MQMLM4AISPVNE,md5的java类 SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值