点击查看更新记录

更新记录

2021-01-21:更新页面左上角标题魔改

  1. 文章左上角站点标题改为文章标题,悬停显示文章描述。
  2. 改动范围增大,设置默认描述内容。
  3. 页面也可以设置。

2021-01-21:更新打赏按钮投币动画魔改

  1. 打赏按钮新增投币动画
  2. 修复了主题现有的若打赏提示语过长,悬停色条填充长度不满的bug。
  3. 修复了复数打赏二维码时样式纵列的bug。

2021-01-29:更新页面左上角标题魔改

  1. 新增副标题判断机制

2021-02-04:更新页脚振翅蝴蝶动效魔改

  1. 修改页脚版权声明内容,在中间放上振翅蝴蝶动画。

2021-02-05:新增主页文章封面节日挂件效果

  1. 修改页脚版权声明内容,在中间放上振翅蝴蝶动画。

2021-02-07:追加修复手机顶栏样式bug

  1. 使用左上角标题魔改内容以后,有概率出现手机端切换页面时,手机端侧栏菜单变成PC端顶栏菜单。追加修复样式。

写在最前

本帖因为是持续更新,所以如无必要,不会特别提供静态资源。对于缩进要求严格的语法格式文件,读者务必遵照缩进指示进行操作。diff代码块仅做色块标记,删除+、-号之后记得补全空格,调整缩进。
本帖编写于butterfly_v3.5.1,低版本可能不完全适用,请自行斟酌。

鉴于我被读者吐槽说这么多内容哪里算微调了。所以这里有必要解释一下。之所以说是微调,是因为这里最多的内容是外挂js或者外挂css,真正针对源码的修改都在10行代码以内。而且外挂js或者css可以在source文件夹和inject配置项或CDN配置项统一快速管理。相比于其他的伤筋动骨的魔改大手术,这个微调合集的程度大概就是相当于割个双眼皮而已。


左上角站点标题

点击查看左上角标题魔改内容

改动页面的左上角显示内容。使得鼠标悬停左上角时显示描述。可以自己改描述的默认项。同时添加副标题属性。可以在Front-matter里使用subtitle定义副标题。如果副标题不存在,则显示主标题。

  1. 改动[Blogroot]\themes\butterfly\layout\includes\header\nav.pug,当前的逻辑是文章内点击左上角标题是返回顶部。页面内点击左上角标题是返回首页。读者自己根据需要替换href=url_for('/')onclick='btf.scrollToDest(0, 500)'即可。但是不可以都放哦,虽然不会报错,但是既要跳转到页面顶部又要返回首页的,逻辑不合理。
      nav#nav
    - span#blog_name
    - a#site-name(href=url_for('/')) #[=config.title]
    + - var pagedescr = page.description ? page.description : '欢迎光临糖果屋,愿你有愉快的一天'
    + - var subtitle = page.subtitle ? page.subtitle : page.title
    + if is_post()
    + span#blog_name
    + a#site-name(onclick='btf.scrollToDest(0, 500)' data-title=pagedescr) #[=subtitle]
    + else if is_page()
    + span#blog_name
    + a#site-name(href=url_for('/') data-title=pagedescr) #[=subtitle]
    + else
    + span#blog_name
    + a#site-name(href=url_for('/') data-title=pagedescr) #[=config.title]
  2. 因为hexo自带缓存的关系,如果我们用的是缓存式引入的话,nav的刷新是惰性的,我们需要它根据文章和页面的切换实时变动。所以需要改动一下引入逻辑。修改[Blogroot]\themes\butterfly\layout\includes\header\index.pug,注意butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}改为{cache: true}:
      header#page-header(class=isHomeClass style=bg_img)
    - !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
    + include ./nav.pug
    if top_img !== false
    if is_post()
    include ./post-info.pug
  3. 目前的改动会导致左上角标题过长时挤占menu-item,为了不至于观感太差,需要设置自定义样式,设置标题超过长度自动隐藏。还要设置悬停时的提示框效果,自带title的提示框太丑了。新建[Blogroot]\themes\butterfly\source\css\_layout\custom.styl,
    /*标题悬停显示文章描述*/
    #site-name
    &:hover
    &:before
    position: fixed
    width:fit-content
    margin:auto
    left:0;
    right:0
    top:10%
    border-radius: 10px
    text-align: center
    z-index: 100
    content: attr(data-title)
    font-size: 20px
    color: #fff
    padding: 10px
    background-color: rgba($theme-color,0.9)
    /* 夜间模式适配 */
    [data-theme=dark]
    a#site-name
    &:hover
    &:before
    background-color: rgba(#121212,0.8)
    /*标题超过隐藏并显示省略号*/
    @media screen and (max-width: 768px)
    a#site-name
    -webkit-line-clamp 1
    word-break break-all
    display -webkit-box
    -webkit-box-orient vertical
    overflow hidden
  4. 新增副标题判断机制,可以在主标题下面设置副标题。如果副标题不存在,则右上角默认显示主标题。
    ---
    title: 糖果屋微调合集
    subtitle: 持续更新ing...
    description: 将本站针对butterfly主题的亿点点小改动做个集锦。
    ---
  5. 极有可能出现的bug: 使用左上角标题魔改内容以后,有概率出现手机端切换页面时,手机端侧栏菜单变成PC端顶栏菜单。追加修复样式。修改[Blogroot]\themes\butterfly\source\css\_layout\head.styl
    @media screen and (max-width: 768px)
    #nav
    #toggle-menu
    display: inline-block !important

    .site-page
    font-size: inherit

    .menus_items
    position: absolute
    left: 0
    visibility: hidden
    opacity: 0

    #search-button span
    display: none !important

打赏按钮投币彩蛋效果

页脚振翅蝴蝶动效

点击查看页脚振翅蝴蝶动效魔改教程

本站页脚的振翅蝴蝶使用了iconfontsymbol引入方案,引入了彩色蝴蝶图标。因此使用本改动需要先学习前置教程: Hexo引入阿里矢量图标库

  1. 引入相应的图标资源,修改_config.butterfly.yml,在inject配置项添加图标库js。此处为我的图标库链接,掌握前置教程后可以改成自己的。
    inject:
    head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"> #教学用样式
    bottom:
    # 阿里矢量图标
    - <script async src="//at.alicdn.com/t/font_2032782_8ns648avijk.js"></script>
  2. 新建[Blogroot]\themes\butterfly\source\css\custom.css,在里面添加图标默认样式和振翅蝴蝶动画。
    /*iconfont默认样式*/
    .icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    }
    /* 页脚蝴蝶振翅动画 */
    .copyright svg{
    animation butterfly 1s linear infinite alternate
    }
    @keyframes butterfly {
    from {
    transform rotateY(70deg)
    }
    to {
    transform rotateY(0deg)
    }
    }
  3. 修改[Blogroot]\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.owner.since && theme.footer.owner.since != nowYear
    + .copyright
    + span!= `&copy;${theme.footer.owner.since} - ${nowYear}`
    + svg(style="width:1.5em; height:1.5em" aria-hidden="true")
    + use(xlink:href="#icon-Butterfly")
    + span!= `${config.author}`
    + else
    + .copyright
    + span!= `&copy;${nowYear}`
    + svg(style="width:1.5em; height:1.5em" aria-hidden="true")
    + use(xlink:href="#icon-Butterfly")
    + span!= `${config.author}`
  4. 事实上直接用emoji的🦋,配合fontawesome-animation也能做到类似效果,甚至还可以使用base64的图片,但是图标呈现的不论是色彩还是动效都不如用iconfont来的漂亮。这里的动画用到了rotateY,三维上其实是图标在绕着Y轴旋转,降维到二维以后就呈现出了对折振翅的效果,但是人脑是很神奇的,因为左右半脑的发达程度不均,有的人还是能看到蝴蝶其实是在旋转而不是振翅。当然也不乏切换自如的人才。这个就只能仁者见仁智者见智了。

封面节日挂件效果

点击查看封面节日挂件效果魔改

本站封面节日挂件效果使用了iconfontsymbol引入方案,引入了彩色节日图标。因此使用本改动需要先学习前置教程: Hexo引入阿里矢量图标库

  1. 新建[Blogroot]\themes\butterfly\scripts\festival.js
    hexo.extend.helper.register('getFestivalIcon', function () {
    var icon = [
    '#icon-qiandai',
    '#icon-denglong',
    '#icon-juanzhou',
    '#icon-hongbao',
    '#icon-duilian',
    '#icon-bianpao',
    '#icon-shanzi',
    '#icon-tangguo',
    '#icon-yuanbao',
    '#icon-qianchuan',
    '#icon-denglong2'
    ]
    var index = Math.floor(Math.random()*icon.length);
    return icon[index]
    });
  2. 修改[Blogroot]\themes\butterfly\layout\includes\mixins\post-ui.pug,
      if post_cover && theme.cover.index_enable
    .post_cover(class=leftOrRight)
    a(href=url_for(link) title=title)
    + svg.icon.festival-decoration(aria-hidden="true")
    + use(xlink:href=getFestivalIcon())
    if theme.lazyload.enable
    img.post_bg(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
    else
    img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
  3. 新建[Blogroot]\themes\butterfly\source\css\custom.css,
    svg.icon.festival-decoration {
    width: 3em;
    height: 3em;
    left: 2em;
    margin-bottom: -3em;
    display: block;
    z-index: 100;
    position: relative;
    -webkit-animation: sway 1s infinite ease-in-out alternate;
    animation: sway 1s infinite ease-in-out alternate;
    }
    @-webkit-keyframes sway {
    0% {
    -webkit-transform: rotate(20deg);
    transform-origin: center top;
    }
    100% {
    -webkit-transform: rotate(-20deg);
    transform-origin: center top;
    }
    }
    @keyframes sway {
    0% {
    transform: rotate(20deg);
    transform-origin: center top;
    }
    100% {
    transform: rotate(-20deg);
    transform-origin: center top;
    }
    }
  4. 修改_config.butterfly.ymlinject配置项,引入custom.cssiconfontjs,此处为我的图标库链接,熟练掌握前置教程后可以换成自己的:
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
    head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"> #教学用样式
    bottom:
    # 阿里矢量图标
    - <script async src="//at.alicdn.com/t/font_2032782_ev6ytrh30f.js"></script>