能够玩转博客园自定义的 geek,有一半最后都成为了前端大师

By Conmajia
March 9, 2018

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

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

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

凌乱的布局和命名

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

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

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

<body>
#home
#header
#blogTitle
.title
subtitle
#main
#mainContent
.forFlow
.day
.dayTitle
.postTitle
.postCon
.c_b_p_desc
.postDesc
.topicListFooter
#nav_next_page
#sideBar
#sideBarMain
.newItem
#footer
博客园博客首页 <div> 布局图

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

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

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

整理布局

在这错综复杂的 <div> 迷宫中徘徊几天后,我好歹理出了一张脑图来指引继续前行的道路.

mind map才是真正的清真

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

如果可能,我更希望它们的名字叫做abcd

删除多余的层叠 <div>

去你妈的博客园布局!

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

试验:一个冗余嵌套的 div 布局例子
全是他妈的垃圾

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();

用这样的方法回过头来对付博客园布局,就有了这样的结果.

新的首页布局,那些让人恶心的肿瘤都已经被割掉了

终于,我有了一个不是那么「网易范」的博客布局.

<body>
#home
.title
subtitle
#mainContent
.day
.dayTitle
.postTitle
.c_b_p_desc
.postDesc
#nav_next_page
#sideBar
.newItem
#footer
清真版博客园博客首页布局

垃圾玩意儿

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

如你所见,我很讨厌每篇文章下面都有评论区. 只有歇斯底里的失败者和喋喋不休的娘炮才会喜欢回帖. 事实上,我只是觉得默认的评论区太过于丑陋.

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

苍白无力的说明文字,小气无盐的按钮,以及那宛如弱智的个人 ID,无一不凸显了这个界面的拙劣. 当然功力低下如我也并不能为它换脑,唯有做几个快捷微整形以及单独设立一个留言板页面.

来自 Conmajiasay father 的自定义主题

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

能够玩转博客园自定义的 geek,有一半最后都成为了前端大师

The End. \(\Box\)

posted @ 2018-03-09 15:59 I.am.Conmajia 阅读(...) 评论(...) 编辑 收藏

© 2012-2019 Conmajia.  110 110