为了能让博客可用、易用及美观，这篇文章记录了对ICARUS主题中默认的样式及插件等进行个性化调整的方法和过程。
布局
主页宽度
调整之前
4-1
调整之后
4-2
主页布局
修改前
image-20200514144004513
修改后
image-20200514144115102
代码样式
修改前
image-20200513230838428
修改后
image-20200513230901412
挂件
修改前
image-20200514151908237
修改后
image-20200514151100751
插件
ICARUS支持的插件类型有很多，如下所示。
image-20200512204837181
下面仅列举目前本博客选择安装的插件。
分享插件
ICARUS支持的分享插件有很多，比如AddThis,AddToAny,百度分享,Share.js等，横向比较之后，ShareThis的风格更适合本博客。
插件安装过程比较简单，ICARUS主题文档清晰明了，此处不再赘述，详情请查阅文末的参考资料。安装完成后的效果如下图。
4-5
评论插件
评论插件在Disqus和Valine之间，选择了更适合国内环境的Valine。
安装过程比较简单，ICARUS主题文档清晰明了，此处不再赘述，详情请查阅文末的参考资料。
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%
前后对比
修改前
修改后
