为了能让博客可用、易用及美观,这篇文章记录了对ICARUS主题中默认的样式及插件等进行个性化调整的方法和过程。

布局

主页宽度

调整之前

4-1
4-1

调整之后

4-2
4-2

主页布局

修改前

image-20200514144004513
image-20200514144004513

修改后

image-20200514144115102
image-20200514144115102

代码样式

修改前

image-20200513230838428
image-20200513230838428

修改后

image-20200513230901412
image-20200513230901412

挂件

修改前

image-20200514151908237
image-20200514151908237

修改后

image-20200514151100751
image-20200514151100751

插件

ICARUS支持的插件类型有很多,如下所示。

image-20200512204837181
image-20200512204837181

下面仅列举目前本博客选择安装的插件。

分享插件

ICARUS支持的分享插件有很多,比如AddThis,AddToAny,百度分享,Share.js等,横向比较之后,ShareThis的风格更适合本博客。

插件安装过程比较简单,ICARUS主题文档清晰明了,此处不再赘述,详情请查阅文末的参考资料。安装完成后的效果如下图。

4-5
4-5

评论插件

评论插件在DisqusValine之间,选择了更适合国内环境的Valine

安装过程比较简单,ICARUS主题文档清晰明了,此处不再赘述,详情请查阅文末的参考资料。

4-4
4-4

文章

样式修改

修改路径/themes/icarus/include/style/article.styl

/* ---------------------------------
 *    Article Summary and Content
 * --------------------------------- */
$article-font-size ?= 1.1rem

article
    &.media
        .media-content
            color: $text-light

            .title
                margin: 0
                line-height: inherit

    &.article
        .article-meta, .article-tags
            color: $text-light

        .article-meta
            overflow-x: auto
            margin-bottom: .5rem

        .article-more
            @extend .button.is-light

        .content
            word-wrap: break-word
            font-size: $article-font-size
            color: #34495E
            a
                color: #42B983
                font-weight: bold
            p
                margin-bottom: 0.4rem

            h1
                font-size: 1.75em

            h2
                font-size: 1.6em

            h3
                font-size: 1.5em
                font-weight: bolder
                margin-bottom: 0em
                color: #777777

            h4
                font-size: 1.3em
                font-weight: bolder
                margin-bottom: 0.2em
                color: #34495E
                margin-top: 0.7em
            h5
                font-size: 1em

            pre
                font-size: 1em
                font-family: Source Code Pro

            code
                padding: 0
                background: transparent
                overflow-wrap: break-word
                color: #EB7D23
                font-size: 1em
                font-weight: bolder
                font-family: Source Code Pro
                margin-left: 3px
                margin-right: 3px

            blockquote
                background-color: #ECF8F2
                border-left-color: #42B983
                margin-bottom: 0.5em
                margin-top: 1.2em
                padding-top: 0.8em
                padding-right: 0.8em
                padding-bottom: 0.8em
                padding-left: 0.8em
                &.pullquote
                    float: right
                    max-width: 50%
                    font-size: 1.15rem
                    position: relative

                footer
                    strong + cite
                        margin-left: .5em

            .message.message-immersive
                border-radius: 0
                margin: 0 0-($card-content-padding) $card-content-padding 0-($card-content-padding)
                .message-body
                    border: none

.rtl
    direction: rtl

    .level
        &, &.is-mobile
            .level-item:not(:last-child)
                margin-left: .75rem
                margin-right: 0

.thumbnail
    object-fit: cover
    width: 100% !important
    height: 100% !important

// Overflow table
.table-overflow
    overflow-x: auto

    table
        width: auto !important

        th
            word-break: keep-all

// Video container
.video-container
    position: relative
    padding-bottom: 56.25%
    padding-top: 25px
    height: 0

    iframe
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%

前后对比

修改前

修改后

参考资料

[1] ICARUS主题文档
[2] hexo主题Icarus浅度修改教程