个人认为原Next主题的阅读效果并不是很好，长篇阅读比较吃力，但是一直苦于不会自己修改配色。虽然主题中自带了custom.styl 文件用于自定义样式，但却一直苦于不懂css 语法，一顿狂改之后花样报错，无法显示。今日碰巧在阅读reuixiy大神的文章时无意间发现了语法可以直接取自浏览器 f12 页面中styles 栏中的代码段。特在此记录，避免遗忘。
F12页面功能介绍
浏览器f12 用于查看网页源代码及源文件。对我这个小白来说，使用最多的是Element,Sources,Network 选项，位置已在下面圈出。我们需要提取的代码，位于Element 选项之下的styles 选项。在点击Element 之后，下面有两栏，左侧栏为源代码，右侧栏对应的为样式。
1.Element栏
Element栏为源码页面。本页面的存在，让我们在第一次想添加某些东西的时候，能够直接编辑源码，免刷新查看效果，使用时先点击F12后，页面左上角的选择按键，之后在想插入的大概位置点击一次， Element中便会切至该位置源代码，而后右击代码，选择Edit as HTML即可编辑源代码。在确定添加之后，再编辑本地文件添加代码，保存本地源代码。可避免我们重复打开本地文件的繁琐操作。
Element同样适用于对样式的测试修改，在选择按键选中需要测试样式的位置，在Element右侧栏中，可以找到background，font，size，color等词，可以直接双击修改，颜色可以点击小色块进入色板修改，也可以直接输入色号，甚至可以通过拾色器拾取，此操作可以快速更改界面颜色，字体等基本样式，快速查看效果。个人最为常用。
Element右侧的样式栏也可点击如下位置，进入网页css源文件进行查看编辑，但是大部分的网站都会进行代码压缩处理，压缩处理之后的代码只有一行，非常不方便阅读。这就是我一直卡在了css修改的主要原因。为了方便自己阅读，我一直没有使用代码压缩。直到现在，我发现了其实在styles 中分节显示出来的代码完全符合css格式。这对我个人来说算是一个不小的发现。而后就开始着手对css的进行修改，设置方法会在后面提到。
2.Sources栏
Sources栏为站点当前页源文件列表，包括：index.html,css,images,js/scr等源文件。可以跟云文件管理器一样，对这些源文件进行编辑，保存到本地等操作。在参考其他站点制作页面时，便可以到这里进行详细的查阅。保存到本地的操作直接对文件右击即可。
注意：在浏览器中编辑的所有内容都是临时更改，刷新之后便会恢复到之前的状态，为避免重复操作，慎重刷新。另：在此编辑文件，同样遵循普通编辑器的使用方法，如ctrl+z 等快捷键也可以正常使用。
3.Network栏
Network栏为加载过程详细情况，需要刷新才能查看。本栏也有左右两栏可以操作。左侧栏为加载内容列表，将会列出已加载的全部内容，加载时出现了问题的会以红字显示出来。在顶部查找框的右侧，可以对左侧栏的文件内容进行筛选过滤，按照文件类型/文件格式进行过滤，eg：JS为js文件，img为所有的照片格式文件，Font字体文件，及DOCword文档等。
侧栏是对左侧栏的详细描述，在左侧栏中选中一个文件之后自动打开，右侧栏中包括：Headers ,Preview ,Response ,Timing 四项。Headers项包含文件来源地址及运行情况，Preview及Response为源码，Timing为详细的加载时间。常用的是通过Headers项检查加载发生错误的项，检查来源地址。如果有使用代码压缩加速，则在此对比文件载入时间进行核查。
具体使用方法
当要修改某一个样式的颜色的时候，先在F12 页面，点击选择按钮，然后选择想要修改样式的位置，尽量选择精确一点。然后看对应的styles 表。就可以临时更改该样式的配色，选择左边的拾色器，可以从原网页中拾取颜色，也可以直接从色盘中选择新的颜色。在确定好颜色之后，可直接将该栏复制下来，粘贴到custom.styl 文件中即可（注意完整复制）。如下所示：
1 | blockquote.red { |
当只更改了一项时，可以把其他的项进行删除，如只更改了颜色，则只保留``color`` 项即可，此方法同样适用于对字体及其他样式的修改。
