使用 Content Index 和简单的前端技术自定义文章索引
1,162 Views
前言
当文章越写越长时,我们需要一个文章索引。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; } }
来看看效果:
