查看: 25536|回复: 57756
打印 上一主题 下一主题

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

[复制链接]
大众麻将在线
跳转到指定楼层
楼主
发表于 2019-01-24 04:29:58 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式

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


前言

要分享的皮肤就是您现在看到的这款,虽然还有不少瑕疵,但是这个皮肤也算是大致完成。

本皮肤完全使用css样式,无需申请js权限,对移动端的也做了相应处理,也许您可以从其
中得到些借鉴。

当然皮肤其实是次要的,主要是分享一下这个解决方案。

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

痛点

很多人都会使用博客园的css修改自己博客的样式,但是说实话其实在修改的过程中会存在不少麻烦。

以我个人作为例子,最开始我使用最原始的方式修改样式。

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

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

所以就有了以下的解决方案。

另外:

如果是前端新手或者后端,即使对接下来的解决方案不太了解,也依然可以简单使用本解决方案制作博客园的皮肤。(前提是懂得基本的webpack,这里是入门教程)

解决方案

大致结构

这里的解决方案实际上是借助webpackwebpack-dev-server来做一个本地的服务器来解决问题。

关于这部分就不讲了,相信很多人都了解怎么做的。

总之通过这两个webpack我们可以实现模块化开发,通过webpack-dev-server我们可以在实时看到样式修改的效果。(当然这里也用了那个热加载的插件)

因为博客园可供修改的样式可以影响到三个页面:

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

所以还得借助HtmlWebpackPlugin,生成一个多页面应用,这样使得我们在修改皮肤样式的时候可以随时切换。

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

并且,为了之后整体样式风格的改变,将一些常用的颜色定义为变量提取到了color.less中。

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

最后可以通过执行webpack命令,生成main.css文件,那里就是最后可以使用的样式了。

坑点及解决方案

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

总结

也会在简书写点东西,但是还是更喜欢博客园,因为可定制化更强一点。

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

另外:

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

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

当前文章:http://www.fstdn.com/201872139.html

发布时间:2019-01-24 08:58:49

现金翻牌机 玩三公拉丝扑克出老千 全民捕鱼赢话费版 黑客破解手机棋牌软件 欢乐麻将玩法血战到底 wonderboom 怎么买球 搜狗游戏大厅官方下载 手机3d电影 苹果怎么下载哈灵麻将

编辑:徒道

点击获取礼包
亅亅斗地主赢话费2019
沙发
发表于 2019-01-24 02:12:04 | 只看该作者
连她们自己都没注意到,短短时间她们两人已经开始将自己当成刘皓这边的人,开始有归属感了。
回复 支持 反对

使用道具 举报

发牌程序
板凳
发表于 2019-01-24 06:26:08 | 只看该作者
“来,为冒险者准备欢宴。”伊卡莱姆大声说道,带着刘皓一行人走进了一间房子里面,在入夜的时候已经准备了大量的酒菜,那个气氛真的好像是宴会一样,起码将可雅这个涉世不深的小姑娘给蒙骗过去了,而诺琪高一开始也差点被忽悠过去。http://www.fstdn.com/array/38b5wxeal6.html
回复 支持 反对

使用道具 举报

p2p理财平台哪个好
地板
发表于 2019-01-24 09:54:24 | 只看该作者
一股从来没有过的怒火向李隆基猛扑而来,他做了四十年的皇帝,第一次听到有人要夺他的皇位,而且这个人还是百年前建成太子的后人,一直隐瞒着他,被他一步步送上高位的手握二十万大军的边疆大员,这个人要夺他的皇位,这种被欺骗的怒火几乎要将他的心烧化了,这一刻,独孤明月已经不重要了,重要的是他的皇位,他看得比生命还重的皇位就像一把大锤,重重地砸在他苍老的胸脯上.
回复 支持 反对

使用道具 举报

全民直播平台官网
5#
发表于 2019-01-24 10:22:53 | 只看该作者
池语走到一处阳台停了下来,这里能够俯览整个曼哈顿。太阳此时正在缓缓的升起,旭曰的光芒从玻璃照进来,洒满了余晖。
回复 支持 反对

使用道具 举报

韩栋版鹿鼎记演员
6#
发表于 2019-01-24 00:54:25 | 只看该作者
“狐狸”和手下的通讯兵兄弟们的本事还真不是盖的,他们很快就恢复了跟黄军长他们的联络,并且通上了话,电话里黄军长神情激动,扯着嗓子连连喊道:“韩老弟在吗?我要亲自跟韩老弟说话!”
回复 支持 反对

使用道具 举报

棋牌充值
7#
发表于 2019-01-24 09:36:34 | 只看该作者
没有搂住女儿,宁风致不禁一惊,他虽然是辅助系魂师,但高达七十多级的庞大魂力对他的身体也有着极强的改造,比普通人要强得多了。
回复 支持 反对

使用道具 举报

万豪手机电玩安卓
8#
发表于 2019-01-24 02:15:13 | 只看该作者
“自然不是!他所说的,也只诛仙四剑真存于世上,其余都是讹传。”
回复 支持 反对

使用道具 举报

扬州棋牌游戏下载
9#
发表于 2019-01-24 03:43:19 | 只看该作者
“奴就是正王特勒。无颜见天可汗帐下节度使大将军,请大将军治罪!”
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

天鸿德州扑克官网是互联网最大的搜索引擎优化研究中心,是致力于培养学员用户体验意识和提供专业技术解答的专业培训机构, 成立于2007年,2008年第一家入驻歪歪的培训机构,2014年成为腾讯课堂战略合作机构。
© 2007-2016 天鸿德州扑克官网 湘ICP备13004652号-1 Powered by Discuz!X  Template by 天鸿德州扑克官网 
快速回复 返回顶部 返回列表