本着避免重复造轮子的原则,该教程记录了博主部分对网站的原创自定义美化魔改,同时也包括 f12 扒取其他优秀博主样式的部分。

食用教程前,建议先看一下《教程&笔记常量申明》,且所有修改对缩进格式等有严格要求。

点击查看更新日志

更新日志

2022-6-30

  • 优化了【首页置顶文章轮播组件】,采用模板方式调用_data 文件夹里 yaml 文件的数据

2022-3-16

  • 侧边小组件——土味情话

2022-3-08

  • 光标框选文字颜色

2021-8-12

  • 侧边 Sticky 组件随页面上下滚动而微移的 Bug

2021-6-14

  • 首页置顶文章轮播组件

2021-6-03

  • 更改文章 h1~6 级标题前 icon 图标

2021-4-30

  • 右下角返回顶部按钮

2021-4-28

  • 深浅模式下分别使用不同网站背景
  • 首页公告栏轮播组件

深浅模式下分别使用不同网站背景

  1. 修改<BlogRoot>\themes\butterfly\_config.yml,其中background_dark参数为深色模式下的图片地址。

    1
    2
    3
    4
    5
    # Website Background (设置网站背景)
    # can set it to color or image (可設置圖片 或者 顔色)
    # The formal of image: url(http://xxxxxx.com/xxx.jpg)
    background: url(<FilePath>)
    +background_dark: url(<FilePath>)
  2. 修改<BlogRoot>\themes\butterfly\source\css\var.styl,在第 36 行左右

    1
    2
    3
    $web-bg = hexo-config('background') && unquote(hexo-config('background'))
    +$web-bg-dark = hexo-config('background_dark') && unquote(hexo-config('background_dark'))
    $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
  3. 修改<BlogRoot>\themes\butterfly\source\css\_mode\darkmode.styl,在第 41 行左右

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    +   #web_bg
    + background: $web-bg-dark
    - #web_bg:before,
    #footer:before,
    #page-header:before
    position: absolute
    width: 100%
    height: 100%
    background-color: alpha($dark-black, .7)
    content: ''

拓展

若你想像我一样使用四方连续风格图片(即重复图片)且能正常显示 repeat 效果,则继续按照下方更改

  1. 修改<BlogRoot>\themes\butterfly\source\css\_global\index.styl,在第 64 行左右

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    if $web-bg
    #web_bg
    - position: fixed
    + position: absolute //此处可控制背景是否能跟随滑轮滚动,按需选择是否更改
    z-index: -999
    width: 100%
    height: 100%
    background: $web-bg
    - background-attachment: local
    - background-position: center
    - background-size: cover
    - background-repeat: no-repeat

首页公告栏轮播组件

开发背景

看了洪哥的首页哔哔轮播组件,心里痒痒的想整,奈何自己早已转战 leancloud 版哔哔,于是看着月益增多的公告栏突然灵机一动,寻思着把每一条公告通过轮播组件来实现会不会更好,而且右侧组件又可以腾个位置了,于是开始一天摸鱼的行动,终于扒完了。

来康康我删前的右侧公告栏 👇,太占面积了,加了滚动条还是觉得长,而且信息不容易被访客捕捉到

预览效果

  1. 修改<BlogRoot>\themes\butterfly\_config.yml可以忽略,貌似不加也行)

    1
    2
    3
    4
    5
    inject:
    head:
    + # 公告栏轮播组件
    + - <link rel="stylesheet" href="https://npm.arcitcgn.cn/swiper/swiper-bundle.min.css" media="defer"">
    bottom:
  2. 新建<BlogRoot>\themes\butterfly\layout\includes\notice.pug

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    #notice.notice(onclick=`pjax.loadUrl('/notice/')`)
    i.notice-logo.fas.fa-bullhorn.card-announcement-animation
    span=' '+_p('公告栏')
    #noticeList.swiper-container
    .swiper-wrapper
    .swiper-slide <Custom>
    .swiper-slide <Custom>
    .swiper-slide <Custom>
    i.notice-enter.fas.fa-arrow-circle-right
    script(src='https://npm.arcitcgn.cn/swiper/swiper-bundle.min.js',data-pjax='')
    script.
    var swiper = new Swiper ('.swiper-container', {
    spaceBetween: 30,
    centeredSlides: true,
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项

    autoplay: {
    delay: 3000,
    disableOnInteraction: false,
    },
    })

    .swiper-slide <Custom>这里可以写你的公告内容

  3. 新建<BlogRoot>\source\notice\index.md,也可以通过在命令行里敲hexo new page <Custom>

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 公告栏 - Notice
    date: 2021-04-27 16:09:00
    description: 与本站和博主相关的公告
    aside: false
    ---

    [这里可以写你的公告]
  4. 修改<BlogRoot>\themes\butterfly\layout\index.pug

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    extends includes/layout.pug
    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    if theme.gitcalendar.enable
    .recent-post-item(style='width:100%;height:7.5% !important;overflow:hidden;')
    !=partial('includes/gitcalendar', {}, {cache: true})
    + include includes/notice.pug
    +postUI
    include includes/pagination.pug

    注意:如果你使用了 GitCalendar,可能会出现大小失常,建议height:15%改成height:7.5%,具体情况自行调整

  5. <Custom>.css里添加以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    .notice-logo {
    line-height: 22px;
    margin-right: 8px;
    transition: 0.3s;
    }
    #notice {
    height: 47px;
    background-color: white;
    color: var(--font-color);
    margin-top: 20px;
    padding: 12px 20px 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    overflow: hidden;
    }
    [data-theme="dark"] #notice {
    background: black !important;
    }
    #notice span {
    white-space: nowrap;
    }
    .swiper-wrapper {
    width: 100%;
    height: 25px;
    line-height: 25px;
    }
    .swiper-wrapper .swiper-slide {
    width: 100%;
    text-align: center;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
    font-weight: bold;
    }
    .swiper-slide:hover {
    color: #1fc7b6;
    }
    #noticeList {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    }
    .notice-enter {
    line-height: 25px;
    margin-left: 8px;
    transition: 0.3s;
    }

使用场景:公告栏可以写与博客网站相关的重要事件,也可以写与博主有关的公告申明。

缺点:每次更新公告要在index.mdnotice.pug俩文件里进行手动增删改,当然你也可以选择不建index.md,少费点事,访客只看看就行,不需要点进去看完整公告,然后适当自定义修改notice.pug即可。我个人觉得公告栏不用像哔哔那样需频繁更新,所以这算不上是麻烦。

2021.5.25:我意外看到realwds前端大佬也写了篇公告栏教程,好巧,他的教程是采用模板形式,只用在 md 文档中写时间和公告消息,首页前端就能获取到文本并显示出来,正好解决了我教程的缺点,友友们按需选择教程。


右下角返回顶部按钮

效果请看网页右下角

  1. 修改<BlogRoot>\themes\butterfly\_config.yml

    1
    2
    3
    4
    5
    6
    inject:
    head:
    # - <link rel="stylesheet" href="/xxx.css">
    bottom:
    + # 返回顶部按钮
    + - <div id="doraemon_to_top"><img alt="doraemon_to_top" onclick="fly_to_top()" src="<FilePath_图片>"></div>

    src这里添加图片地址

  2. <Custom>.css里添加以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    @media screen and (min-width: 768px) {
    #doraemon_to_top {
    position: fixed;
    z-index: 1001;
    right: 30px;
    transition: 0.3s;
    opacity: 0;
    bottom: -187px;
    transform: scale(1);
    }
    #doraemon_to_top.doraemon_fixed {
    bottom: -51px;
    opacity: 1;
    cursor: pointer;
    }
    #doraemon_to_top.doraemon_fixed:hover {
    transform: scale(0.95);
    }
    }
  3. <Custom>.js里添加以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function fly_to_top() {
    btf.scrollToDest(0, 500);
    }
    window.addEventListener("scroll", function (event) {
    var scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
    if (scrollTop > 56) {
    document
    .getElementById("doraemon_to_top")
    .classList.add("doraemon_fixed");
    } else {
    document
    .getElementById("doraemon_to_top")
    .classList.remove("doraemon_fixed");
    }
    });
  4. 最后把 butterfly 自带的返回顶部按钮给去掉,提供俩思路,留作课后作业

    1. display: none;
    2. 获取类名/id 名,定位到 pug 源码,注释或删除相应代码

注意:img 标签内所有参数值以及 css 代码里的值都可以自定义更改,前后保持一致就行。

JS 代码参考教程:晴明的博客园


更改文章 h1~6 级标题前 icon 图标

开发背景

灵感来源于eurkon。单靠肉眼识别字体大小来判断标题等级不是件容易的事情,若 h1~6 标题使用不同图标的话,那么识别会容易许多。

小插曲:我之前在此问题上花了很多功夫,比如加大各等级标题字体大小之间的差值(肉眼还是难以分别)、更换颜色(确实好分辨,但主色过多不符合我对网站视觉美感的要求)、部分标题加不同样式的左边框(还是不太符合视觉美感要求,不够直观)

  1. <Custom>.css里添加以下代码
1
2
3
4
#article-container h1:before {
content: "<Custom>";
}
/* h2~6以此类推 */

其中<Custom>部分可以填写一下内容:

  1. H¹、H²、H³、H⁴、H⁵、H⁶

  2. H₁、H₂、H₃、H₄、H₅、H₆

  3. H1、H2、H3、H4、H5、H6

  4. fontawesome的 icon 图标代号(例如'\f06c'

  5. 可以加阿里图标(在此鸣谢Venkiˡᵒᵛᵉ💕 留言)

    1
    2
    3
    4
    #article-container h1:before {
    font-family: "iconfont";
    content: "<Custom>"; /*阿里图标的Unicode*/
    }
  1. Hexo 三连即可看到效果

首页置顶文章轮播组件

开发背景

每次打开自己博客,前 5 排都是置顶文章,同时右侧小组件中的“最新文章”早已被我换成了更新时间排序,所以一定程度上访客难以快速定位到最新发布的文章。把置顶文章用轮播图的形式表现出来,既美观又能腾出部分展示空间给最新发布的文章。

预览效果

  1. 新建<BlogRoot>\themes\butterfly\layout\includes\sticky.pug

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    link(rel='stylesheet' href='https://npm.arcitcgn.cn/swiper/swiper-bundle.min.css')
    //- style(type='text/css').
    #sticky
    #stickyList.swiper-container
    .swiper-wrapper
    each i in site.data.sticky
    .swiper-slide.hassan_border(onclick=`pjax.loadUrl('` + i.link + `')`)
    .grid-img
    img.cover.entered.loaded(alt=i.title src=i.cover)
    .grid-title
    div= i.title

    //- 分页器
    .swiper-pagination

    .js-pjax
    script(src='https://npm.arcitcgn.cn/swiper/swiper-bundle.min.js')
    script.
    var mySwiper = new Swiper('#stickyList', {
    initialSlide: Math.round(Math.random()*5 + 1),// 初始化滑块索引(16随机数)
    direction: 'horizontal',// 垂直切换选项
    speed: 600, // 切换速度
    loop: true, // 循环模式选项
    slidesPerView: 2, // 显示2个滑块
    centeredSlides: true, // 选中滑块居中

    effect : 'coverflow',
    slidesPerView: 2,
    coverflowEffect: {
    rotate: 20, // 滑块做3d旋转时Y轴的旋转角度
    stretch: 0, // 每个滑块之间的拉伸值,越大滑块靠得越紧
    depth: 80, // 滑块的位置深度。值越大z轴距离越远,看起来越小
    modifier: 2, // depth和rotate和stretch的倍率,值越大这三个参数的效果越明显
    slideShadows : false // 是否开启slide阴影
    },

    loopAdditionalSlides: 0,
    loopPreventsSlide: false, // 滑块过渡时,允许切换过渡方向
    autoplay: true, // 自动滑动
    autoplay: {
    disableOnInteraction: false, // 滑块触碰后不会停止自动切换
    pauseOnMouseEnter: true, // 鼠标置于swiper时暂停自动切换
    },

    mousewheel: true, // 鼠标滚轮控制滑块切换

    // 如果需要分页器
    pagination: {
    el: '.swiper-pagination',
    clickable :true, // 点击分页器的指示点分页器会控制滑块切换
    // 自定义分页器的指示点
    renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
    },
    })
  2. <BlogRoot>\source\_data里新建sticky.yml。这是文章模板,放 4-6 篇文章为佳。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #- cover: 封面图片链接
    # link: 置顶文章链接,站内文章建议填相对链接
    # title: 置顶文章标题
    - cover: https://unpkg.com/hassan-assets/img/cover_butterfly_beautify.png
    link: /posts/9d49f75f
    title: Butterfly主题美化魔改集锦
    - cover: https://unpkg.com/hassan-assets/img/top_img.jpg
    link: /posts/223fd004
    title: 博客食用须知!
  3. 修改<BlogRoot>\themes\butterfly\layout\index.pug

    1
    2
    3
    4
    5
    6
      include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    if theme.gitcalendar.enable
    .recent-post-item(style='width:100%;height:8% !important;overflow:hidden;')
    !=partial('includes/gitcalendar', {}, {cache: true})
    + include includes/sticky.pug
  4. <Custom>.css里添加以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    #sticky {
    height: 384px !important;
    width: calc(100% - 20px);
    }
    .swiper-container#stickyList {
    width: 100%;
    height: 360px;
    bottom: -6px;
    overflow: hidden;
    }
    #stickyList .swiper-slide {
    width: calc((100% - 20px) / 2) !important;
    height: 270px;
    top: 6px;
    margin: 0 5px 10px;
    background: var(--hassan-card-bg);
    position: relative;
    border-radius: 12px;
    transition: 0.3s;
    }
    #stickyList .swiper-slide .grid-img {
    overflow: hidden;
    height: 11rem;
    }
    #stickyList .swiper-slide .grid-img img {
    transition: 0.3s;
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    }
    #stickyList .swiper-slide:hover .grid-img img {
    transform: scale(1.1);
    }
    #stickyList .swiper-slide .grid-title {
    margin: 12px 0;
    font-size: 20px;
    transition: 0.3s;
    font-weight: normal;
    }
    @media screen and (min-width: 768px) {
    #stickyList .swiper-slide .grid-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    }
    #stickyList .swiper-slide:hover .grid-title {
    color: var(--hassan-theme-color);
    }
    .swiper-pagination-bullet {
    width: 26px !important;
    height: 26px !important;
    line-height: 26px;
    color: var(--hassan-black);
    background: var(--hassan-blue-lighter) !important;
    opacity: 1 !important;
    }
    .swiper-pagination-bullet-active {
    color: var(--hassan-white);
    background: var(--hassan-theme-color-dark) !important;
    }
    @media screen and (max-width: 768px) {
    #recent-posts #sticky {
    width: 100%;
    height: 14rem !important;
    }
    .swiper-container#stickyList {
    bottom: 0;
    }
    #stickyList .swiper-slide {
    height: 110px;
    top: 12px;
    }
    #stickyList .swiper-slide .grid-img {
    height: 7rem;
    }
    #stickyList .swiper-slide .grid-title {
    font-size: 16px;
    font-weight: normal;
    }
    }
  5. Hexo 三连即可看到效果

    注意:写该教程时,我只是将我目前轮播组件使用的 CSS 代码进行了简单适配更改,但未经测试,所以样式 CSS 代码可能存在问题,再一次给友友们提供锻炼 CSS 调试能力的机会,同时sticky.pug中的 JS 参数可以自行调整,更多参数的详细释义可以参考Swiper API 文档

拓展

该轮播组件不只是可以放置顶文章,还可以放些其它功能页面,甚至站外链接也行。

若你的有一定前端能力,还可以进一步更改源码做到在文章front-matter里添加参数,即可将其显示在首页置顶文章轮播组件中。


侧边 Sticky 组件随页面上下滚动而微移的 Bug

前提:贵站的导航栏已经魔改成固定 fixed 样式。细心的友友应该能发现,看文章时,随着滚轮上下移动,侧边目录组件有 50px 的上下移动距离,其实这不算是 Bug,Jerry 这么写只是为了右侧组件配合导航栏移动而移动。所以现在咋们魔改党要固定它!

  1. 修改<BlogRoot>\themes\butterfly\source\css\_layout\head.styl,在 178 行左右

    1
    2
    3
    4
    5
    6
    7
    8
    -    & + .layout
    - & > .aside-content > .sticky_layout
    - top: 70px
    - transition: top .5s

    .apple
    #page-header.full_page
    background-attachment: scroll !important
  2. 修改<BlogRoot>\themes\butterfly\source\css\_layout\aside.styl,在 106 行左右

    1
    2
    3
    4
    5
    6
    7
      .sticky_layout
    +minWidth900()
    position: sticky
    position: -webkit-sticky
    - top: 20px
    + top: 70px
    transition: top .3s
  3. Hexo 三连即可看到效果


光标框选文字颜色

  1. <Custom>.css里添加以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* webkit, opera, IE9 */
    ::selection {
    background: #3f3f3f;
    color: #fff;
    }
    /* mozilla firefox */
    ::-moz-selection {
    background: #3f3f3f;
    color: #fff;
    }

    如果想跟随深浅模式更改颜色,则继续添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    [data-theme="dark"] ::-moz-selection {
    background: #f0f0f0;
    color: #000;
    }
    [data-theme="dark"] ::selection {
    background: #f0f0f0;
    color: #000;
    }
  2. 修改<BlogRoot>\themes\butterfly\source\css\_global\index.styl,在第 195 行左右,将其注释或删除

    1
    2
    3
    // *::selection
    // background: $theme-text-selection-color
    // color: #F7F7F7

侧边小组件——土味情话


结束语

若是有疑问或更好的解决方法欢迎留言。若想 get 本篇未记录的同款,请先查看更新手账,手账记录了本站 2021-01-23 以来几乎所有美化魔改微调的更新历史,且参考过他人的更新都附带有教程链接。若更新手账未记录,那么请自行F12