点击查看更新记录

更新记录

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. 修改首页文章封面,配合iconfont彩色图标,提供节日挂件效果。

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

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

2021-03-30:新增单页自定义背景教程

  1. 微调主题页面背景的显示逻辑,使得可以在markdown文件的front-matter中单独配置页面背景。

2021-04-07:新增菜单栏彩色iconfont引入教程

  1. 改写menu_item.pug,增加判断机制,实现和fontawesome的共存兼容。
  2. 提供适配fontawesome-animation的改写方案。

2021-04-13:新增social卡片彩色iconfont引入教程

  1. 重写social.pug,增加判断机制,实现和fontawesome的共存兼容。
  2. 提供适配fontawesome-animation的改写方案。
  3. social的写法格式调整至与menu_item一致。

2021-04-18:修复每页自定义背景的背景样式BUG

  1. 感谢@篁竹水声的反馈。
  2. 单页自定义背景在内联样式中重新定义图片,导致css外链样式中的几行定位属性失效。
  3. 重新在内联样式中添加一遍四行定位属性。

2021-04-18:修复每页自定义背景的背景的pjax bug

  1. 感谢@Toxic的反馈。
  2. 修复背景变化后不刷新的bug。
  3. 具体化示例描述。

2021-04-18:重写自定义背景方案

  1. 增加夜间模式图片定义配置项。
  2. 切换夜间模式时换为夜间模式背景。

2021-04-18:新增四背景方案

  1. PC端日间夜间,手机端日间夜间,共有四个背景。
  2. 但是高度耦合,不利于后续升级主题。
  3. 且和自定义单页背景方案存在一定冲突。
  4. 个人不是很建议两者并用。

写在最前

本帖因为是持续更新,所以如无必要,不会特别提供静态资源。对于缩进要求严格的语法格式文件,读者务必遵照缩进指示进行操作。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>

每页单独配置背景图

点击查看每页单独配置背景图教程

Butterfly使用idweb_bgdiv(以下简称#web_bg)来挂载背景图片,而背景图片是使用的#web_bgbackground属性来配置,所以只需要改动这个css属性就可以。例如直接在md页面加入这样一条自定义样式:

{% raw %}
<style>
#web_bg{
background: url(/img/newbg.png)!important;
/*重新定义background会导致原有定位属性失效,所以也需要再声明一次加权的定位属性*/
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
</style>
{% endraw %}

而更好的方案自然是在front-matter中通过新增一个background配置项来配置页面背景。基于这一思路,我们可以考虑在内联样式中添加参数。因为内联样式的权重本来就比外链高,所以不需要再在内联样式中加!important来提高权重了。

  1. 修改[Blogroot]\themes\butterfly\layout\includes\layout.pug,
      if theme.background
    - #web_bg
    + if page.background
    + #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
    + else
    + #web_bg
  2. 如此即可在每个页面的markdown文件的front-matter中使用background配置项单独配置页面背景了,不写或留空则使用主题配置文件中的默认背景。
    ---
    title: 糖果屋微调合集
    top_img:
    cover: 'https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20201115152231.png'
    background: url(https://cdn.jsdelivr.net/npm/akilar-candyassets/image/index.webp)
    description: 将本站针对butterfly主题的亿点点小改动做个集锦。
    ---
  3. 感谢@Toxic的反馈,开了pjax的用户会发现背景变了以后就变不回去了,需要刷新才行。因此为了实现期望的效果,这里还要再把#web_bg加到pjax选择器中。
    修改[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug,
      script(src=url_for(theme.CDN.pjax))
    script.
    let pjaxSelectors = [
    'title',
    '#config-diff',
    '#body-wrap',
    '#rightside-config-hide',
    '#rightside-config-show',
    + '#web_bg',
    '.js-pjax'
    ]

配置手机PC页面白天黑夜共四个背景图

点击查看配置手机PC页面白天黑夜共四个背景图教程

因为本改法同样是使用!important提高权重的方式来改变当前页面背景。所以会和上方的每页单独配置背景图存在一定冲突,具体表现为定义了单页背景的页面不会再应用默认的四个页面。建议两个方案二选一。(本帖没有给出两种方案的融合写法,因为真的非常不推荐您这么做)

  1. 首先是PC端的白天黑夜双背景,修改[Blogroot]\themes\butterfly\layout\includes\layout.pug,
    + - var DefaultBg = page.defaultbg ? page.defaultbg : theme.background.default
    + - var DDMBg = theme.background.darkmode ? theme.background.darkmode : DefaultBg
    + - var DarkmodeBg = page.darkmodebg ? page.darkmodebg : DDMBg
    if theme.background
    #web_bg
    + if page.defaultbg || page.darkmodebg
    + style.
    + #web_bg{
    + background: #{DefaultBg} !important;
    + background-attachment: local!important;
    + background-position: center!important;
    + background-size: cover!important;
    + background-repeat: no-repeat!important;
    + }
    + [data-theme="dark"]
    + #web_bg{
    + background: #{DarkmodeBg} !important;
    + background-attachment: local!important;
    + background-position: center!important;
    + background-size: cover!important;
    + background-repeat: no-repeat!important;
    + }
    - var DefaultBg = page.defaultbg ? page.defaultbg : theme.background.default
    - var DDMBg = theme.background.darkmode ? theme.background.darkmode : DefaultBg
    - var DarkmodeBg = page.darkmodebg ? page.darkmodebg : DDMBg
    if theme.background
    #web_bg
    if page.defaultbg || page.darkmodebg
    style.
    #web_bg{
    background: #{DefaultBg} !important;
    background-attachment: local!important;
    background-position: center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    }
    [data-theme="dark"]
    #web_bg{
    background: #{DarkmodeBg} !important;
    background-attachment: local!important;
    background-position: center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    }
  2. 再是实现手机端的白天黑夜双背景,在[Blogroot]\themes\butterfly\source\css\_layout目录下新建一个web-bg.styl文件,写入以下内容:
    $web-bg-night = hexo-config('background.darkmode') ? unquote(hexo-config('background.darkmode')) : $web-bg
    $mobile-bg-day = hexo-config('background.mobileday') ? unquote(hexo-config('background.mobileday')) : $web-bg
    $mobile-bg-night = hexo-config('background.mobilenight') ? unquote(hexo-config('background.mobilenight')) : $web-bg-night
    [data-theme="dark"]
    #web_bg
    background: $web-bg-night
    background-attachment: local
    background-position: center
    background-size: cover
    background-repeat: no-repeat
    @media screen and (max-width: 800px)
    #web_bg
    background: $mobile-bg-day !important
    background-attachment: local !important
    background-position: center !important
    background-size: cover !important
    background-repeat: no-repeat !important
    [data-theme="dark"]
    #web_bg
    background: $mobile-bg-night !important
    background-attachment: local !important
    background-position: center !important
    background-size: cover !important
    background-repeat: no-repeat !important
  3. 然后还要修改一下[Blogroot]\themes\butterfly\source\css\var.styl,大约35行的位置
      $text-line-height = 2
    - $web-bg = hexo-config('background') && unquote(hexo-config('background'))
    + $web-bg = hexo-config('background.default') && unquote(hexo-config('background.default'))
    $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
  4. 最后我们再修改一下配置项,在[Blogroot]/_config.butterfly.yml中找到background配置项,内容改为:
    # Website Background (設置網站背景)
    # can set it to color or image (可設置圖片 或者 顔色)
    # The formal of image: url(http://xxxxxx.com/xxx.jpg)
    background:
    default: #【必选】默认背景
    darkmode: #【可选】PC端夜间模式背景
    mobileday: #【可选】移动端日间默认背景
    mobilenight: #【可选】移动端夜间模式背景
  5. 感谢@Toxic的反馈,开了pjax的用户会发现背景变了以后就变不回去了,需要刷新才行。因此为了实现期望的效果,这里还要再把#web_bg加到pjax选择器中。
    修改[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug,
      script(src=url_for(theme.CDN.pjax))
    script.
    let pjaxSelectors = [
    'title',
    '#config-diff',
    '#body-wrap',
    '#rightside-config-hide',
    '#rightside-config-show',
    + '#web_bg',
    '.js-pjax'
    ]

菜单栏多色图标配置教程

点击查看菜单栏多色图标配置教程

部分客人在看完iconfont引入教程以后都试着将菜单栏改成iconfont图标,但是只能使用fontclass引入方案配合自定义css来实现单一彩色图标。而无法使用symbol引入方案。这是因为symbol引入方案和fontclass引入方案是基于不同原理,前者实质是一个svg,而后者实质是一个字体。为了能够实现symbol引入,毫无疑问是需要改动源码的。

  1. 本方案中,通过二重判断,可以同时兼容fontawesome写法和iconfontsymbol写法,但是因为判断基准是基于开头是fa还是icon,所以若要使用iconfontfontclass写法,就需要写成fa icon-xxx了。有symbol了真的还有人会继续用fontclass吗?不会吧!不会吧!
  2. 因为butterfly_v3.7.0改动了menu_item.pug的基本结构,所以本方案不兼容低于Butterfly_v3.7.0的主题版本。可以在熟读教程的情况下自主适配低版本,或者根据最新版主题的menu_item.pug进行局部升级。(事实上可以把menu_item.pug全部代码改成和本帖一样,同时配置项也沿用本帖的即可)
店长的碎碎念

其实原本fontawesome写法是不需要加双竖线来分割的。但是为了统一格式使得观感良好,这里特地加了一行代码。看起来有画蛇添足之嫌,却让最终的配置项显得和谐一些。
整个开发过程其实就是一种妥协。如果想要兼容所有的写法,就需要写更多的判断机制,对我来说是得不偿失的。
另外我并不喜欢在menu-item里使用symbol方案的iconfont图标,因为它很难做夜间模式适配,只能通过filter滤镜属性来改写明暗对比度。单纯的反色就好像负片一样,效果一言难尽。只能说是尽量在一开始选择图标的时候就考虑好背景的明暗变化。或者干脆在夜间模式时给他加个泛光阴影底色效果。

Social卡片彩色图标引入

点击查看Social卡片彩色图标引入教程

代码原理和上面的菜单栏基本一致。所以各个前置教程都不再重复。这里只提供代码魔改内容和配置项编写方案。

  1. 重写[Blogroot]\themes\butterfly\layout\includes\header\social.pug,替换为以下代码:
    each value, title in theme.social
    a.social-icon(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
    if value.split('||')[1]
    - var icon_value = trim(value.split('||')[1])
    if icon_value.substring(0,2)=="fa"
    i.fa-fw(class=icon_value)
    else if icon_value.substring(0,4)=="icon"
    svg.icon(aria-hidden="true")
    use(xlink:href=`#`+ icon_value)
  2. 以下为对应的social配置项。写法沿用menu_item的写法示例。早就想吐槽butterfly里menu和social截然相反的配置项写法了。修改[Blogroot]\_config.butterfly.ymlsocial配置项。
    social:
    # iconfont多彩图标
    Github: https://github.com/Akilarlxh || icon-rat
    # fontawesome单色图标
    Email: mailto:Akilarlxh@gmail.com || fas fa-envelope
    # iconfont单色图标
    Bilibili: https://space.bilibili.com/22976782 || fa icon-ox
  1. 重写[Blogroot]\themes\butterfly\layout\includes\header\social.pug,替换为以下代码:
    each value, title in theme.social
    a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
    if value.split('||')[1]
    - var icon_value = trim(value.split('||')[1])
    - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
    if icon_value.substring(0,2)=="fa"
    i.fa-fw(class=icon_value + ' ' + anima_value)
    else if icon_value.substring(0,4)=="icon"
    svg.icon(aria-hidden="true" class=anima_value)
    use(xlink:href=`#`+ icon_value)
  2. 以下为对应的social配置项。写法沿用menu_item的写法示例。早就想吐槽butterfly里menu和social截然相反的配置项写法了。修改[Blogroot]\_config.butterfly.ymlsocial配置项。
    social:
    # iconfont多彩图标
    Github: https://github.com/Akilarlxh || icon-rat || faa-tada
    # fontawesome单色图标
    Email: mailto:Akilarlxh@gmail.com || fas fa-envelope || faa-tada
    # iconfont单色图标
    Bilibili: https://space.bilibili.com/22976782 || icon-ox || faa-tada