问题描述
最近将Hexo和Next更新到了最新的版本,但是我发现最新的Next主题没有提供一个专门的配置文件给用户自定义样式.
万能的修改主题样式的方法
不过没关系,现在来介绍一个万能的修改hexo主题样式的方法.
自定义样式的第一步就是找到样式定义的位置,所以下面介绍怎样确定一个元素的CSS选择器,以及怎样找到这个CSS选择器的定义位置.
工具
- 火狐浏览器
- VScode
步骤
打开 查看器
在火狐浏览器中选中要修改的元素,或者子元素.然后右键,点击查看元素，这一步帮助你快速定位到要修改的区域。
进一步精确要修改样式的元素.
如果上一步的定位可能不准确,你需要在查看器中更进一步的选择元素.
复制css选择器
定位好元素后,复制css选择器.
用VScode打开Next主题的所有的样式文件
进入Next主题定义css的目录,我的是E:\Blog\blog9\themes\next\source\css,然后用Vscode打开这个目录.
在整个目录中搜索上面复制的选择器
然后打开VScode中的搜索框,输入刚才复制得到的选择器:a, span.exturl
确定是哪个文本中定义的选择器
接下来会得到一些定义了a, span.exturl这个样式的文本,这个时候需要仔细对比浏览器中的样式选择器和具体的样式内容,和每个文件中的内容,从而找到正确的位置:
修改样式即可
找到了定义样式的位置之后,修改此处的样式即可.
总结
最定义样式的关键就是找到定义样式的位置,所以这篇文章只是提供一个修改样式的思路:
- 浏览器
CSS查看器 -
VScode文件夹搜索