4-1 多级标题标题风车图标

🖼 所有搭建博客的汇总在这里：Blog全程搭建

在主题配置文件打开页面美化

# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"

1、配置css

在主文件夹下的source/css/文件夹下新建color@1.0.0.css和custom@1.0.0.css两个文件夹

color@1.0.0.css

/* 日间模式页面调整 */
[data-theme=light] {
    --card-bg: rgba(255,255,255,.9) !important; /* 全局背景调整 */
}

/* 夜间模式页面调整 */
[data-theme=dark] {
    --card-bg: rgba(26, 27, 29, .9) !important; /* 全局背景调整 */
    --btn-bg: #012c48 !important; /* 页面所有按钮夜间背景色 */
}

custom@1.0.0.css

/* 文章页H1-H6图标样式效果 */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    -webkit-animation: ccc 3s linear infinite ;
    animation: ccc 3s 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)
    }
}

#content-inner.layout h1::before {
    color: #ff6699; /* 粉红色 */
    margin-left: -1.25rem;
    font-size: 1.7rem; /* 调整为 1.5rem */
    margin-top: -0.08rem; /* 减小间距为 -0.08rem */
}

#content-inner.layout h2::before {
    color: #ffd700; /* 金色 */
    margin-left: -1.15rem;
    font-size: 1.6rem; /* 保持为 1.5rem */
    margin-top: -0.08rem; /* 保持为 -0.08rem */
}

#content-inner.layout h3::before {
    color: #66cc99; /* 青色 */
    margin-left: -1.05rem;
    font-size: 1.5rem; /* 保持为 1.5rem */
    margin-top: -0.28rem; /* 减小间距为 -0.28rem */
}

#content-inner.layout h4::before {
    color: #99cc00; /* 酸橙绿色 */
    margin-left: -0.95rem;
    font-size: 1.4rem; /* 保持为 1.5rem */
    margin-top: -0.28rem; /* 保持为 -0.28rem */
}

#content-inner.layout h5::before {
    color: #3399cc; /* 蓝色 */
    margin-left: -0.85rem;
    font-size: 1.3rem; /* 保持为 1.5rem */
    margin-top: -0.08rem; /* 保持为 -0.08rem */
}

#content-inner.layout h6::before {
    color: #ff6666; /* 深红色 */
    margin-left: -0.75rem;
    font-size: 1.2rem; /* 保持为 1.5rem */
    margin-top: -0.08rem; /* 保持为 -0.08rem */
}


#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 ;
}


/* 页面设置icon转动速度调整 */
#rightside_config i.fas.fa-cog.fa-spin {
    animation: fa-spin 5s linear infinite ;
}


/*#web_bg {*/
/*    background: var(--card-bg) !important; !* 慎用!important *!*/
/*}*/

2、引入css

在主题配置文件引入两个文件

# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/custom@1.0.0.css">
    - <link rel="stylesheet" href="/css/color@1.0.0.css">