Spring Boot制作个人博客-页面插件集成
发布时间
阅读量：
阅读量
文章目录
为 blogs-input.html 网页配置 Markdown 插件集成。具体步骤如下：
- 导入相关的 CSS 文件
- 设置初始状态
- 配置基本设置以支持 Markdown 格式化
- 提升代码的性能
-
二、在博客详情页添加插件集成（基于内容排版typo.css）
- 步骤一：获取样式文件
- 步骤二：解压缩并复制typo.css文件至项目根目录
- 步骤三：导入到项目中使用
- 步骤四：将样式应用到博客模板中
- 步骤五：对typo.css文件进行调整
- 步骤六：更新blog.html中的相应部分
-
第三章 在博客详情页面集成插件（使用 animate.css）
- 首先前往：访问地址为https://animate.style/
- 然后执行样式设置
- 最终为图片添加放大效果的动画样式
- 然后执行样式设置
- 首先前往：访问地址为https://animate.style/
-
四、在博客详情页面集成Prism代码高亮插件（基于PrismJS）
- 第一步：访问GitHub仓库地址https://github.com/PrismJS/prism
- 第二步：将代码粘贴到prism文件中指定位置
- 第三步：导入相关样式表文件以实现美化显示效果
- 第四步：导入JavaScript脚本以完成功能实现
- 第五步：执行测试代码块以验证插件功能是否正常运行
- 第六步：编写并添加自定义样式以进一步优化视觉效果
- 第七步：查看最终呈现效果以确认插件已成功集成
-
第五部分：在博客详情页面集成TocBot插件以实现目录生成。
- 第一部分：首先编写工具条。
- 第二步：添加外联样式表文件
css.css。 - 第三步：在目录中实现自动生成。
- (步骤一) 访问GitHub仓库：TocBot。
- (步骤二) 下载TocBot插件。
- (步骤三) 将插件复制到
tocbot/文件夹中。 - (步骤四) 导入外联样式表和脚本文件
tocbot.css和js。 - (步骤五) 调整外联样式表以达到预期效果。
- 第二步：添加外联样式表文件
- 第一部分：首先编写工具条。
-
六、将qrcode.js集成到博客详情页面实现二维码生成功能。
- 首先，在博客详情页面上完成以下步骤：
- （1）创建并导入二维码元素
- 在HTML代码中插入qrcode.js脚本。
- 使用JavaScript生成并导入QR码元素。
- （2）访问:https://davidshimjs.github.io/qrcodejs/
- 打开Qrcode.js官方主页查看最新版本和文档。
- 下载所需的资源包或直接在浏览器中加载。
- （3）引入JavaScript库文件
- 将qrcode.js文件正确放置在项目目录中。
- 在开发环境中确保路径正确引用。
- （4）注册相关事件监听函数
- 使用DOMContentLoaded事件监听DOM变化。
- 设置完成后自动执行后续操作的通知机制。
- （5）指定唯一的ID标识
- 确保每个QR码都有一个独特的ID标识符。
- 避免使用固定路径的图片链接以防止混淆。
- （6） preview the generated QR code in the browser window
- 检查生成效果并进行必要的测试验证。
- （1）创建并导入二维码元素
- 首先，在博客详情页面上完成以下步骤：
-
七、为博客详情页面集成插件（平滑滚动 jQuery.scrollTo）
- 1、可访问：https://github.com/flesler/jquery.scrollTo
- 2、直接链接到该插件
- 3、集成到页面中的平滑滚动效果
- 4、优化代码库并将其整合到项目中
- 1、可访问：https://github.com/flesler/jquery.scrollTo
-
八、为博客详情页面引入插件集成功能（实现滚动式waypoints检测）
- 第一步：访问该平台的指定地址：http://imakewebthings.com/waypoints/
- 第二步：将JavaScript文件复制到对应的方式点目录下
- 第三步：导入JavaScript文件
- 第四步：注册相关事件监听
- 第五步：进行必要的代码调整和优化
-
前端页面制作已全部完成；下一步计划开展插件集成工作。
- 能够有效支持我们实现交互体验的开发，并进一步提升用户的展示空间。
一、给blogs-input.html页面添加插件集成（编辑器 Markdown）
- 下载完成之后，解压
- 创建lib文件夹，将部分插件拷贝过来
1、引入editormd.min.css
2、添加初始化内容
3、初始化markdown编辑器
4、优化代码
- 点击全屏显示时，会出现如下效果
- 设置在最上层即可
二、给博客详情页面添加插件集成（内容排版typo.css）
1、下载样式
2、解压压缩包，拷贝typo.css
3、引用typo.css
4、添加样式
5、修改typo.css样式
@charset "utf-8";
/* 要注意表单元素并不继承父级 font 的问题 */
.typo button, .typo input,.typo select, .typo textarea {
font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}
.typo button::-moz-focus-inner,
.typo input::-moz-focus-inner {
padding: 0;
border: 0;
}
/* 去掉各Table cell 的边距并让其边重合 */
.typo table {
border-collapse: collapse;
border-spacing: 0;
}
/* 去除默认边框 */
.typo fieldset,.typo img {
border: 0;
}
/* 块/段落引用 */
.typo blockquote {
position: relative;
color: #999;
font-weight: 400;
border-left: 1px solid #1abc9c;
padding-left: 1em;
margin: 1em 3em 1em 2em;
}
@media only screen and ( max-width: 640px ) {
blockquote {
margin: 1em 0;
}
}
/* Firefox 以外，元素没有下划线，需添加 */
.typo acronym,.typo abbr {
border-bottom: 1px dotted;
font-variant: normal;
text-decoration: none;
}
/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
.typo abbr {
cursor: help;
}
/* 一致的 del 样式 */
.typo del {
text-decoration: line-through;
}
.typo address, .typo caption,.typo cite,.typo code,.typo dfn,.typo em,.typo th,.typo var {
font-style: normal;
font-weight: 400;
}
/* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */
.typo ul,.typo ol {
list-style: none;
}
/* 对齐是排版最重要的因素, 别让什么都居中 */
.typo caption,.typo th {
text-align: left;
}
.typo q:before,.typo q:after {
content: '';
}
/* 统一上标和下标 */
.typo sub,.typo sup {
font-size: 75%;
line-height: 0;
position: relative;
}
.typo :root sub, .typo :root sup {
vertical-align: baseline; /* for ie9 and other modern browsers */
}
.typo sup {
top: -0.5em;
}
.typo sub {
bottom: -0.25em;
}
/* 让链接在 hover 状态下显示下划线 */
.typo a {
color: #1abc9c;
}
.typo a:hover {
text-decoration: underline;
}
.typo a {
border-bottom: 1px solid #1abc9c;
}
.typo a:hover {
border-bottom-color: #555;
color: #555;
text-decoration: none;
}
/* 默认不显示下划线，保持页面简洁 */
.typo ins, .typo a {
text-decoration: none;
}
/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
* 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
* 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
* 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
* 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
*/
.typo u, .typo-u {
text-decoration: underline;
}
/* 标记，类似于手写的荧光笔的作用 */
.typo mark {
background: #fffdd1;
border-bottom: 1px solid #ffedce;
padding: 2px;
margin: 0 5px;
}
/* 代码片断 */
.typo pre, .typo code,.typo pre tt {
font-family: Courier, 'Courier New', monospace;
}
.typo pre {
background: #f8f8f8;
border: 1px solid #ddd;
padding: 1em 1.5em;
display: block;
-webkit-overflow-scrolling: touch;
}
/* 一致化 horizontal rule */
.typo hr {
border: none;
border-bottom: 1px solid #cfcfcf;
margin-bottom: 0.8em;
height: 10px;
}
/* 底部印刷体、版本等标记 */
.typo small, .typo-small,
/* 图片说明 */
.typo figcaption {
font-size: 0.9em;
color: #888;
}
.typo strong, b {
font-weight: bold;
color: #000;
}
/* 可拖动文件添加拖动手势 */
.typo [draggable] {
cursor: move;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* 强制文本换行 */
.textwrap, .textwrap td, .textwrap th {
word-wrap: break-word;
word-break: break-all;
}
.textwrap-table {
table-layout: fixed;
}
/* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */
.serif {
font-family: Palatino, Optima, Georgia, serif;
}
/* 保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table,
.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote {
margin-bottom: 1.2em
}
.typo h1,.typo h2,.typo h3,.typo h4,.typo h5,.typo h6 {
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
font-weight: 100;
color: #000;
line-height: 1.35;
}
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6,
.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 {
margin-top: 1.2em;
margin-bottom: 0.6em;
line-height: 1.35;
}
.typo h1, .typo-h1 {
font-size: 2em;
}
.typo h2, .typo-h2 {
font-size: 1.8em;
}
.typo h3, .typo-h3 {
font-size: 1.6em;
}
.typo h4, .typo-h4 {
font-size: 1.4em;
}
.typo h5, .typo h6, .typo-h5, .typo-h6 {
font-size: 1.2em;
}
/* 在文章中，应该还原 ul 和 ol 的样式 */
.typo ul, .typo-ul {
margin-left: 1.3em;
list-style: disc;
}
.typo ol, .typo-ol {
list-style: decimal;
margin-left: 1.9em;
}
.typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol {
margin-bottom: 0.8em;
margin-left: 2em;
}
.typo li ul, .typo-ul ul, .typo-ol ul {
list-style: circle;
}
/* 同 ul/ol，在文章中应用 table 基本格式 */
.typo table th, .typo table td, .typo-table th, .typo-table td, .typo table caption {
border: 1px solid #ddd;
padding: 0.5em 1em;
color: #666;
}
.typo table th, .typo-table th {
background: #fbfbfb;
}
.typo table thead th, .typo-table thead th {
background: #f1f1f1;
}
.typo table caption {
border-bottom: none;
}
/* 去除 webkit 中 input 和 textarea 的默认样式 */
.typo-input, .typo-textarea {
-webkit-appearance: none;
border-radius: 0;
}
.typo-em, .typo em, legend, caption {
color: #000;
font-weight: inherit;
}
/* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */
.typo-em {
position: relative;
}
.typo-em:after {
position: absolute;
top: 0.65em;
left: 0;
width: 100%;
overflow: hidden;
white-space: nowrap;
content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
}
/* Responsive images */
.typo img {
max-width: 100%;
}
AI写代码6、修改blog.html中间内容
<!--中间内容-->
<div class="m-container-small m-padded-tb-large">
<div class="ui container">
<!--头部-->
<div class="ui top attached segment">
<!--左侧-->
<div class="ui horizontal link list">
<div class="item">
<!--头像-->
<img src="https://picsum.photos/100/100?image=1010" alt="" class="ui avatar image">
<!--名称-->
<div class="content">
<a href="#" class="header">beauty</a>
</div>
</div>
<!--发文时间-->
<div class="item">
<i class="calendar icon"></i>2017-10-01
</div>
<!--浏览次数和眼睛-->
<div class="item">
<i class="eye icon">2032</i>
</div>
</div>
</div>
<!--图片区域-->
<div class="ui attached segment"><!--attached 将div之间连接没有间隙-->
<img src="https://picsum.photos/800/450?image=1025" alt="" class="ui fluid rounded image"><!--rounded 圆角-->
</div>
<!--主要内容-->
<div class="ui attached padded segment">
<!--原创按钮-->
<div class="ui right aligned basic segment">
<div class="ui orange basic label">原创</div>
</div>
<!--内容-->
<h2 class="ui center aligned header">充满智慧的人生格言</h2>
<br>
<div id="content" class="typo typo-selection m-padded-lr-responsive m-padded-tb-large">
<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>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</blockquote>
<h4>The standard Lorem Ipsum passage, used since the 1500s</h4>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<h4>List style in action</h4>
<ul>
<li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as
your brother and hope as your sentry.
<p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
</li>
<li>Sometimes one pays most for the things one gets for nothing.
<p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
</li>
<li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things
easily.
<p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
</li>
</ul>
<h4>You may want to create a perfect <code><hr /></code> line, despite the fact that there will never have one
</h4>
<hr/>
<p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:
<mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails
to succeed".
</mark>
You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as the
demo you're watching now. The following code is the best way to render typo in Chinese:
</p>
<pre>
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
h1,h2,h3,h4,h5,h6 {
line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5,h6{font-size:1em;}
/* 现代排版：保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr {
margin:1em 0 0.6em;
}
</pre>
<h3 id="section3">三、附录</h3>
<h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重点</h5>
<table summary="Typo.css 排版偏重点">
<thead>
<tr>
<th>类型</th>
<th>语义</th>
<th>标签</th>
<th>注意点</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="15">基础标签</th>
<td>标题</td>
<td><code>h1</code> ～ <code>h6</code></td>
<td>全局不强制大小，<code>.typo</code> 中标题与其对应的内容应紧贴，并且有相应的大小设置</td>
</tr>
<tr>
<td>上、下标</td>
<td><code>sup</code>/<code>sub</code></td>
<td>保持与 MicroSoft Office Word 等程序的日常排版一致</td>
</tr>
<tr>
<td>引用</td>
<td><code>blockquote</code></td>
<td>显示/嵌套样式</td>
</tr>
<tr>
<td>缩写</td>
<td><code>abbr</code></td>
<td>是否都有下划线，鼠标 <code>hover</code> 是否为帮助手势</td>
</tr>
<tr>
<td>分割线</td>
<td><code>hr</code></td>
<td>显示的 <code>padding</code> 和 <code>margin</code>正确</td>
</tr>
<tr>
<td>列表</td>
<td><code>ul</code>/<code>ol</code>/<code>dl</code></td>
<td>在全局没有 <code>list-style</code>，在 .<code>typo</code> 中对齐正确</td>
</tr>
<tr>
<td>定义列表</td>
<td><code>dl</code></td>
<td>全局 <code>padding</code> 和 <code>margin</code>为0， .<code>typo</code> 中对齐正确</td>
</tr>
<tr>
<td>选项</td>
<td><code>input[type=radio[, checkbox]]</code></td>
<td>与其他 <code>form</code> 元素排版时是否居中</td>
</tr>
<tr>
<td>斜体</td>
<td><code>i</code></td>
<td>只设置一种斜体，让 <code>em</code> 和 <code>cite</code> 显示为正体</td>
</tr>
<tr>
<td>强调</td>
<td><code>em</code></td>
<td>在全局显示正体，在 <code>.typo</code> 中显示与 <code>b</code> 和 <code>strong</code> 的样式一致，为粗体</td>
</tr>
<tr>
<td>加强</td>
<td><code>strong/b</code></td>
<td>显示为粗体</td>
</tr>
<tr>
<td>标记</td>
<td><code>mark</code></td>
<td>类似荧光笔</td>
</tr>
<tr>
<td>印刷</td>
<td><code>small</code></td>
<td>保持为正确字体的 80% 大小，颜色设置为浅灰色</td>
</tr>
<tr>
<td>表格</td>
<td><code>table</code></td>
<td>全局不显示线条，在 <code>table</code> 中显示表格外框，并且表头有浅灰背景</td>
</tr>
<tr>
<td>代码</td>
<td><code>pre</code>/<code>code</code></td>
<td>字体使用 <code>courier</code> 系字体，保持与 <code>serif</code> 有比较一致的显示效果</td>
</tr>
<tr>
<th rowspan="5">特殊符号</th>
<td>着重号</td>
<td><em class="typo-em">在文字下加点</em></td>
<td>在支持 <code>:after</code> 和 <code>:before</code> 的浏览器可以做渐进增强实现</td>
</tr>
<tr>
<td>专名号</td>
<td><u>林建锋</u></td>
<td>专名号，有下划线，使用 <code>u</code> 或都 <code>.typo-u</code> 类</td>
</tr>
<tr>
<td>破折号</td>
<td>——</td>
<td>保持一划，而非两划</td>
</tr>
<tr>
<td>人民币</td>
<td>¥</td>
<td>使用两平等线的符号，或者 HTML 实体符号 <code>¥</code></td>
</tr>
<tr>
<td>删除符</td>
<td>
<del>已删除（deleted）</del>
</td>
<td>一致化各浏览器显示，中英混排正确</td>
</tr>
<tr>
<th rowspan="3">加强类</th>
<td>专名号</td>
<td><code>.typo-u</code></td>
<td>由于 <code>u</code> 被 HTML4 放弃，在向后兼容上推荐使用 <code>.typo-u</code></td>
</tr>
<tr>
<td>着重符</td>
<td><code>.typo-em</code></td>
<td>利用 <code>:after</code> 和 <code>:before</code> 实现着重符</td>
</tr>
<tr>
<td>清除浮动</td>
<td><code>.clearfix</code></td>
<td>与一般 CSS Reset 保持一对致 API</td>
</tr>
<tr>
<th rowspan="5">注意点</th>
<td colspan="3">（1）中英文混排行高/行距</td>
</tr>
<tr>
<td colspan="3">（2）上下标在 IE 中显示效果</td>
</tr>
<tr>
<td colspan="3">（3）块/段落分割空白是否符合设计原则</td>
</tr>
<tr>
<td colspan="3">（4）input 多余空间问题</td>
</tr>
<tr>
<td colspan="3">（5）默认字体色彩，目前采用 <code>#333</code> 在各种浏览显示比较好</td>
</tr>
</tbody>
</table>
<h5 id="appendix2">2、开源许可</h5>
</div>
AI写代码7、添加样式typo.css
三、给博客详情页面添加插件集成（动画animate.css）
1、访问：https://animate.style/
2、链接样式
3、给图片添加放大动画样式
四、给博客详情页面添加插件集成（代码高亮 prism）
1、访问：https://github.com/PrismJS/prism
- 下载
2、拷贝至prism文件中
3、引入样式
4、引入js
5、测试代码
- 查看样式
6、添加样式
7、查看效果
五、给博客详情页面添加插件集成（目录生成 Tocbot）
1、编写工具条
2、添加css.css
3、为目录添加目录生成
（1）访问：https://tscanlin.github.io/tocbot/
（2）下载插件
（3）拷贝到tocbot文件夹
（4）引入tocbot.css和js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=debice-width,initial-scale=1.0">
<title>详情页</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="./static/css/typo.css">
<link rel="stylesheet" href="./static/lib/prism/prism.css">
<link rel="stylesheet" href="./static/lib/tocbot/tocbot.css">
<link rel="stylesheet" href="static/css/css.css">
</head>
<body>
<!--导航栏-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><!--inverted 反色 attached 圆角变直角-->
<!--设置log-->
<div class="ui container">
<div class="ui inverted secondary stackable menu"><!--stackable（可堆叠效果）会根据页面大小改变显示比例-->
<h2 class="ui teal header 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 m-item item m-mobile-hide"><!--使用div框可以靠右-->
<div class="ui icon inverted transparent input"><!--原本是白色的框，加上transparent将输入框变为透明的-->
<input type="text" placeholder="Search……">
<i class="search link icon"></i>
</div>
</div>
</div>
<!--移动端响应图标-->
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</div>
</nav>
<!--中间内容-->
<div class="m-container-small m-padded-tb-large">
<div class="ui container">
<!--头部-->
<div class="ui top attached segment">
<!--左侧-->
<div class="ui horizontal link list">
<div class="item">
<!--头像-->
<img src="https://picsum.photos/100/100?image=1010" alt="" class="ui avatar image">
<!--名称-->
<div class="content">
<a href="#" class="header">beauty</a>
</div>
</div>
<!--发文时间-->
<div class="item">
<i class="calendar icon"></i>2017-10-01
</div>
<!--浏览次数和眼睛-->
<div class="item">
<i class="eye icon">2032</i>
</div>
</div>
</div>
<!--图片区域-->
<div class="ui attached segment"><!--attached 将div之间连接没有间隙-->
<img src="https://picsum.photos/800/450?image=1025" alt="" class="ui fluid rounded image animate__animated animate__pulse"><!--rounded 圆角-->
</div>
<!--主要内容-->
<div class="ui attached padded segment">
<!--原创按钮-->
<div class="ui right aligned basic segment">
<div class="ui orange basic label">原创</div>
</div>
<!--内容-->
<h2 class="ui center aligned header">充满智慧的人生格言</h2>
<br>
<div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large">
<h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>
<pre><code class="language-css">p {color:red}</code></pre>
<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 class="ui 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>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</blockquote>
<h4>The standard Lorem Ipsum passage, used since the 1500s</h4>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<h4>List style in action</h4>
<ul>
<li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as
your brother and hope as your sentry.
<p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
</li>
<li>Sometimes one pays most for the things one gets for nothing.
<p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
</li>
<li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things
easily.
<p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
</li>
</ul>
<h4>You may want to create a perfect <code><hr /></code> line, despite the fact that there will never have one
</h4>
<hr/>
<p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:
<mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails
to succeed".
</mark>
You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as the
demo you're watching now. The following code is the best way to render typo in Chinese:
</p>
<pre><code class="language-css">
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
h1,h2,h3,h4,h5,h6 {
line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5,h6{font-size:1em;}
/* 现代排版：保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr {
margin:1em 0 0.6em;
}
</code>
</pre>
<h3 id="section3">三、附录</h3>
<h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重点</h5>
<table class="ui table" summary="Typo.css 排版偏重点">
<thead>
<tr>
<th>类型</th>
<th>语义</th>
<th>标签</th>
<th>注意点</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="15">基础标签</th>
<td>标题</td>
<td><code>h1</code> ～ <code>h6</code></td>
<td>全局不强制大小，<code>.typo</code> 中标题与其对应的内容应紧贴，并且有相应的大小设置</td>
</tr>
<tr>
<td>上、下标</td>
<td><code>sup</code>/<code>sub</code></td>
<td>保持与 MicroSoft Office Word 等程序的日常排版一致</td>
</tr>
<tr>
<td>引用</td>
<td><code>blockquote</code></td>
<td>显示/嵌套样式</td>
</tr>
<tr>
<td>缩写</td>
<td><code>abbr</code></td>
<td>是否都有下划线，鼠标 <code>hover</code> 是否为帮助手势</td>
</tr>
<tr>
<td>分割线</td>
<td><code>hr</code></td>
<td>显示的 <code>padding</code> 和 <code>margin</code>正确</td>
</tr>
<tr>
<td>列表</td>
<td><code>ul</code>/<code>ol</code>/<code>dl</code></td>
<td>在全局没有 <code>list-style</code>，在 .<code>typo</code> 中对齐正确</td>
</tr>
<tr>
<td>定义列表</td>
<td><code>dl</code></td>
<td>全局 <code>padding</code> 和 <code>margin</code>为0， .<code>typo</code> 中对齐正确</td>
</tr>
<tr>
<td>选项</td>
<td><code>input[type=radio[, checkbox]]</code></td>
<td>与其他 <code>form</code> 元素排版时是否居中</td>
</tr>
<tr>
<td>斜体</td>
<td><code>i</code></td>
<td>只设置一种斜体，让 <code>em</code> 和 <code>cite</code> 显示为正体</td>
</tr>
<tr>
<td>强调</td>
<td><code>em</code></td>
<td>在全局显示正体，在 <code>.typo</code> 中显示与 <code>b</code> 和 <code>strong</code> 的样式一致，为粗体</td>
</tr>
<tr>
<td>加强</td>
<td><code>strong/b</code></td>
<td>显示为粗体</td>
</tr>
<tr>
<td>标记</td>
<td><code>mark</code></td>
<td>类似荧光笔</td>
</tr>
<tr>
<td>印刷</td>
<td><code>small</code></td>
<td>保持为正确字体的 80% 大小，颜色设置为浅灰色</td>
</tr>
<tr>
<td>表格</td>
<td><code>table</code></td>
<td>全局不显示线条，在 <code>table</code> 中显示表格外框，并且表头有浅灰背景</td>
</tr>
<tr>
<td>代码</td>
<td><code>pre</code>/<code>code</code></td>
<td>字体使用 <code>courier</code> 系字体，保持与 <code>serif</code> 有比较一致的显示效果</td>
</tr>
<tr>
<th rowspan="5">特殊符号</th>
<td>着重号</td>
<td><em class="typo-em">在文字下加点</em></td>
<td>在支持 <code>:after</code> 和 <code>:before</code> 的浏览器可以做渐进增强实现</td>
</tr>
<tr>
<td>专名号</td>
<td><u>林建锋</u></td>
<td>专名号，有下划线，使用 <code>u</code> 或都 <code>.typo-u</code> 类</td>
</tr>
<tr>
<td>破折号</td>
<td>——</td>
<td>保持一划，而非两划</td>
</tr>
<tr>
<td>人民币</td>
<td>¥</td>
<td>使用两平等线的符号，或者 HTML 实体符号 <code>¥</code></td>
</tr>
<tr>
<td>删除符</td>
<td>
<del>已删除（deleted）</del>
</td>
<td>一致化各浏览器显示，中英混排正确</td>
</tr>
<tr>
<th rowspan="3">加强类</th>
<td>专名号</td>
<td><code>.typo-u</code></td>
<td>由于 <code>u</code> 被 HTML4 放弃，在向后兼容上推荐使用 <code>.typo-u</code></td>
</tr>
<tr>
<td>着重符</td>
<td><code>.typo-em</code></td>
<td>利用 <code>:after</code> 和 <code>:before</code> 实现着重符</td>
</tr>
<tr>
<td>清除浮动</td>
<td><code>.clearfix</code></td>
<td>与一般 CSS Reset 保持一对致 API</td>
</tr>
<tr>
<th rowspan="5">注意点</th>
<td colspan="3">（1）中英文混排行高/行距</td>
</tr>
<tr>
<td colspan="3">（2）上下标在 IE 中显示效果</td>
</tr>
<tr>
<td colspan="3">（3）块/段落分割空白是否符合设计原则</td>
</tr>
<tr>
<td colspan="3">（4）input 多余空间问题</td>
</tr>
<tr>
<td colspan="3">（5）默认字体色彩，目前采用 <code>#333</code> 在各种浏览显示比较好</td>
</tr>
</tbody>
</table>
<h5 id="appendix2">2、开源许可</h5>
</div>
<!--标签-->
<div class="m-padded-lr">
<div class="ui basic teal left pointing label">方法论</div>
</div>
<!--赞赏-->
<div class="ui center aligned basic segment">
<button id="payButton" class="ui orange basic circular button">赞赏</button>
</div>
<!--二维码-->
<div class="ui payQR flowing popup transition hidden">
<div class="ui orange basic label">
<div class="ui images" style="font-size: inherit !important;">
<div class="image" >
<img src="./static/imags/dashang.png" alt="" class="ui rounded bordered image" style="width:120px ">
<div>支付宝</div>
</div>
<div class="image">
<img src="./static/imags/dashang.png" alt="" class="ui rounded bordered image" style="width:120px ">
<div>微信</div>
</div>
</div>
</div>
</div>
</div>
<!--博客信息-->
<div class="ui attached positive message">
<div class="ui middle aligned grid">
<!--信息说明-->
<div class="eleven wide column">
<ul class="list">
<li>作者：beauty （联系作者）</li>
<li>发表时间：2017-10-02 09：08</li>
<li>版权声明：自由转载-非商用-非衍生-保持署名（创意恭喜</li>
<li>作者：beauty （联系作者）</li>
</ul>
</div>
<!--二维码-->
<div class="five wide column">
<img src="./static/imags/erweima.png" alt="" class="ui right floated rounded image" style="width: 110px">
</div>
</div>
</div>
<!--留言区域-->
<div id="comment-container" class="ui bottom attached segment">
<!--留言区域列表-->
<div class="ui teal segment">
<div class="ui comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="https://picsum.photos/100/100?image=111">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://picsum.photos/100/100?image=1079">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="https://picsum.photos/100/100?image=1071">
</a>
<div class="content">
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://picsum.photos/100/100?image=1062">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">回复</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-small">
<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-small">
<div class="ui left icon input">
<i class="mail icon"></i>
<input type="text" name="email" placeholder="邮箱">
</div>
</div>
<!--按钮-->
<div class="field m-margin-bottom-small m-mobile-wide">
<button class="ui teal button m-mobile-wide">
<i class="edit icon"></i>发布
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--小工具条-->
<div class="m-padded m-fixed m-right-bottom">
<div class="ui vertical icon buttons">
<button type="button" class="ui toc teal button">目录</button>
<a href="#comment-container" class="ui teal button">留言</a>
<button class="ui icon button"><i class="weixin icon"></i> </button>
<a href="#" class="ui icon button"><i class="chevron up icon"></i></a>
</div>
</div>
<!--二维码-->
<div class="ui toc-container flowing popup transition hidden" style="width: 250px !important;">
<ol class="js-toc">
</ol>
</div>
<!--底部-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container"><!--center aligned 居中-->
<div class="ui inverted divided stackable grid"><!--grid会将div分为16份布局 inverted divided模块之间的线条显示-->
<!--第一板块-->
<div class="three wide column">
<div class="ui inverted link list">
<div class="item">
<img src="./static/imags/erweima.png" class="ui rounded image" alt="" style="width:100px">
</div>
</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">关于课余练习的清单</a>
<a href="#" class="item">成功要趁早</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">Email:Everyone@162.com</a>
<a href="#" class="item">QQ:123456789</a>
</div>
</div>
<!--第四板块-->
<div class="seven wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini ">这是我的个人博客、会分享关于编程、协作、思考相关的任何内容，希望可以给来到这儿的人有所帮助……</p>
</div>
</div>
<!--第五板块-->
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2016-2017 Lirenmi Designed by Lirenmi</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="./static/lib/prism/prism.js"></script>
<script src="./static/lib/tocbot/tocbot.min.js"></script>
<script>
$('.menu.toggle').click(function (){
$('.m-item').toggleClass('m-mobile-hide');
});
/*二维码事件*/
$('#payButton').popup({
popup :$('.payQR.popup'),
on :'click',
positon: 'button 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,
});
/*目录*/
$('.toc.button').popup({
popup :$('.toc-container.popup'),
on :'click',
positon: 'left center'
})
</script>
</body>
</html>
AI写代码（5）修改tocbot.css样式
- 此时时压缩版，通过ctrl+Alt+L快捷键可格式化代码
- 格式化后
- 最后效果
六、给博客详情页面添加插件集成（二维码生成 qrcode.js）
1 、微信二维码生成
（1）添加二维码
- 二维码事件
（2）访问:https://davidshimjs.github.io/qrcodejs/
- 下载包之后拷贝js插件到qrcode子包中
（3）引入js
（4）添加事件
（5）添加id，注释掉绝对路径图片
（6）查看结果
七、给博客详情页面添加插件集成（平滑滚动 jquery.scrollTo）
1、访问：https://github.com/flesler/jquery.scrollTo
2、直接链接
3、添加平滑滚动
4、修改代码
八、给博客详情页面添加插件集成（滚动侦测 waypoints）
- 对小工具条滚动在顶部时隐藏，向下滚动就显示
1、访问：http://imakewebthings.com/waypoints/
- 下载
2、将js拷贝至waypoints子包
3、引入js
4、添加事件
5、修改代码
全部评论 (0)
还没有任何评论哟~