🔔说明：在修改或添加样式的时候，一定要单独定义css文件，并将其放置于根目录中，不要与主题文件的样式代码混写，否则，一段时间后，主题一旦需要更新，自定义的样式就会被新主题样式覆盖。

图标修改

添加css样式文件

在根目录的 source 文件夹下新新建一个 css 文件夹，并新建一个title.css文件

添加在根目录下的css文件，最终会生成到可执行文件中，即使更新主题的时候，也不会有影响😉

添加对css样式的引用

在_config.butterfly.yaml的inject节点下，添加引用

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/title.css"> # title样式

更换风车图标

原始的butterfly主题的标题样式，是曲别针样式

在_config.butterfly.yaml中修改beautify节点

代码如下：

beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: '\f863' # 图标样式
  title-prefix-icon-color: '#F47466' # 图标颜色

风车旋转

风车样式 css

将下面的代码添加到title.css文件中

/* 文章页H1-H6图标样式效果 */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    -webkit-animation: ccc 1.6s linear infinite ;
    animation: ccc 1.6s linear infinite ;
}
@-webkit-keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}
@keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

配置H1~H6标题的颜色

同样添加到title.css中

/* 标题颜色 */
#content-inner.layout h1::before {
    color: #ef50a8 ;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
}
#content-inner.layout h2::before {
    color: #fb7061 ;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
}
#content-inner.layout h3::before {
    color: #ffbf00 ;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
}
#content-inner.layout h4::before {
    color: #a9e000 ;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
}
#content-inner.layout h5::before {
    color: #57c850 ;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0.0rem;
}
#content-inner.layout h6::before {
    color: #5ec1e0 ;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0.0rem;
}

修改当鼠标经过风车时的样式

同样添加到title.css中

/* 标题hover样式 */
#content-inner.layout h1:hover, #content-inner.layout h2:hover, #content-inner.layout h3:hover, #content-inner.layout h4:hover, #content-inner.layout h5:hover, #content-inner.layout h6:hover {
    color: #49b1f5 ;
}
#content-inner.layout h1:hover::before, #content-inner.layout h2:hover::before, #content-inner.layout h3:hover::before, #content-inner.layout h4:hover::before, #content-inner.layout h5:hover::before, #content-inner.layout h6:hover::before {
    color: #49b1f5 ;
    -webkit-animation: ccc 3.2s linear infinite ;
    animation: ccc 3.2s linear infinite ;
}