Fluid优化

前言

今天在网上copy大神的代码的时候，偶然间发现了Hexo的一个主题: Fluid。觉得比Next主题要更加大气一点。所以就顺手的更换了主题。虽然默认的设置已经完美了，但是还是有几处需要优化一下。

优化

代码块

Fluid默认的代码块非常的朴素，我们可以将其设置类似mac窗口格式的代码块。

首先在source/css目录下创建macpanel.styl文件。
并且将以下的代码写入到文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 12px

然后再主题配置文件中设置自定义css。

1
2
3
# 注意: 这里后面没有 .styl 后缀
custom_css:
  - /css/macpanel

图片阴影

在mac上使用截图的时候，一般默认添加图片的阴影。但是Fluid中又帮我们给图片添加了一层阴影，所有我们需要去除掉Fluid添加的阴影。

首先在source/css目录下创建shadow.styl文件。
并且将以下内容写入到文件中

1
2
3
4
5
.markdown-body p > img,
.markdown-body p > a > img {
  box-shadow: unset;
  border-radius: 0px;
}

然后再主题配置文件中设置自定义css。

1
2
3
# 注意: 这里后面没有 .styl 后缀
custom_css:
  - /css/shadow