IT博客汇 | Butterfly美化—

Butterfly美化——小变化

JayHrn发表于 2023-12-19 09:35:28

可以通过将index_img设置成false使得首页图消失
风车标题，文章置顶

引用站外地址

文章页H1-H6样式修改

Guo Le
将[BlogSource]/themes/butterfly/source/css/custom/下面的所有css文件在[BlogSource]themes/butterfly/source/css/index.styl处进行：
1
@import 'custom/*.css'
这样一来，每个魔改方案的CSS依然可以在独立的CSS文件中找到并修改（如果是手动添加整合的话，只能用注释分割，显然很不利于后续查找修改），而在每次提交时，运行hexo g的过程中就会将所有CSS文件都整合到index.css，并且不用自己去inject啦

更改Twikoo评论区样式，在自定义样式文件引入即可

/* 自定义twikoo评论输入框高度 */
.tk-input[data-v-619b4c52] .el-textarea__inner {
    height: 130px !important;
    background-image: url("https://npm.elemecdn.com/akilar-candyassets/image/zhifeiji.gif");
}
/* 输入评论时自动隐藏输入框背景图片 */
.tk-input[data-v-619b4c52] .el-textarea__inner:focus {
    background-image: none !important;
}
/* 调整楼中楼样式 ，整体左移，贴合气泡化效果 */
.tk-replies {
    left: -70px;
    width: calc(100% + 70px);
}
/* 头像宽度调整 rem单位与全局字体大小挂钩，需配合自己情况调整大小以保证头像显示完整*/
.tk-replies .tk-avatar {
    width: 2.5rem !important;
    height: 2.5rem !important;
}
.tk-replies .tk-avatar img {
    width: 2.5rem !important;
    height: 2.5rem !important;
}
/* 回复框左移，避免窄屏时出框 */
.tk-comments-container .tk-submit {
    position: relative;
    left: -70px;
}
/* 评论块气泡化修改 */
.tk-content {
    background: #00a6ff; /*默认模式访客气泡配色*/
    padding: 10px;
    color: #fff; /*默认模式访客气泡字体配色*/
    border-radius: 10px;
    font-size: 16px !important;
    width: fit-content;
    max-width: 100%;
    position: relative !important;
    overflow: visible !important;
    max-height: none !important;
}
/* 修复图片出框 */
.tk-content img {
    max-width: 100% !important;
}
/* 修复过长文本出框 */
.tk-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.tk-content a {
    color: #eeecaa; /*默认模式超链接配色*/
}
.tk-content::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 20px;
    left: -13px;
    border-top: 2px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 15px solid #00a6ff; /*默认模式访客气泡小三角配色*/
    border-left: 0px solid transparent;
}
.tk-master .tk-content {
    background: #ff8080; /*默认模式博主气泡配色*/
    color: #fff; /*默认模式博主气泡字体配色*/
    width: fit-content;
    max-width: 100%;
}
.tk-master .tk-content a {
    color: #eeecaa;
}
.tk-master .tk-content::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 20px;
    left: -13px;
    border-top: 2px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 15px solid #ff8080; /*默认模式博主气泡小三角配色*/
    border-left: 0px solid transparent;
}
.tk-row[data-v-d82ce9a0] {
    max-width: 100%;
    width: fit-content;
}
.tk-avatar {
    border-radius: 50%;
    margin-top: 10px;
}

/* 夜间模式配色，具体比照上方默认模式class */
[data-theme="dark"] .tk-content {
    background: #000;
    color: #fff;
}
[data-theme="dark"] .tk-content a {
    color: #dfa036;
}
[data-theme="dark"] .tk-content::before {
    border-right: 15px solid #000;
}
[data-theme="dark"] .tk-master .tk-content {
    background: #000;
    color: #fff;
}
[data-theme="dark"] .tk-master .tk-content a {
    color: #dfa036;
}
[data-theme="dark"] .tk-master .tk-content::before {
    border-top: 2px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 15px solid #000;
    border-left: 0px solid transparent;
}
/* 自适应内容 */
@media screen and (min-width: 1024px) {
    /* 设置宽度上限，避免挤压博主头像 */
    .tk-content {
        max-width: 75%;
        width: fit-content;
    }
    .tk-master .tk-content {
        width: 75%;
    }
    .tk-master .tk-content::before {
        left: 100%;
        border-left: 15px solid #ff8080;
        border-right: 0px solid transparent;
    }
    .tk-master .tk-avatar {
        position: relative;
        left: calc(75% + 70px);
    }
    .tk-master .tk-row[data-v-d82ce9a0] {
        position: relative;
        top: 0px;
        left: calc(75% - 230px);
    }
    [data-theme="dark"] .tk-master .tk-content::before {
        border-left: 15px solid #000;
        border-right: 0px solid transparent;
    }
}
/* 设备名称常态隐藏，悬停评论时显示 */
.tk-extras {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.tk-content:hover + .tk-extras {
    -webkit-animation: tk-extras-fadeIn 0.5s linear;
    -moz-animation: tk-extras-fadeIn 0.5s linear;
    -o-animation: tk-extras-fadeIn 0.5s linear;
    -ms-animation: tk-extras-fadeIn 0.5s linear;
    animation: tk-extras-fadeIn 0.5s linear;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-moz-keyframes tk-extras-fadeIn {
    from {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
}
@-webkit-keyframes tk-extras-fadeIn {
    from {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
}
@-o-keyframes tk-extras-fadeIn {
    from {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
}
@keyframes tk-extras-fadeIn {
    from {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
}

部署到coding教程

引用站外地址

部署到coding教程

杜老师说

页脚美化

查看方案

将[BlogSource]\themes\butterfly\layout\includes\footer.pug全部替换：

//- #footer-wrap
//-   if theme.footer.owner.enable
//-     - var now = new Date()
//-     - var nowYear = now.getFullYear()
//-     if theme.footer.owner.since && theme.footer.owner.since != nowYear
//-       .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
//-     else
//-       .copyright!= `&copy;${nowYear} By ${config.author}`
//-   if theme.footer.copyright
//-     .framework-info
//-       span= _p('footer.framework') + ' '
//-       a(href='https://hexo.io')= 'Hexo'
//-       span.footer-separator |
//-       span= _p('footer.theme') + ' '
//-       a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
//-   if theme.footer.custom_text
//-     .footer_custom_text!=`${theme.footer.custom_text}`

#footer_icon
  a.icon_link(href="https://www.leonus.cn/" title="我的主页")
    i.iconfont.icon-dribbble-circle-fill
  a.icon_link(href="https://github.com/Lea321" title="Github主页")
    i.iconfont.icon-github-fill
  a.icon_link(href="/atom.xml" title="Rss订阅")
    i.iconfont.icon-Rss
  img.footer_logo(src='https://q1.qlogo.cn/g?b=qq&nk=553344777&s=4' onclick="btf.scrollToDest(0,500)" title="返回顶部")
  a.icon_link(href="https://res.abeim.cn/api/qq/?qq=553344777" title="联系QQ")
    i.iconfont.icon-qq
  a.icon_link(href="/wechat/" title="联系微信")
    i.iconfont.icon-weixin-copy
  a.icon_link(href="mailto:553344777@qq.com" title="发送邮件")
    i.iconfont.icon-mail4
#leonus-footer
  .footer-group
    h3.footer-title 直达
    .footer-links
      a.footer-item(href="https://www.leonus.cn/") 我的主页
      a.footer-item(href="/talk") 空间说说
      a.footer-item(href="/wallpaper") 壁纸收藏
      a.footer-item(href="/bg") 切换背景
  .footer-group
    h3.footer-title 分类
    .footer-links
      a.footer-item(href="/categories/博客相关") 博客相关
      a.footer-item(href="/categories/学习笔记") 学习笔记
      a.footer-item(href="/categories/实用教程") 实用教程
      a.footer-item(href="/categories/生活记录") 生活记录
      a.footer-item(href="/categories/随便写写") 随便写写
  .footer-group
    h3.footer-title 关于
    .footer-links
      a.footer-item(href="/about/#关于我") 关于我
      a.footer-item(href="/about/#访问统计") 站点统计
      a.footer-item(href="/archives") 文章归档
      a.footer-item(href="/update") 更新记录
  .footer-group#friend-links-in-footer
    h3.footer-title 友链
    .footer-links
      a.footer-item(href="") 随机加载中...
      a.footer-item(href="") 随机加载中...
      a.footer-item(href="") 随机加载中...
      a.footer-item(href="") 随机加载中...
      a.footer-item(href="/link") 查看更多
#footer-banner
  .footer-banner-links
    .footer-banner-left
      #runtime
    .footer-banner-right
      a.footer-banner-link(href="https://hexo.io/zh-cn/" title="框架") Hexo
      a.footer-banner-link |
      a.footer-banner-link(href="https://butterfly.js.org/" title="主题") Butterfly
      a.footer-banner-link |
      a.footer-banner-link(href="https://beian.miit.gov.cn/" title="备案号") 豫ICP备20005146号

新建[BlogSource]\themes\butterfly\source\css\cunstom\custom.css：

::selection {
    background: var(--select-bg);
    color: var(--select-fc)
}

#sta_chart, #statistic {
    font-size: 18px;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    color: var(--font-color);
    background-color: var(--card-bg);
    border: 2px solid #03a9f4
}

#sta_chart canvas {
    animation: none
}

#statistic div {
    display: flex;
    justify-content: space-between
}

#statistic div span:last-child {
    font-weight: 700
}

.toggle {
    border: none;
    overflow: hidden;
    box-shadow: 0 0 15px rgb(145 145 145 / 50%);
    border-radius: 15px
}

.toggle > .toggle-button {
    padding: 10px 20px;
    background-color: transparent;
    color: var(--font-color)
}

#footer {
    background: 0 0
}

#footer::before {
    content: none
}

[data-theme=dark] #footer::before {
    content: none
}

#footer_icon i {
    font-size: 1.8rem;
    color: var(--font-color);
    transition: .3s;
    line-height: 1.8rem;
    height: 1.8rem
}

[data-theme=dark] #footer_icon i {
    color: #e6e6e6
}

#footer_icon i:hover {
    color: #49b1f5
}

img.footer_logo {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 1rem;
    cursor: pointer;
    filter: drop-shadow(0 12px 12px #ee7d7936);
    transition: cubic-bezier(0, 0, 0, 1.29) .5s;
    transition: all .25s
}

img.footer_logo:hover {
    box-shadow: 0 0 15px #49b1f5
}

div#footer_icon {
    justify-content: center;
    display: flex;
    margin-top: 2rem;
    align-items: center
}

a.icon_link {
    margin: 1rem 27px;
    color: var(--font-color);
    line-height: 1.3rem;
    border-radius: 3rem
}

#jayhrn-footer {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    margin: 1rem auto;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding: 0 1rem
}

#jayhrn-footer .footer-group {
    min-width: 120px
}

#jayhrn-footer .footer-title {
    color: var(--font-color)
}

#jayhrn-footer .footer-links {
    display: flex;
    flex-direction: column
}

#jayhrn-footer .footer-item {
    font-size: 1rem;
    line-height: 1;
    margin: .38rem 0;
    color: var(--font-color)
}

#footer-banner {
    font-size: 1rem;
    padding: 1rem;
    color: var(--font-color);
    margin-top: 1rem;
    background: var(--card-bg);
    display: flex !important;
    overflow: hidden;
    z-index: 1002;
    transition: .3s;
    border-top: 1px solid #e3e8f7
}

#footer-banner .footer-banner-links {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap
}

#footer-banner .footer-banner-left {
    display: flex;
    flex-wrap: wrap;
    min-height: 32px;
    color: var(--font-color);
    font-weight: 700;
    white-space: nowrap
}

#footer-banner > div > div.footer-banner-left > span {
    margin-right: 1rem
}

#footer-banner .footer-banner-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

#footer-banner .footer-banner-link {
    margin-right: 1rem;
    color: var(--font-color);
    font-weight: 700;
    white-space: nowrap
}

blockquote {
    color: unset
}

svg.icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 20px
}

#universe {
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1
}

#aside-content .card-info svg {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s
}

#aside-content .card-info svg:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
}

.avatar-img {
    height: 125px;
    width: 125px
}

.social-icon svg {
    font-size: 1.5rem
}

.site-data > a .length-num {
    line-height: 2.3rem
}

#twikoo .tk-content ul {
    padding-left: 20px
}

#twikoo blockquote {
    border: none;
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 12px;
    background-color: rgba(200, 200, 200, .5)
}

[data-theme=dark] #twikoo .tk-content {
    background: rgb(70 70 70 / 65%)
}

[data-theme=dark] #twikoo blockquote {
    background-color: var(--card-bg)
}

.tk-replies .tk-avatar {
    margin-right: .5rem !important
}

.tk-expand {
    border: 1px solid #cbcbcb;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    border-radius: 12px;
    letter-spacing: 5px
}

.tk-expand:hover {
    color: #fff;
    background-color: #4c4c4c !important
}

.tk-nick.tk-nick-link {
    color: #f56c6c !important
}

#article-container a, #twikoo .el-textarea textarea::placeholder, #twikoo a {
    color: #878787
}

#twikoo .el-textarea textarea {
    min-height: 110px !important;
    background-size: 80px
}

[data-theme=dark] #twikoo .el-textarea textarea {
    opacity: .9
}

#twikoo .tk-content {
    background: rgb(235 235 235 / 60%);
    padding: 10px 15px;
    border-radius: 10px
}

#twikoo .OwO-body {
    transform: translate(0, -115%)
}

.tk-extras {
    margin: 5px 0 15px
}

.bgbox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.imgbox, .pimgbox {
    border-radius: 10px;
    overflow: hidden
}

.imgbox img, .pimgbox img {
    height: 100%;
    width: 100%
}

.pimgbox {
    height: 235px !important
}

.box, .imgbox, .pimgbox {
    display: block;
    width: 150px;
    height: 100px;
    margin: 0 10px 10px
}

#color {
    border: none;
    background: 0 0;
    width: 155px;
    height: 110px;
    margin: -5px 8px 8px;
    position: relative;
    cursor: pointer
}

#color::before {
    position: absolute;
    color: #fff;
    left: 38px;
    top: 44px;
    content: '自定义颜色'
}

.weibo-new {
    background: #ff3852
}

.weibo-hot {
    background: #ff9406
}

.weibo-jyzy {
    background: #ffc000
}

.weibo-recommend {
    background: #00b7ee
}

.weibo-adrecommend {
    background: #febd22
}

.weibo-friend {
    background: #8fc21e
}

.weibo-boom {
    background: #bd0000
}

.weibo-topic {
    background: #ff6f49
}

.weibo-topic-ad {
    background: #4dadff
}

.weibo-boil {
    background: #f86400
}

#weibo .item-content {
    text-align: center
}

#weibo-container {
    width: 100%;
    height: 140px;
    font-size: 95%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.weibo-list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap
}

.weibo-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto
}

.weibo-num {
    float: right
}

.weibo-hotness {
    display: inline-block;
    padding: 0 6px;
    transform: scale(.8) translateX(-3px);
    color: #fff;
    border-radius: 8px
}

#weibo-container a {
    color: #555
}

[data-theme=dark] #weibo-container a {
    color: rgba(255, 255, 255, .7)
}

#bber-talk, #bber-talk a {
    color: var(--font-color)
}

#bber-talk {
    cursor: pointer;
    width: 100%;
    min-height: 50px;
    background: var(--card-bg);
    padding: .5rem 1rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-weight: 700
}

#bber-talk .item i {
    margin-left: 5px
}

#bber-talk > i {
    font-size: 1.1rem
}

#bber-talk .talk-list {
    max-height: 32px;
    font-size: 16px;
    overflow: hidden
}

#bber-talk .talk-list :hover {
    color: #49b1f5 !important;
    transition: all .2s ease-in-out
}

#bber-talk .talk-list li {
    list-style: none;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

#bber-talk .bber-icon {
    line-height: 25px;
    margin-left: 8px;
    transition: .3s
}

#bber-talk .pass {
    -webkit-animation: 1s passing infinite;
    animation: 1s passing infinite
}

@-webkit-keyframes passing {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0
    }
}

@keyframes passing {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0
    }
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    margin: auto;
    top: 4px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 6rem;
    background: #eaecf2;
    border: 1px solid var(--heo-card-border);
    overflow: hidden
}

.pace-inactive .pace-progress {
    opacity: 0;
    transition: .3s ease-in
}

.pace.pace-inactive {
    opacity: 0;
    transition: .3s;
    top: -8px
}

.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: fixed;
    z-index: 2000;
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: #12c2e9;
    background: -webkit-linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
    background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
    animation: gradient 2s ease infinite;
    background-size: 200%
}

@media screen and (max-width: 768px) {
    #jayhrn-footer .footer-group {
        text-align: center
    }

    #footer-banner {
        padding: 1rem 0
    }

    #footer-banner .footer-banner-link {
        margin-right: .5rem
    }

    .footer-banner-left, .footer-banner-right {
        width: 100%;
        justify-content: center
    }

    img.footer_logo {
        display: none
    }

    a.icon_link {
        margin: 10px
    }

    #universe {
        display: none
    }

    #sta_chart {
        padding: 20px 0
    }

    #categoryBox + div {
        display: none !important
    }
}

小风车标题实现

魔改教程

更改主题配置文件_config.butterfly.yml

beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1' 原内容
  title-prefix-icon: '\f863' # 小风车样式
  title-prefix-icon-color: '#F47466'

在[BlogSource]\themes\butterfly\source\css\custom\custom.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 ;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-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: #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;
}

设置鼠标碰到标题时，小风车跟随标题变色，且像是被光标阻碍了，转速变慢。鼠标离开恢复转速。也可以设置为 none鼠标碰到停止转动。

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

更改国内不蒜子统计平台
- 修改文件layout/includes/additional-js.pug，位于 72 行左右：
  script(async data-pjax src=’//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js’)
  改为
  script(async data-pjax src='//cdn.dusays.com/bsz.js')
- 将/layout/includes/head/preconnect.pug文件中的link(rel="preconnect" href="//busuanzi.ibruce.info")改为link(rel="preconnect" href="//cdn.dusays.com")

注：部分转载自Akilarの糖果屋，本文仅为记录魔改过程