博客魔改教程总结(一)

魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣）
1.博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly.这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，如有侵权请联系删除。
2.鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。
3.本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。
4.因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。
5.本帖基于Butterfly主题进行魔改方案编写，因此请读者优先掌握Butterfly主题官方文档的内容后再来进行魔改。
6.魔改会过程常常引入自定义的css与js文件，方法见Hexo博客添加自定义css和js文件(后续引入)
博客搭建与魔改系列教程导航🚥🚥🚥
1.🥬Hexo博客搭建基础教程(一)
2.🍒Hexo博客搭建基础教程(二)
3.🥪Hexo博客搭建基础教程(三)
4.🍀博客魔改教程总结(一) ⇦当前位置🪂
5.🍚博客魔改教程总结(二)
6.🎋博客魔改教程总结(三)
7.🥕博客魔改教程总结(四)
8.🍊博客魔改教程总结(五)

仿轻笑博客背景美化

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转

轻笑Chuckle

漫天倾尘风中轻笑

请查看教程内容

一.前言
因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找

二.教程开始

在 [BlogRoot]\themes\butterfly\layout\includes\head.pug 中引入 div模块
1
2
#web_bg
#svg_bg

在自定义css里面引入以下样式

#web_bg {
    position: fixed;
    z-index: -999;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -moz-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -o-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -ms-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: linear-gradient(55deg, #0095c2 21%, #64e1C8f9 100%);
    background-attachment: local;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}
#svg_bg {
    background-image: url(https://www.myxz.top/img/background.svg);
    -webkit-background-size: initial;
    -moz-background-size: initial;
    background-size: initial;
    position: fixed;
    height: 100%;
    width: 100%;
    opacity: .2;
    background-position: center;
    z-index: -998;
}

导航栏居中教程

这里我放当前比较有效的教程

🪧引用站外地址，不保证站点的可用性和安全性

butterfly导航栏修改方案(自用方案)

安知鱼

🪧引用站外地址，不保证站点的可用性和安全性

关于Butterfly的导航栏的一些教程

Ariasakaの小窝

🪧引用站外地址，不保证站点的可用性和安全性

Butterfly的魔改教程：导航栏魔改美化

Meuicat

🪧引用站外地址，不保证站点的可用性和安全性

butterfly导航栏修改方案

莫言小栈

图标引入

这里分为两种不同位置的自定义iconfont图标
导航栏添加

🪧引用站外地址，不保证站点的可用性和安全性

菜单栏多色动态图标（店长）

Fomalhaut🥝

🪧引用站外地址，不保证站点的可用性和安全性

菜单栏多色动态图标

莫言小栈

社交添加

🪧引用站外地址，不保证站点的可用性和安全性

Social卡片彩色图标引入（店长）

Fomalhaut🥝

侧边栏美化以及侧边栏卡片美化（轻笑）

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转

轻笑Chuckle

漫天倾尘风中轻笑

请查看教程内容

前言
因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找，喜欢这个风格的可以进行CTRL+C和CTRL+V

教程开始
大部分已经有进行标识，对于以后可以进行维护

/* 侧边栏整体卡片样式调整 */
#aside-content .card-widget {
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 255, 255, 0.6);
    border-image: initial;
    transition: 0.3s;
    background: rgba(255, 255, 255, .67);
}
/* 侧边栏整体卡片文字样式调整 */
#aside-content .card-widget.card-friend-link, .card-webinfo {
    font-size: 105%;
}
/* 侧边栏整体卡片和首页文章列表样式调整 */
#aside-content .card-widget, #recent-posts>.recent-post-item {
    border-radius: 18px;
}
/* 侧边栏本人介绍卡片样式调整 */
.avatar-img {
    border-radius: 25px!important;
    box-shadow: 2.2px 2.2px 2.2px rgba(10, 207, 233, .3)!important;
}
#aside-content > .card-widget:first-child {
    clip-path: polygon(0px 0px, 100% 0px, 100% 50%, 100% 100%, 80% 100%, 75% 99%, 25% 99%, 20% 100%, 0px 100%);
}
#aside-content .card-info .author-info__name {
    font-weight: 800!important;
    font-size: 1.8em!important;
}
#aside-content .card-info .author-info__description {
    margin-top: -.2em!important;
    font-size: 16.5px!important;
    font-weight: 700;
}
.card-info-data-item:not(:last-child)::after {
    opacity: .3;
    position: absolute;
    top: 11px;
    right: 0;
    content: "";
    width: 1px;
    height: 35px;
    background: var(--font-color);
}
.site-data > a .headline {
    color: var(--font-color);
    font-size: 1em!important;
}
.site-data > a .length-num {
    margin-top: -.42em!important;
    color: var(--text-highlight-color);
    font-size: 1.4em!important;
}
/* 侧边栏其他卡片样式调整 */
#aside-content .card-widget:not(.card-info):not(#card-tuijian):before {
    content: "";
    width: 12.5px;
    background: linear-gradient(to top, transparent, #ee6363bb);
    display: block;
    position: absolute;
    left: 0;
    height: 113px;
    bottom: 27px;
}
#aside-content .card-widget:not(.card-info):not(#card-tuijian) {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 calc(100% - 52.5px), 12.5px calc(100% - 40px), 12.5px calc(100% - 50px), 0 calc(100% - 62.5px), 0 calc(100% - 82.5px), 12.5px calc(100% - 70px), 12.5px calc(100% - 80px), 0 calc(100% - 92.5px), 0 calc(100% - 112.5px), 12.5px calc(100% - 100px), 12.5px calc(100% - 112.5px), 12.5px calc(100% - 110px), 0 calc(100% - 122.5px), 0 calc(100% - 142.5px), 12.5px calc(100% - 130px), 12.5px calc(100% - 141.5px), 0 calc(100% - 154px), 0 0);
    border-left: none !important;
}

首页文章卡片美化（轻笑）

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转

轻笑Chuckle

漫天倾尘风中轻笑

请查看教程内容

前言
因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找，喜欢这个风格的可以进行CTRL+C和CTRL+V

在[BlogRoot]\source\css下新建自定义css并粘贴：

/* 首页文章卡片样式表调整 */
#recent-posts > .recent-post-item >.recent-post-info > .article-title {
    text-align: center;
}
#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap {
    text-align: center;
}
#recent-posts > .recent-post-item >.recent-post-info > .content {
    text-align: center;
}
/* QCQX 首页文章卡片设置 */
#recent-posts>.recent-post-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    height: 200px
}
@media screen and (max-width: 768px) {
    #recent-posts>.recent-post-item {
        -webkit-box-orient:vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 300px
    }
}
/* QCQX 首页文章卡片设置 */
#recent-posts > .recent-post-item .post_cover img.post_bg {
    border-radius: 12px;
    transform: none;
}

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转

轻笑Chuckle

漫天倾尘风中轻笑

教程地址

🪧引用站外地址，不保证站点的可用性和安全性

Banner随机文章展示(轻笑同款)

莫言小栈

首页文章隐藏文字

效果来源

✅来自本站，本站可确保其安全性，请放心点击跳转

轻笑Chuckle

漫天倾尘风中轻笑

请查看教程内容

这种隐藏文字的方式可以给大家展示出来，整个效果是非常可观的。

#recent-posts>.recent-post-item:hover .recent-post-info .content {
    opacity: 1;
    line-height: 1.5;
    transition: all .3s
}

#recent-posts>.recent-post-item:hover .recent-post-info {
    top: 0;
    transition: all .3s
}

#recent-posts>.recent-post-item>.recent-post-info>.content {
    opacity: 0;
    line-height: .7;
    transition: all .3s;
    bottom: 0
}

首页文章卡片美化

效果来源

✅来自本站，本站可确保其安全性，请放心点击跳转

轻笑Chuckle

漫天倾尘风中轻笑

请查看教程内容

既然已经添加了文章文字隐藏，那么就可以进行美化文章卡片

/* 首页文章卡片颜色 */
#recent-posts>.recent-post-item {
    border: 2px solid rgba(0, 255, 255, .6);
    font-size: 14.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, .67);
}
/* 首页文章卡片的图片样式 */
#recent-posts>.recent-post-item .post_cover img.post_bg:hover {
    transform: none
}
/* 首页文章卡片样式表调整 */
#recent-posts > .recent-post-item >.recent-post-info > .article-title {
    text-align: center;
}
#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap {
    text-align: center;
}
#recent-posts > .recent-post-item >.recent-post-info > .content {
    text-align: center;
}
/* QCQX 首页文章卡片设置 */
#recent-posts>.recent-post-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    height: 200px
}
@media screen and (max-width: 768px) {
    #recent-posts>.recent-post-item {
        -webkit-box-orient:vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 300px
    }
}
/* QCQX 首页文章卡片设置 */
#recent-posts > .recent-post-item .post_cover img.post_bg {
    border-radius: 12px;
    transform: none;
}
/* 首页文章卡片bar */
#recent-posts>.recent-post-item>.recent-post-info {
    padding: 0 40px;
    width: 57%
}

@media screen and (max-width: 768px) {
    #recent-posts>.recent-post-item>.recent-post-info {
        padding:2px 10px;
        width: 100%
    }
}
.recent-posts .recent-post-item .post-card-bar {
    width: 5px;
    height: 60px;
    margin: auto;
    position: absolute;
    border-radius: 30px
}
.recent-posts .recent-post-item .left+.recent-post-info+.post-card-bar {
    background: #00c4b6b6;
    right: 5px
}
.recent-posts .recent-post-item .right+.recent-post-info+.post-card-bar {
    background: #1dbfffb6;
    left: 5px
}
@media screen and (min-width: 768px) {
    #recent-posts>.recent-post-item .post_cover.left {
        padding:7px 0 7px 7px;
    }

    #recent-posts>.recent-post-item .post_cover.right {
        padding: 7px 7px 7px 0
    }
}

@media screen and (max-width: 768px) {
    .recent-posts .recent-post-item .post-card-bar {
        display:none
    }

    .ai-btn-box {
        justify-content: center
    }

    .ai-recommend .ai-recommend-item {
        width: 100%
    }

    #recent-posts>.recent-post-item .post_cover.left,#recent-posts>.recent-post-item .post_cover.right {
        transition: all .3s;
        padding: 5px 5px 0 5px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s
    }

    #recent-posts>.recent-post-item:hover .post_cover.left,#recent-posts>.recent-post-item:hover .post_cover.right {
        padding: 0
    }

    #recent-posts>.recent-post-item .post_cover img.post_bg {
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s
    }

    #recent-posts>.recent-post-item:hover .post_cover img.post_bg {
        border-radius: 12px 12px 5px 5px;
        -webkit-border-radius: 12px 12px 5px 5px;
        -moz-border-radius: 12px 12px 5px 5px;
        -ms-border-radius: 12px 12px 5px 5px;
        -o-border-radius: 12px 12px 5px 5px
    }
}

首页分类条美化

效果来源

✅来自本站，本站可确保其安全性，请放心点击跳转

轻笑Chuckle

漫天倾尘风中轻笑

🪧引用站外地址，不保证站点的可用性和安全性

魔改笔记七：分类条及外链卡片

清羽飞扬

请查看教程内容

教程基于清羽飞扬的教程和轻笑的样式进行魔改，感兴趣的可以去看。

在[BlogRoot]\themes\butterfly\layout\includes中新建categoryBar.pug

.home-catalog-bar#catalog-bar
  i.fa-fw.fas.fa-shapes
  #catalog-list(class=is_home() ? 'home' : '')
    .category-bar-item.catalog-shouye-item(class=is_home() ? 'select' : '', id="home-catalog-item")
      a(href=url_for('/'))= __('博客')
    each item in site.categories.find({ parent: { $exists: false } }).data
      .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
        a(href=url_for(item.path))= item.name
  a.category-bar-more(href=url_for('/categories/'))= __('更多分类')

然后将其添加到不同的位置，比如我这里实现了添加到分类页面等位置，配合上pjax可以做到无刷更新，效果很好，打开分类文件地址：[BlogRoot]\themes\butterfly\layout\category.pug和主页文件地址：[BlogRoot]\themes\butterfly\layout\index.pug，添加其中两行代码，去掉加号即为正常缩进。这个和原教程基本一样
注意：修改后需要将配置文件中，分类页面的主题改成index，否则不会显示。

extends includes/layout.pug

block content
  if theme.category_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.category_ui
+      #category-bar.category-bar
+        include includes/categoryBar.pug
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #category
      <div id="categories-chart" data-parent="true" style="height: 300px; padding: 10px;"></div>
      .article-sort-title= _p('page.category') + ' - ' + page.category
      +articleSort(page.posts)
      include includes/pagination.pug

extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
+    #category-bar.category-bar
+      include includes/categoryBar.pug
    +postUI
    include includes/pagination.pug