优化Volantis主题中文章页面h1—h6标签（排版更清爽）

Heson

发布于：2020年8月16日

,Volantis是一个非常优秀的主题，各种模块化的小功能让人眼前一亮。但………这个文章内容页h1、h2、h3等标签感觉都是一个样，加上昏暗的#444颜色，着实让人感觉很着急。特别是今天写这个Valine教程合集的时候，因为标题太多了，眼睛都快瞎了。赶紧优化一下！

修改h1-h6颜色

在hexo\themes\volantis\source\css\_layout文件夹下找到article.styl文件

在开头处增加h1-h6颜色参数：

//自定义参数设置
$color-h2 = #ad2121
$color-h3 = #0028bb
$color-h4 = #ad9521

以上是我加的，一般文章里不用h1标题，我就没有加进去，h5h6用的很少，我也就没加了。

加粗h1-h6

同样是article.styl文件，找到h1-h6标签样式处：

  h1
    text-align: $textalign-h1
    color: $color-h1
    margin-top: $gap-h2
  h2
   ...

给每个加上font-weight: bold，如下图：

  h1
    font-weight: bold
    text-align: $textalign-h1
    color: $color-h1
    margin-top: $gap-h2
  h2
    font-weight: bold
    text-align: $textalign-h2
    color: $color-h2
    margin-top: $gap-h2
  h3
    font-weight: bold
    text-align: $textalign-h3
    color: $color-h3
    margin-top: $gap-h3
  h4
    font-weight: bold
    text-align: $textalign-h4
    color: $color-h4
    margin-top: $gap-h4
  h5
    font-weight: bold
    color: $color-h5
    margin-top: $gap-paragraph
  h6
    font-weight: bold
    color: $color-h6
    margin-top: $gap-paragraph

或者直接在开头加