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

.example,.example div{text-align:left;border-radius:0!important;border:1px solid gray!important;margin:10px;padding:10px;font-size:small;color:black;}.narrow, .narrow > div{max-width:300px;}.wide, .wide > div{max-width:600px;}

Conmajia © 2018
March 9, 2018

阅读提示

本文可以作为凑字数作文的范文进行阅读.

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

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

凌乱的布局和命名

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

它来自某个默认主题的源代码，充满了无用嵌套的<div>标签，再搭配五花八门的id名字，让我恍惚间以为看到了一位套着5层廉价秋衣的淳朴大汉，秋衣上还印满了SPORT和FASHION这样图腾般的英文.

无论是id和class间游刃有余的切换，还是post_detail和postContent之类风骚的英文用法，更甚至是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>迷宫中徘徊几天后，我好歹理出了一张脑图来指引继续前行的道路.

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

删除多余的层叠`<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();

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

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