（八）博客详情页面(内容排版typo.css)插件集成

1.(内容排版typo.css)插件

步骤：

1.下载typo.css文件https://github.com/sofish/typo.css/
2.将文件中typo.css文件复制到项目中

3.根据参考下载下来的文件中的typo.html文件给“引入”博客详情页面，以下为引入的地址

<link rel="stylesheet" type="text/css" href="./static/css/typo.css"/>

4. 根据typo.html中的存放文本内容的外层div格式，也给博客详情页添加此样式

5.此时有typo和samatic有冲突，所以字体显示异常。
解决办法：给typo.css中的所有定义的样式添加.typo

6.在typo.css中调整文本字体大小的设置

.typo p{
     
	/* 字体大小 */
	font-size: 16px;
	font-weight: 300;
	/* 行间距 */
	line-height: 2;
	/* justify表示两端对齐 */
	text-align: justify;
}

7，文本中的表格响应移动端的做法：在表格外层

中加
class="ui table"

2（动画animate.css）插件

步驟：

1.下载插件文件：https://github.com/animate-css/animate.css/
2.

3（代码高量显示prism）插件

步骤：
1.到官网下载：https://github.com/PrismJS/prism
2，把下载下来的文件复制到项目中。根据项目中存放的路径来引入css和js