COPY博客园CSS样式

0. 背景:

今天偶然发现一个博客很好看,然后发现地址栏居然时cnblog,也就是博客园的,本以为是博客园有一个这么漂亮的皮肤,于是去皮肤里面寻找,未果。发现后台有类似于‘页面定制CSS代码’的字样,猜测可能是自己DIY的。于是打算尝试一下看能不能COPY成自己的。

1. 任务:

- COPY狂奔的蜗牛的博客样式

2. 尝试过程:

2.1 确定狂奔的蜗牛用的什么模板

未果

2.2 确定后台‘页面定制CSS代码’会不会是一个单独的文件

F12查看请求的资源里面有没有css/js的文件,通过对比发现蜗牛的博客里面多了87977.css、pace.min.js、customization.min.js几个文件。

猜测是单独的引用文件。

2.3 确定如何引用这三个文件

开始把css代码添加到页面定制CSS代码里面,同时选中禁用模板默认CSS,

结果发现博客排版错位。

通过查看副标题源代码


发现样式根本就不一样,我以为必须要同样的模板,这时候我参考了另一篇文章。那篇文章用的是LessIsMore的模板,查看副标题源代码,再查看自己的换成LessIsMore模板的源码,发现现在有了Subtitle这个CSS属性。当我尝试找出Sutitle定义在那个文件的时候我发现了这个,

这意味着我可以确认蜗牛用的是什么模板了。回头一看原来也是LessIsMore。
选好新的样式,重新保存,发现样式还是不一样,尝试取消选中的禁用模板css样式,显示正常。

2.4 补全js引用

确认模板,不勾选禁用默认CSS样式之后要做的是添加另外两个js代码。之前折腾的时候在这里添加了一句话,在源代码里面这样子显示。

查看蜗牛源代码,

发现同样的地方引用了pace.min.js。于是确认一个js是页头引用,另一个是页脚引用。

大功告成

3. PS

- 折腾发现customization.min.js是响应式布局用到的,当窗口缩小的时候会自动隐藏侧边栏。
- 发现F12对学习CSS会很有用,当时查看加载js资源文件的时候还用过F12的加载时间进度来判断这两个文件是什么时候加载的,从而猜测大体是在那个文件引用。当然这是在自己没有发现F12查看样式直接就可以看到css出处的时候干的事。
- 因为是COPY,两个js代码文件还是蜗牛的地址,要想变成自己的就把两个js文件分离出来通过后台上传到自己的文件里。然后把引用地址改成现在刚上传的。
- 主页的图片修改也是这样子
- 写到这里你也发现我不懂CSS了吧

4. 接下来的任务

- 看懂那个css文件,看懂那两个js文件

5. 引用资料

共享一下我的自定义CSS博客皮肤(2012.3)

posted @ 2015-10-21 10:42  M3iji  阅读(725)  评论(0编辑  收藏  举报