要分享的皮肤就是您现在看到的这款,虽然还有不少瑕疵,但是这个皮肤也算是大致完成。
本皮肤完全使用css样式,无需申请js权限,对移动端的也做了相应处理,也许您可以从其
中得到些借鉴。
当然皮肤其实是次要的,主要是分享一下这个解决方案。
这里是github上的地址:cnblogs-skin
很多人都会使用博客园的css修改自己博客的样式,但是说实话其实在修改的过程中会存在不少麻烦。
以我个人作为例子,最开始我使用最原始的方式修改样式。
同时开两个页面,一边修改样式,一边刷新页面。
这样导致的问题是操作麻烦,效率低,遇到缓存的情况还要强制刷新。特别是当遇到样式大改的时候还可能出现样式冲突。
所以就有了以下的解决方案。
另外:
如果是前端新手或者后端,即使对接下来的解决方案不太了解,也依然可以简单使用本解决方案制作博客园的皮肤。(前提是懂得基本的webpack,这里是)
这里的解决方案实际上是借助webpack和webpack-dev-server来做一个本地的服务器来解决问题。
关于这部分就不讲了,相信很多人都了解怎么做的。
总之通过webpack我们可以实现模块化开发,通过webpack-dev-server我们可以实时看到样式修改的效果。(当然这里也用了那个热加载的插件)
因为博客园可供修改的样式可以影响到三个页面:
所以还得借助HtmlWebpackPlugin,生成一个多页面应用,这样使得我们在修改皮肤样式的时候可以随时切换。
那么为了样式结构更简单清晰,处理更方便,也引入了LESS。
并且,为了之后整体样式风格的改变,将一些常用的颜色定义为变量提取到了color.less中。
虽然本皮肤暂时只有精灵球跳动那一个动画,但是还是单独提取了一个animation.less文件用来存放动画。
最后可以通过执行webpack命令,生成main.css文件,那里就是最后可以使用的样式了。
也会在简书写点东西,但是还是更喜欢博客园,因为可定制化更强一点。
完整地写一个皮肤出来其实还是个很有成就感的事情。
另外:
虽然都是用markdown格式书写博客,但是有时候在简书写的markdown文件,直接复制粘贴过来样式会表现得比较奇怪。这个以后有时间再修改吧。
最后还有一点小尴尬,因为按照固定的格式去书写博客才能呈现完美的效果,所以之前一些博客在二级标题和图片上可能存在样式问题,不过倒是不影响阅读。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论