SpringBoot 博客开发 个人学习（项目开始和前端页面）
2024-05-09 03:56:46
博客开发
- 前言
- 1、需求与功能
- 1.1 需求
- 1.2 功能
- 2、页面开发（非重点，可直接跳过看后台部分）
- ===>>前端展示页面
- 2.1 首页
- 2.2 详情页
- 2.3 分类页
- 2.4 标签页
- 2.5 归档页
- 2.6 关于我页面
- ===>>后台管理页面
- 2.7 博客管理列表页
- 2.8 博客发布页
- 2.9 插件集成
- 3、后端部分
前言
功能点:
技术组合：
- 后端：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 Designedby 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 typespecimen 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 Ipsumpassages, 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 Designedby 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 Designedby 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 Designedby 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 Designedby 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 Designedby 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 Designedby 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、后端部分
稍后贴链接地址
SpringBoot 博客开发 个人学习（项目开始和前端页面）相关推荐
- Django个人博客开发 | 前言
本渣渣不专注技术,只专注使用技术,不是一个资深的coder,是一个不折不扣的copier 1.前言 自学 Python,始于 Django 框架,Scrapy 框架,elasticsearch搜索引擎 ...
- Django 学习小组：博客开发实战第二周教程 —— 实现博客详情页面和分类页面
本教程内容已过时,更新版教程请访问: django 博客开发入门教程. 上周我们完成了博客的 Model 部分,以及 Blog 的首页视图 IndexView. 本节接上周的文档 Django 学习小 ...
- Django 3.2.5博客开发教程:基础配置
创建项目之后,我们需要对项目进行最基础的配置.这些配置是我们做项目的时候必须要配置的,所以我们先提前配置好. 我们打开myblog目录下的settings.py文件. 一.设置域名访问权限 myblo ...
- Django 3.2.5博客开发教程:HelloWorld欢迎页面
基础配置做好了之后,我们就可以先迁移数据到数据库,然后启动我们的项目,感受Django的魅力. 在Pycharm左下角底部的Terminal,会弹出Terminal终端窗口,Pycharm自动会帮我们 ...
- Django 3.2.5博客开发教程:用Admin管理后台管理数据
上节我们我们把数据库迁移到数据库里去了,那么现在我们数据库里是个什么样的情况呢?我们点击Pycharm右上角的Database,然后在网站项目里选中我们的数据库文件db.sqlite3,把它拖到Dat ...
- Django 3.2.5博客开发教程:URL与视图函数
在讲URL与视图函数之前我们先给大家简单介绍一下用户访问网站的流程.我们访问一个网站的时候,一般先打开浏览器,然后在浏览器的地址栏里输入一个网址,也就是URL,然后回车,我们就可以在浏览器里看到这个网 ...
- Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
- Django 3.2.5博客开发教程:体验django模板
上面我们有说过,用户发送请求的时候,视图会返回一个响应,响应可以是一个重定向,一个404错误,一个XML文档,一张图片或者是一个HTML内容的网页.前面几个返回的信息比较有限,我们重点更多是放在HTM ...
- Django 3.2.5博客开发教程:一些常用的模板使用方法
一.django static文件的引入方式 1.在django project中创建 static文件夹 2.settings.py中配置要在 STATIC_URL = '/static/' 下边 ...
最新文章
- Matlab与线性代数 -- Pascal矩阵
- 使用Spring JDBC框架连接并操作数据库
- 说一说网站与搜索引擎之间不得不知的联系
- 24点游戏java_Java实现24点小游戏
- iOS打包framework - Swift完整项目打包Framework，嵌入OC项目使用
- a标签隐藏真实地址_家庭影院布线非常杂乱应该怎么补救？A/V电缆管理的7个技巧...
- java 访问内部类的属性_java中的内部类详细总结
- 开源TinyXML 最简单的新手教程
- lisp 里在特定图层写字_有温度的“城市客厅”——从景观设计角度感受天目里...
- 30个免费网页设计模板
- 个人向常用的一些函数的汇总成一个简易模板
- FS4066耐高压1到4节内置MOS的锂电池充电管理芯片
- 移动100兆光纤，白天速度快，到了晚上卡成狗，何解？
- Dubbo 第一章：详情版
- 操作系统位数与数据字节数的关系
- Android---App Widget(官方文档翻译)
- nonce值是什么？（Number once）（Number used once）cnonce（client nonce）（一个只被使用一次的任意或非重复的随机数值）
- centos7安装配置sql server 2017 linux教程
- 十分钟带你了解阿里、美团、滴滴、头条等互联网头部大厂面经
- 学习云计算流程，分享学习资源
热门文章
- vos与呼叫中心系统的关系
- 开机后显示服务器正在启动,电脑开机后卡在Windows正在启动界面上怎么办？
- 【Python】matplotlib plt显示中文乱码解决方法
- 软件经验|GDAL空间数据开源库开发介绍
- 华为 会议室分配时间最长_华为“办公室新物种”来了，智慧办公一屏到位
- 计算机的隐藏功能应用,电脑也有隐藏功能， 你知道吗？
- 公告或通知的未读 设计（MySQL Redis）
- poscms-说明文档
- android ae动画教程,AE动画转Web代码工具指北-Lottie
- Leetcode04--给定两个大小为 m 和 n 的正序（从小到大）数组 nums1 和 nums2。请你找出并返回这两个正序数组的中位数。