以下操作是在 icarus 主题的 4.1.1 版本下完成的。

原版 icarus 主题实在有些单调……在 icarus 的 4.1.1 版本下，如果希望加入页面的背景图片，可以按照以下步骤操作：

1、先找到 \themes\icarus\include\style\base.styl，找到 html 并将其样式修改为（添加与背景图片有关的代码）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html
    height: 100%
    -webkit-text-size-adjust: 100%
    -moz-text-size-adjust: 100%
    -ms-text-size-adjust: 100%
    text-size-adjust: 100%
+   background: url(https://www.pyli.tk/img/bg2.jpeg)
+   background-repeat: no-repeat
+   background-attachment:fixed
+   background-position:40% 40%
+   background-size: cover
+   -webkit-background-size: cover
+   -o-background-size: cover
+   -moz-background-size: cover
+   -ms-background-size: cover

2、其实上面一步就把背景图片添加好了。但页面看起来不太协调，大概是因为各模块那纯白的背景色。咋办？当然是将一些页面组件的透明度调整一下。

（1）导航栏 navbar 的透明度：可以找到 \themes\icarus\include\style\navbar.styl 文件下的 .navbar-main 并将其样式修改为（添加 background-color 样式，其实是将原有继承的 100% 不透明白变成 90% 不透明白）：

1
2
3
.navbar-main
    box-shadow: $shadow
+   background-color: #f3f4efe6

（2）各个卡片 card 的透明度修改，并使其在鼠标驻留时有颜色变化：找到 \themes\icarus\include\style\card.styl 文件下的 .card 并将其样式修改为为（添加 background-color 样式，其实是将原有继承的 100% 不透明白变成 90% 不透明白）：

1
2
3
4
5
6
7
.card
    overflow: visible
    border-radius: $card-radius
+   background-color: #f3f4efe6

+   &:hover
+       background-color: #fafafae6

（3）页面底部的透明度修改：找到 \themes\icarus\include\style\base.styl 中的 $footer-background-color ?= $scheme-main，将 $scheme-main 改为 #fff0，其实是原色的 100% 不透明改为全透明。

（4）页数及切换背景色修改：将 \themes\icarus\include\style\pagination.styl 文件开头的 $pagination-background-color 字段样式修改成所需的颜色（#f3f4efe6）即可。

（5）文章目录栏样式修改：将 \themes\icarus\include\style\widget.styl 文件代码进行如下修改（添加当前浏览标题的背景样式）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.widget
    .menu-list
        li
            ul
                margin-right: 0

        .level
            margin-bottom: 0

            .level-left, .level-right, .level-item
                flex-shrink: 1

            .level-left, .level-right
                align-items: flex-start

+       a.is-active
+           background-color: #ededed

        .tag
            background: $light-grey
            color: $white-invert

（6）文章许可声明模块：将 \themes\icarus\include\style\article.styl 的 licensing 样式做以下修改：

1
2
3
4
5
6
7
8
.article-licensing
    position: relative
    z-index: 1
    box-shadow: none
-   background: $white-ter
+   background: #e8e8e8
    border-radius: $radius
    overflow: hidden

（7）文章引用文段的背景色：将 \themes\icarus\include\style\article.styl 的 blockquote 样式修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
blockquote
+   background-color: #e8e8e8

    &.pullquote
        float: right
        max-width: 50%
        font-size: 1.15rem
        position: relative

    footer
        strong + cite
            margin-left: .5em

（8）归档页面各年份时间轴的底部白背景：将 \themes\icarus\include\style\timeline.styl 的 last-child 尾部样式修改如下：

1
2
3
4
5
6
&:last-child:after
    width: .75rem
    top: calc(1rem + 1.5 * .85rem / 2 + .75rem / 2)
    bottom: 0
-   background: $timeline-bg-line
+   background: #fff0

（9）首页各文章“阅读更多”按钮的背景色调整，可修改 \themes\icarus\include\style\article.styl 文件中的以下代码：

1
2
3
.article-more
    @extend .button.is-light
+   background-color: #e8e8e8

（完）

photo by Tirachard Kumtanom