调整了一下博客主题的样式

本博客所使用的 NexT 主题目前在 Github 上所有的 Hexo 主题中排名第一,这无疑体现了它的强大。然而当某一个博客主题过于流行时必然会导致一个尴尬的现象:大量的博客长得一模一样……

有感于此,趁着周末给博客的外观来了个“大换血”,在这里记录一下主要的修改之处吧。

注意:本文仅记录我对博客外观做出修改的地方,并不涉及具体的修改教程。

环境详情

本文修改的博客由 Hexo 3.9.0 版本生成,使用主题 NexT 7.1.0,在 Chrome 78.0.3904.108(64 位) 下对博客的 CSS 进行调整。

修改详情

博主在此之前对 CSS 一窍不通,也没有啥配色经验,本文所有的修改可以说都是使用浏览器的开发者工具“试”出来的。在这里仅对本次修改的情况做一个简单的记录。

页面功能调整

这里的“功能”特指那些 NexT 主题提供了配置项的功能,本次修改有如下功能方面的调整:

  • 开启页面加载进度动画(pace),样式使用“跳动的球”
  • 开启页面组件运动显示动画(motion)
  • 为文章页面开启阅读进度条(Reading progress bar)

页面组件圆角化

这应该是博客外观中改变得最明显的地方了。本次修改把博客页面上的主要部件都改成了圆角边框样式,主要包括以下部分:

  • 页面左侧的站点信息栏和浮动侧边栏
  • 首页文章列表中的每篇文章所在的区块
  • 文章正文内容所在的区块和文章中代码块、图片的边框
  • 文章页面的版权信息栏
  • 页面上的所有按钮和右侧的滚动条
  • 本地搜索功能弹出的显示框和它的滚动条

页面配色的修改

NexT 主题的默认配色是以黑白灰为基调的,本次修改对页面配色也进行了一些调整,目前是以蓝紫色(蓝色为主)为主基调,并在此基础上进行扩展。主要修改了以下几个部分:

  • 页面左侧站点标题处的背景颜色
  • 页面上所有超链接的颜色(不同区域有一定的差异)
  • 行内代码块的配色
  • 页面上所有的按钮和滚动条的配色
  • 文章阅读进度条和页面加载动画的颜色
  • 所有页面在 Chrome for Android 上的地址栏颜色

其他修改

除了上面这些主要部分的修改,还有一些零散的调整,主要有下面这些:

  • 在左侧浮动侧边栏的“站点概览”底端使用 js 实现了一个显示站点总运行时间的功能
  • 更换了站点标题(logo)所使用的字体
  • 对 404 页面进行了微调以适配修改后的主题
  • 为文章页面底部的标签增加了彩色背景,修改了标签页面 tagcloud 的颜色区间
  • 调整了页面底部版权信息处的样式,使 Travis CI 的 Build Status 图片能够与版权信息处于同一行
  • 通过调整 fancybox 的样式去除了文章中图片的边框
  • 通过 CSS 控制在移动(窄屏)设备上自动隐藏站点 subtitle

以上这些就是本博客目前在 NexT 主题的基础上做出的所有修改了。虽然有很多地方仍有待完善,但目前至少可以说是“基本可用”了,所以~就先这样吧~~~