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）