分享一款博客园皮肤及其解决方案

前言

要分享的皮肤就是您如今看到的这款，虽然还有很多瑕疵，可是这个皮肤也算是大体完成。

本皮肤彻底使用css样式，无需申请js权限，对移动端的也作了相应处理，也许您能够从其
中获得些借鉴。

固然皮肤实际上是次要的，主要是分享一下这个解决方案。

这里是github上的地址：cnblogs-skin

痛点

不少人都会使用博客园的css修改本身博客的样式，可是说实话其实在修改的过程当中会存在很多麻烦。

以我我的做为例子，最开始我使用最原始的方式修改样式。

同时开两个页面，一边修改样式，一边刷新页面。

这样致使的问题是操做麻烦，效率低，遇到缓存的状况还要强制刷新。特别是当遇到样式大改的时候还可能出现样式冲突。

因此就有了如下的解决方案。

另外:

若是是前端新手或者后端，即便对接下来的解决方案不太了解，也依然能够简单使用本解决方案制做博客园的皮肤。（前提是懂得基本的webpack，这里是入门教程）

解决方案

这里的解决方案其实是借助webpack和webpack-dev-server来作一个本地的服务器来解决问题。

关于这部分就不讲了，相信不少人都了解怎么作的。

总之经过webpack咱们能够实现模块化开发，经过webpack-dev-server咱们能够实时看到样式修改的效果。（固然这里也用了那个热加载的插件）

由于博客园可供修改的样式能够影响到三个页面：

• 博客列表页
• 博客分类列表页
• 博客详情页

因此还得借助HtmlWebpackPlugin，生成一个多页面应用，这样使得咱们在修改皮肤样式的时候能够随时切换。

那么为了样式结构更简单清晰，处理更方便，也引入了LESS。

而且，为了以后总体样式风格的改变，将一些经常使用的颜色定义为变量提取到了color.less中。

虽然本皮肤暂时只有精灵球跳动那一个动画，可是仍是单独提取了一个animation.less文件用来存放动画。

最后能够经过执行webpack命令，生成main.css文件，那里就是最后可使用的样式了。

坑点及解决方案

• 由于博客园的图片无法跨域，因此在本地生成可能存在没法加载一些图片的问题。
  * 解决方案：在chrome下，打开博客园中本身博客的页面，这样会加载到那些图片资源，而后再运行解决方案，此时能够加载到这些图片
• 由于没法修改博客园原有的html结构，将标题从文字修改为了头像时，标题文字不会消失，因此须要将标题设为空，而页面上显示的标题其实是写在样式里的
  * 更好的解决方案：实际上博客园能够定制页头和页尾，我只是单纯懒得多写代码，因此经过取巧的方式绕过了。
• 记得禁用掉博客园的默认样式哦，我还觉得blank就是什么样式都没有，哪知道仍是会有样式。

总结

也会在简书写点东西，可是仍是更喜欢博客园，由于可定制化更强一点。

完整地写一个皮肤出来其实仍是个颇有成就感的事情。

另外：

虽然都是用markdown格式书写博客，可是有时候在简书写的markdown文件，直接复制粘贴过来样式会表现得比较奇怪。这个之后有时间再修改吧。

最后还有一点小尴尬，由于按照固定的格式去书写博客才能呈现完美的效果，因此以前一些博客在二级标题和图片上可能存在样式问题，不过却是不影响阅读。