把主题升级了一下

随笔 2019-01-04 960 次浏览 次点赞

起步

利用元旦的时间将博客的主题升级了一下。最主要的内容是扩充了配色方案。一共 8 种配色,右下彩色图标可以切换:

20190104133708.png

下载地址:https://github.com/hongweipeng/GreenGrapes

多种配色

实现配色切换的有两种方式,一种是将所有的配色都放在一个css文件里面,通过后台判断控制锚点是加载 .skin-blue 还是 .skin-green ;我使用了另一个方法,每个配色独立一个 css 文件,只要控制加载 skin-blue.css 还是 skin.green.css 就可以了。

顶部 logo 调整

screenshot.png

有朋友和我说顶部的原谅色不是很好,所以我做了一些调整:

screenshot.png

感觉很不错,黑色的渐变多了一份沉寂,与背景粒子形成星星点点的效果简直是额外的收获。我顺路把背景图也换了,更匹配我的博客名。

升级依赖库

jq从2升级到3。bootstrap 从 3 升级到 4。bootstrap4 已经不使用 px 来控制字体和盒子模型的,它大多采用 rem 的方式。于是我感觉主题的字体变大了。rem 是根据根元素的字体大小的相对大小。对于任何浏览器来说默认字体大小都是 16px ,所以有 1rem = 16px ,依照这个比例进行调整即可。

更新日志

  • 提供多种配色方案;
  • 配色后台可配置;
  • 顶部logo黑色渐变;
  • 更换背景图;
  • 依赖库升级;
  • px 转换为 rem;
  • 删除多余css样式;
  • 头部头像宽度微调;

本文由 hongweipeng 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

赏个馒头吧