hexo主题自定义样式
前言
前一阵子忙信安竞赛为了搭一个平台又去重新学习了一下前端知识。对于自己博客的样式觉得总是差点什么。于是打算自主来修改博客样式。
一、了解博客样式规则
这里只是大致说一下博客的样式的形成（具体的前端知识不提了也说不过来）。在此拿hexo的主流主题next为例。
首先我们打开开发者工具（F12）
其中可以看到各种样式规则。其中我们主要关注main.css 这里几乎包揽了整个博客页面的样式。
这个文件我们可以找一下，会发现博客路径下其实是有两个main.css的，如下图：
这个就是我们见到的main.css的源文件了，有2.9k行+
（当然如果直接改这个文件是不行的。）看下图：
在主题文件目录下还有一个main.styl，里面import了当前目录下的几个子目录中的样式文件。
可以这么理解，除去博客基本的样式以外，还会从主题目录下引用来各种css文件。这也就是为什么直接改main.css没用，就算改了，部署一下又变成原来的。
在主题文件下面有一个custom.styl的文件。这是官方留给我们自定义样式的。（如果第三方主题的话应该也会留有自定义样式的位置或者直接在源文件上改之类的，具体可以Google/百度下）
另外，自己新建一个css样式也是可以的，新建一个css样式，写上自己的样式在里面，再在模板文件中调用，也可以实现，也方便自己管理，也不会干涉以前的样式，调用自己的样式文件，之前的样式文件就会被覆盖，如果有的个别没被覆盖的话，可以在属性后面加上！important，提高权重（不建议滥用）。这种方法需要会HTML、CSS、甚至JavaScrip。前两个会的话也能修改大部分样式了。
PS：就像custom.styl一样，为什么我们自己写的css能够作用于页面？或者说为什么它能覆盖原有样式。这是因为我们在引用custom.styl的时候是在最后。即最后生成的main.css中自定义的样式也是在最后的。
这就是为什么自己写的样式2938行能覆盖掉2625行的原有样式。
二、调试工具
F12是个好东西…web的方方面面都用得上。
打开博客页面，找到你想修改的地方的样式（这里需要一点点前端知识），右键—>查看元素。会自动定位到相应的dom节点。
我们在这里直接修改完样式，调式到自己满意后再去自定义样式里添加就行了。如果要改js也类似一样的思路。不过个人而言改css已经能满足绝大部分需求了。
PS： 我们需要找到具体要修改部分的样式文件（有时候右键审查会点击位置不准确），要了解比如说修改头部的样式一般是含header字样的文件，底部的样式是footer，侧边栏是menu，文章模板是post，等（有的可能也不一样，因主题而议）。
三、模板更改
如果需要大改，即整个页面模板的调整，有一种方法就是去网上找一些好的模块样式，直接用调试工具，把他当内容和样式内容全部拷贝下来，在写入适当的文件中就行了。
注意：其实最重要的就是要找到你的主题中那一个文件是控制那一部分样式的，而文件的命名大多数都是那几个专属名字，不知道可以百度，一般文件是在layout文件夹下面，只需要修改这里面的文件的内容就可以了，一般内容不用动，只增加样式就行了，他会覆盖之前的样式。比如我的layout下面：
.swig文件都是一些模块的模板文件（模板说白了就是指定一些替换参数），这也是一种修改样式的方法。有需求的可以试试。