最新版Next主题的如何自定义样式

问题描述

最近将HexoNext更新到了最新的版本,但是我发现最新的Next主题没有提供一个专门的配置文件给用户自定义样式.

万能的修改主题样式的方法

不过没关系,现在来介绍一个万能的修改hexo主题样式的方法.
自定义样式的第一步就是找到样式定义的位置,所以下面介绍怎样确定一个元素的CSS选择器,以及怎样找到这个CSS选择器的定义位置.

工具

  • 火狐浏览器
  • VScode

步骤

打开 查看器

在火狐浏览器中选中要修改的元素,或者子元素.然后右键,点击查看元素,这一步帮助你快速定位到要修改的区域。

最新版Next主题的如何自定义样式_第1张图片

进一步精确要修改样式的元素.

如果上一步的定位可能不准确,你需要在查看器中更进一步的选择元素.

复制css选择器

定位好元素后,复制css选择器.
最新版Next主题的如何自定义样式_第2张图片

用VScode打开Next主题的所有的样式文件

进入Next主题定义css的目录,我的是E:\Blog\blog9\themes\next\source\css,然后用Vscode打开这个目录.
最新版Next主题的如何自定义样式_第3张图片

在整个目录中搜索上面复制的选择器

然后打开VScode中的搜索框,输入刚才复制得到的选择器:a, span.exturl
最新版Next主题的如何自定义样式_第4张图片

确定是哪个文本中定义的选择器

接下来会得到一些定义了a, span.exturl这个样式的文本,这个时候需要仔细对比浏览器中的样式选择器和具体的样式内容,和每个文件中的内容,从而找到正确的位置:
最新版Next主题的如何自定义样式_第5张图片

修改样式即可

找到了定义样式的位置之后,修改此处的样式即可.

总结

最定义样式的关键就是找到定义样式的位置,所以这篇文章只是提供一个修改样式的思路:

  • 浏览器CSS查看器
  • VScode文件夹搜索

你可能感兴趣的:(hexo)