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）

转载于:https://www.cnblogs.com/MeiJi/p/4897149.html