（九）博客详情页面(目录生成)插件集成

1,做一个绝对目录的导航

步驟：
1.使用垂直方向的buttons

<div class="ui vertical icon buttons ">
				<button type="button" class="ui teal button">目录button>
				<a href="#comment-content" class="ui teal button">留言a>
				<button type="button" class="ui  button"><i class="weixin icon">i>button>
				<a href="#" class="ui  button"><i class="chevron up icon">i>a>
			div>

2.自定义绝对位置中：

/* 为buttons设置绝对位置 */
.m-fixed{
	position: fixed !important;
	/* 由于被samatic的元素覆盖 */
	/* 所以buttons不显示 */
	/* z-index: 10 !important表示将buttons的层级调到最高*/
	z-index: 10 !important;
}
/* 设置绝对位置的坐标 */
.m-right-bottom{
	right: 0 !important;
	bottom: 0 !important;
}

3.将buttons放到一个div中设置buttons与页面边框的距离

<div class="m-fixed m-right-bottom m-padded-lr-tiny">
			<div class="ui vertical icon buttons ">
				<button type="button" class="ui teal button">目录button>
				<a href="#comment-content" class="ui teal button">留言a>
				<button type="button" class="ui  button"><i class="weixin icon">i>button>
				<a href="#" class="ui  button"><i class="chevron up icon">i>a>
			div>
		div>

**效果图

目录插件（tocbot）

步骤：
1.官网下载：https://tscanlin.github.io/tocbot/
2.（根据官网给的例子用法）引入相应的css、引入js、初始化插件

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

<script src="./static/lib/tocbot/tocbot.min.js" >script>

<script type="text/javascript">
			
			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,
			});
			
		script>

3，设置展示目录的区域

<div class="ui toml flowing popup " style="width: 250px;">
			
			<ol class="js-toc">
			ol>
		div>

此时的效果图

4.在tocbot.css中设置

/* 设置目录插件的文字格式 */
.toc-list li a{
	display: block;
	/* 间隔 */
	padding: 4px;
	/* 文字大小 */
	font-weight: 300;
}
.toc-list li a:hover{
	/* 当鼠标停在上面时的颜色 */
	color: #0000FF;
}

**效果图

二维码生成插件（qrcode）

步骤：
1.官网下载：http://davidshimjs.github.io/qrcodejs/
2.

平滑滚动插件（jQuery.scrollTo）

步骤：
1.官网下载：https://github.com/flesler/jquery.scrollTo
2.

滚动侦测插件（way.points）

步骤：
1.官网下载：http://imakewebthings.com/waypoints/
2.