美化!美化!还是美化!

只要我一闲得无聊,就会找各种炫酷的插件来玩玩

右边那个自适应目录的外观总觉得不很满意。

Before

使用的是awesome-toc1

可恶的作者完全忽略了可读性,很多变量和函数都用只一个字母表示凸(艹皿艹 )

看了看其他的果然还是Next主题的目录炫酷:

从Lippi博客偷的图

然而我是不愿意换主题也不愿意换内核的人!

好吧,手动实现!

步骤

首先awesome-toc已经实现了自响应和不同层级目录实现不同的缩进。

所以只需要根据不同等级的目录进行编号。然而我完全不想去读作者的源码,于是考虑通过后期修改来实现编号赋值。

awesome-toc会设置一个自增值来对不同目录进行缩进判断,我换用一个全局变量presetPaddingLength来控制自增的缩进距离

...
a(k).css({
    "padding-left": h(c.tagName.toLowerCase(), g, presetPaddingLength), /* padding left increment for 20px by head level*/
    "text-align": "left"
})
...

所以之后只需要判断对应自增了多少次就可以获得是第几级标题,然后通过简单的逻辑进行标题内容重赋值(我才不在乎这么点代码的效率问题)

var level1Index = 0;
var level2Index = 0;
var level3Index = 0;
$.each($('#toc li'), function( index, value ) {
    
    var paddingLength = $('#toc li')[index].style['padding-left'].split("px")[0];/* padding length */
    var elem = $($('#toc li')[index]).find('a');
    var originalTitle = elem.html();/* original title */

    if (paddingLength == presetPaddingLength) {/* Head 1 */
        elem.text((++level1Index) + '. ' + originalTitle);
        level2Index = 0;
        level3Index = 0;
    }else if (paddingLength == 2 * presetPaddingLength) {/* Head 2 */
        elem.text(level1Index + '.' + (++level2Index) + '. ' +originalTitle);
        level3Index = 0;
    }else if (paddingLength == 3 * presetPaddingLength) {/* Head 3 */
        elem.text(level1Index + '.' + level2Index + '.' + (++level3Index) + '.' + originalTitle);

    }
});

只实现了前三层标题的编号处理,后面的差不多也就这步骤

然后再修改下CSS就行了。

After

参考文献

  • 文章标题: 《嘿,这里有个闲的蛋疼的设计师》
  • 发布日期: 2016-04-20
  • 文章分类: Tech
  • 相关标签: JS