博客开发
前言
功能点:
技术组合：
- 后端：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><u></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、后端部分
稍后贴链接地址
扫一扫
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
