使用 Content Index 和简单的前端技术自定义文章索引

前言

当文章越写越长时，我们需要一个文章索引。Content Index For Wordpress 就是一个精简却十分强大的文章索引插件：

这个插件可以自定义的项目很多，界面也十分简洁，但却有一个问题：索引被钉死在文章里，在有些情况下会出现如上图的大片空白，浏览到文章中部的时候也无法快速的进行导航。

我没有学习过PHP，所以我翻了半个小时的插件代码，也没有搞清楚怎么修改索引的位置。

不够办法总是比困难多，由于插件是PHP代码，所以在网页被加载的时候，所有的内容已经被计算出来了。虽然我无法改变它的DIV位置，但我可以复制一个啊，然后再把原来的DIV隐藏掉就好了。

顺着这个思路，问题便迎刃而解：

在侧边栏添加索引

在侧边栏中添加自定义HTML

<div id="content-index2"></div>
<script>
	var nodeindex=document.getElementById("content-index").cloneNode(true);  /*复制整个索引*/
	document.getElementById("content-index2").appendChild(nodeindex);  /*插入到新建的DIV中*/
</script>

添加上之后，索引就出现在侧边栏了。但是现在样子还不好看，我们需要一些CSS微调。在自定义——额外CSS中添加：

#content-index{
	display:none;
}
#custom_html-15{   /*这个是你添加自定义HTML的id，需要在浏览器开发者工具中查询*/
	margin:0px;
	padding:0px;
}

一个侧边栏索引就做好了。

在手机端顶部菜单添加索引

由于我这个主题的手机端把侧边栏移动到了文章下部，使用手机浏览时，索引菜单就变的毫无用处。比较流行的做法是将索引添加到顶部展开菜单中。

顶部菜单不能添加自定义HTML，因此需要到主题的footer.php中自定义。在最下方 </body> 前添加代码：

<script>
	$("#nav-mobile .container").append("<div class='nav container-inner group' id='mobileindex2'></div>");
	var nodeindex2=document.getElementById("content-index").cloneNode(true);
	document.getElementById("mobileindex2").appendChild(nodeindex2);
</script>

然后进行美化：

@media screen and (min-width:480px){#content-index2 #content-index{
	display:block !important;
	max-width: 280px !important; 
	width:255px;
	margin:30px 30px 20px 30px;
	}}
@media screen and (max-width:479px){#content-index2 #content-index{
	display:none !important;
	}}

@media screen and (max-width:479px){
	#mobileindex2 .content-index{
		display:block;
		max-width: 100%;
		width:100%;
		background-color:inherit;
		border-width: 1px 0 0 0;
		border-color:#5facae;
		padding: 12px 0 12px 0;
		
	}
	#mobileindex2 .content-index-title{
		font-size:15px;
		font-family: 'Source Sans Pro', Arial, sans-serif;
		color:rgba(255,255,255,0.9);
		font-weight: 400;
		padding: 0 13px 0 13px;
	}
	#mobileindex2 ul{
		padding:0 0 0 0;
	}
	#mobileindex2 a{
		font-size:15px;
		color:rgba(255,255,255,0.9);
	}
	#mobileindex2 .content-index-level-1>a{
		padding-left:20px;
	}
	#mobileindex2 .content-index-level-2>a{
		padding-left:30px;
	}
	#mobileindex2 .content-index-level-3>a{
		padding-left:40px;
	}
	#mobileindex2 .content-index-level-4>a{
		padding-left:50px;
	}
}

来看看效果：