NexT主题的优化与修改

修改需求

Next主题当中还内置了scheme(说明文档译为“样式”,然而并不想这么称呼,原因是可能会和后面CSS所代表的“样式”混淆),以实现“主题内的主题”。处于个人喜好,我采用的是Mist,因为相对其他两个scheme而言,Mist页面更加简洁。但是使用过程中总是对当前Mist的配色不是很满意,加之这类框架比较简单,于是萌生了修改主题的想法。

修改目标

由于对前端缺乏了解,而且没有这些代码比较详细的说明文档,所以不准备对整个页面做较大幅度的修改,仅限于页面颜色,字体大小等,也想通过修改了解一些基本的前端知识 。

框架的理解

其实到现在为止我都没有很好的理解代码文件的组织结果,但是有一点,特别是错从复杂的CSS,导致一些修改总是没有任何的用处。然而,在仔细并且反复的看了页面HTML文件后,还是能够找到一些作者意图的一些蛛丝马迹。

HMTL页面的分布结构

大体来说,作者通过区域来划分页面,然后通过CSS的类选择器来制定页面的样式。具体来说,即header,main,foot这三个标签对应页相应位置的信息。另外,不得不提的是边栏sidebar是属于Main的。
当然,相对而言,header和foot的更好理解同时内容也更少,main就比较复杂。但是,通过反复修改CSS的代码发现,基本上属于文章渲染部分的CSS基本上都集中在main标签中一个类名为posts-expand的div子标签中。所以可以想象,如果要针对页面进行修改,就需要通过CSS对posts-expand进行筛选。

CSS文件的分布

结合NexT本身带有scheme的这种的设计,我来猜测一下整个CSS文件的设计和分布。
所有的CSS文件都在文件夹blog\themes\next\source\css中,其中文件夹_schemes表示对应scheme的CSS,_variables文件夹下的CSS保存了一些例如颜色字体大小等的全局变量,_common包含了所有scheme共同使用的页面当中的CSS。另有有点奇怪的是,所有的CSS文件有以styl为后缀名,当然着并不影响使用。
更具体的CSS文件结构理解如下:

# 文件夹D:\blog\themes\next\source\css结构
├─_common # 页面布局公用文件夹
│ ├─components
│ │ ├─footer # 页脚
│ │ ├─header # 页头
│ │ ├─highlight # 代码高亮
│ │ ├─pages # archinve\tag\about页面相关
│ │ ├─post # 文章主体
│ │ ├─sidebar # 边栏
│ │ ├─tags # 标签
│ │ └─third-party # 第三方插件
│ ├─outline
│ ├─scaffolding
│ ├─_component
│ └─_section
├─_custom
├─_mixins
├─_schemes # scheme文件夹
│ ├─Mist
│ ├─Muse
│ └─Pisces
├─_variables # 全局变量
└─main.styl # CSS导入

修改的建议

虽然能够猜测的CSS文件的结构分布情况,但是修改了一些CSS之后却发现了另一个无可奈何的现实:针对同样标签CSS代码的不止一处,有些修改有用,有些修改却没有任何效果。
当然个人猜测(这显然是前端知识不足造成的…),这些重复的CSS代码(是指针对同一标签的),由于加载顺序不同,或者优先级不同,造成了有些代码是有效的,有些是无效的。
不过,经过反复测试,在_schemems\Mist文件夹下进行修改是最为理想的结果,而且一般情况下是有效的。

作业过程

Mist文件夹

首先直接给出_schemems\Mist文件夹的文件:

# 文件夹D:\blog\themes\next\source\css\_schemems\Mist结构
├─index.styl # CSS导入和其他杂项
├─_base.styl # 杂项?
├─_header.styl # 页头
├─_logo.styl # logo
├─_menu.styl # 菜单栏
└─_posts-expanded.styl # 文章主体

修改文章标题字体大小

修改文章标题字体的大小可以选择在文件_variables\base.styl中修改,即:

// Headings font size
$font-size-headings-base = 26px // 之前是24px

当然最好的方法是只针对Mist来修改,可以在文件_posts-expanded.styl中修改:

.post-title {
position: relative;
font-size: $font-size-headings-base; // 标题字体大小
font-weight: bold; // 标题加粗
}

更换页头和页脚颜色

更换页头颜色的修改位置位于_header.styl文件中,内容如下:

// Header
// 之前颜色为$whitesmoke,为了让页头和边栏颜色保持一致才选用$black-deep
.header { background: $black-deep; }

当然,修改页头颜色别忘记修改页头当中字体和下划线的颜色:

.site-title { color: white; }               // 额外添加
.logo-line-after i { background: white; } // 额外添加

由于Mist文件夹下没有_foot.styl文件,故此处有两种方法来更换页脚颜色
第一种,相对简单省时,在index.styl文件中存在有foot得相关信息,直接修改即可:

// Footer
// --------------------------------------------------
.footer {
margin-top: 80px;
padding: 20px 0;
background: $black-deep; // 背景颜色,之前的值$whitesmoke;
color: white; // 字体颜色,之前的值$grey-dim;
}

// 效果添加
.footer-inner {
margin: 0 auto;
text-align: left;
a {
color: white;
text-decoration: none;
border-bottom: none;
&:hover {
border-bottom: 1px solid white;
}
}
}

第二种修改就比较耗费精力,我没去具体测试,但是效果应该没有问题。
具体步骤是,首先在Mist文件夹下添加文件foot.styl,并写入上面的代码。然后,在index.styl文件中添加对该文件的导入:

@import "foot";

当然,至于为什么这么做就看个人理解咯。我想,似乎一个习惯比较好的程序员会倾向于后者,因为这样可以保持整体文件结构的清晰。在代码量比较少的时候(如我的这个博客)可以选择前者;但是当代码量比较大时,显然后者是更科学的的举措。
当然,对于菜单栏的修改类似,这里就省略了。

一些零碎的CSS知识

CSS选择器

看了这么多代码无需多说,最基本方式:点+类名。

.center {
background: black;
text-align: center;
}

有一点特别需要留心的是,“派生类选择”。基本形式是:点+类名+标签名。

.center td {
color: red;
background: black;
}

以上更多内容可以参考:类选择器详解

hover伪类

hover伪类的解释为:当鼠标指针浮动在某个元素上时,设置其样式。
我使用伪类,主要是基于当鼠标放在带有链接的文字上时,我需要显示一个下划线。关于这个效果的CSS实现参考代码如下:

.post-body {
p {
a {
color: blue; // 链接的字体颜色为蓝色
text-decoration: none; // 文字装饰设置为空
border-bottom: none; // 外框底部设置为空
// 当鼠标放在链接文字上时,外框底部出现一条黑线
&:hover {
border-bottom: 1px solid $link-decoration-hover-color;
}
}
}
}

参考资料

[1] CSS教程
[2] CMD生成文件夹目录结构
[3] hover伪类
[4] 类选择器详解