能够玩转 BKY 皮肤的 geek ，有一半最后都成为了前端大师

By Conmajia
March 9, 2018
⚠️ 由于安全设置，本文已禁用互动功能

剩下的那一半全部扑街了。

世纪之初，BKY那些花里胡哨的预设皮肤曾经让初识网络的懵懂学子雀跃不已。然而以现在的审美眼光看来，这些带着一股子扑面而来的浓厚乡土气息的丑陋界面，根本就是网络泡沫时代留下的泛着油光的渣滓。当你深入了解隐藏在它们身后的拙劣代码之后，一阵阵波澜起伏的悸动不停在你的胃中翻腾。

所幸BKY留出了几乎不加限制的自定义皮肤接口，使得闲极无聊的博主们能有机会给自己的页面做上一套完整的 facelift。我也曾尝试过修改博客皮肤，可是这种狂热式的冲动在我打开网页源代码的几乎同一瞬间即告分崩离析。

凌乱的布局和命名

记得我在初学 HTML 的时候，只会在 Dreamweaver 里用复杂的 <table> 来排列各个页面内容。某天一位号称浸淫网络世界多年的大神看不过去，像兜售黄色影碟的小贩一样把我拉到无人处，用只有我们俩能听到的声音悄悄告诉我有一个叫 division 的好东西可以拿来排版。从此我的网页上开始出现了 <div> 的曼妙身姿。一个、两个、三个，年岁渐长，<div> 也见长，终于我迷失在错综复杂的布局中，完全不记得谁是谁了。从那时起，一种莫名的崇拜之情就深深植根在我心底。在我看来，那些完全使用 <div> 布局的页面，无一不是出自大师之手，直到我在博客的页面上点击了「查看源代码」为止。

▲ 我脆弱的信仰被残忍的击碎

它来自某个默认皮肤的源代码，充满了无用嵌套的 <div> 标签，再搭配五花八门的id名字，让我恍惚间以为自己看到的是一名套着 5 层廉价秋衣的淳朴大汉，上面印满了 SPORT 和 FASHION 这样图腾般的英文。无论是 id 和 class 间游刃有余的切换，还是 post_detail 和 postContent 之类风骚的 naming，更甚至是 c_b_p_desc 这样的后现代主义符号具像化，任何一个都能把我可怜的英文思维折磨得体无完肤。于是我只好沿着一个一个的 <div> 摸索过去，试图能在洋洋洒洒的代码汪洋里找到一盏指路的灯塔。可是当我最终整理出了页面的布局之后，现实却结结实实地抽了我一个大嘴巴子。

▲ 默认的布局

这美轮美奂的布局，挟带着网易新闻评论区的腥风血雨，终于完全赤裸地呈现在了我眼前。

▲ 网易评论区，每一个键盘侠心目中的圣城麦加

那层层叠叠的框架像是一圈一圈的年轮般疯狂生长，迅速占满了我那点可怜的脑容量，将我击晕在地。悠悠醒转后，我默默地关上电脑，以近乎修枯禅的虔诚沉思了三天三夜，终于决定先从整理布局开始做起。

整理布局

在这荆棘遍布的 <div> 迷宫中徘徊几天后，我好歹理出了一张脑图来指引继续前行的道路。

▲ mind map才是真正的清真

我一面抗拒着充满魔性的标签命名，一面标记出那些多余的 <div>。相信我，这绝对是一个痛苦的过程，尤其对我这样可悲的强迫症患者来说，需要在思考的同时，努力压制住挖出BKY这些前端工程师早逝的英语老师鞭尸的强烈想法。

▲ 如果可能，我更希望你他妈能叫它们a、b、c、d

删除多余的层叠 <div>

据科学家统计，网络喷子的记忆只有 7 秒，为了在这短暂的 highlight 里完成验证，我给自己准备了一个简单的例子。

▼ 试验：一个例子

全是他妈的垃圾 删除废物

Node 1 Node 1-1 Node 1-1-1 Node 1-1-1-1 Node 1-1-1-2 Node 1-2 Node 1-3

果断删除废物，爱护环境，清理垃圾，人人有责。

$('#node1-1-1').insertBefore($('#node1-1-1').parent());
$('#node1-1').remove();

▲ 那些让人恶心的肿瘤都割掉了

终于，我有了一个不是那么「网易范」的布局。

▲ 清真版博客首页布局

垃圾玩意儿

我的脆弱只有你知道／刻骨的痛苦没有救药

如你所见，我其实很讨厌每篇文章下面都有评论区。可是，只有歇斯底里的失败者和喋喋不休的娘炮才会喜欢回帖。当然，事实上，我只是觉得默认的评论区太过于丑陋，完全不好意思放出来。

▲ 我读小学3年级的侄子认真地问我可不可以拿这个模板当他的计算机课作业

苍白无力的说明文字，丑陋不堪的按钮，以及那宛如弱智的个人 ID，无一不凸显了这个界面的拙劣。当然功力低下如我也并不能为它换脑，唯有做几个快捷微整形而已。

▲ 来自 Conmajiayour daddy 的自定义皮肤

一番折腾之后，我已经累得全身大汗淋漓，即将虚脱的前一秒，我似乎听到有人在说：

能够玩转BKY自定义的 geek，有一半最后都成为了前端大师
滚你妈的吧！

The End. $\Box$