以下功能可能只适用于Butterfly主题 版本：4.0.1

博客更新日志

博客更新日志

网站跑分(生成Lighthouse报表)

  1. 网站跑分 网站跑分

2023-10-24 [0.0.1 -> 0.0.1]

  1. 用CSS实现手机端、PC端壁纸自适应
  2. 消除大部分控制台红色错误 🥰
  3. 修复Waline评论系统API
  4. 增加春夏秋冬对应飘落
  5. 引入live2d看板娘

用CSS实现手机端、PC端壁纸自适应

提取自Butterfly主题[themes\butterfly\source\css_global\index.styl]源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if $web-bg
  #web_bg
    position: fixed
    z-index: -999
    width: 100%
    height: 100%
    background-attachment: local
    background-position: center
    background-size: cover
    background-repeat: no-repeat

  @media (min-width: 757px)
    #web_bg
      background-image: $web-bg

if $web-mobile-bg
  @media (max-width: 756px)
    #web_bg
      background-image: $web-mobile-bg

提取自Butterfly主题[themes\butterfly\source\css_mode\darkmode.styl]源码

1
2
3
4
5
6
7
8
if $web-bg_dark //夜间模式下背景图片
  @media (min-width: 757px)
    #web_bg
      background-image: $web-bg_dark
if $web-mobile-bg_dark
  @media (max-width: 756px)
    #web_bg
      background-image: $web-mobile-bg_dark

提取自Butterfly主题[themes\butterfly\source\css\var.styl]源码

1
2
3
4
$web-bg = hexo-config('background') && unquote(hexo-config('background'))
$web-bg_dark = hexo-config('background_dark') && unquote(hexo-config('background_dark'))    
$web-mobile-bg = hexo-config('background_mobile') && unquote(hexo-config('background_mobile'))    
$web-mobile-bg_dark = hexo-config('background_mobile_dark') && unquote(hexo-config('background_mobile_dark'))

在主题配置文件_config.butterfly.yml中添加

1
2
3
4
5
6
7
8
9
10
# PC端
# 白天
background: url(https://s2.loli.net/2023/10/24/3ujmcKqJ9xSUlk7.jpg)
# 暗色模式
background_dark: url(https://s2.loli.net/2023/10/24/1hTdwOpEoZacHq8.jpg)
# 手机端
# 白天
background_mobile: url(https://s2.loli.net/2023/10/24/c3iVR4fyt9dZwSA.jpg)
# 黑夜
background_mobile_dark: url(https://s2.loli.net/2023/10/24/RfN3mwTFKWLpCot.jpg)

给Waline评论系统的textarea添加自定义placeholder描述

提取自Butterfly主题[themes\butterfly\layout\includes\third-party\comments\waline.pug]源码

1
2
3
}, !{JSON.stringify(option)}))
# "\n"可以换行      
document.getElementById("waline-edit").setAttribute("placeholder","🍧这一生遇见你是我的荣幸🍨\n🍯随便写写吧,说不定评论系统能用呢🎂\n🥟祝您有愉快的一天🍟");
  1. 源码部分
    在Butterfly主题[themes\butterfly\source\css_mode\darkmode.styl]源码最后添加
1
2
3
4
if hexo-config('waline.bgbai')
  #waline-wrap
    textarea
      background: url(hexo-config('waline.bgbai')) 100% 100% no-repeat
  1. 添加配置信息
    在主题配置文件_config.butterfly.yml中添加
1
2
waline:
  bgbai: https://s2.loli.net/2023/10/23/5wWouXR6FmlzG1c.gif # 夜间模式下背景图片

增加春夏秋冬对应飘落

  1. 添加配置信息
    在主题配置文件_config.butterfly.yml中添加。注意：增加这个可能会影响页面流畅度
1
2
3
4
bottom:
  # - <script src="xxxx"></script>
  # 季节飘落引入
  - <script defer type="text/javascript" src="https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/time/season.min.js"></script>

引入live2d看板娘

  1. 添加配置信息
    在主题配置文件_config.butterfly.yml中添加。注意：增加这个可能会影响页面流畅度
1
2
3
4
bottom:
  # - <script src="xxxx"></script>
  # 引入live2d看板娘
  - <script defer src="https://npm.onmicrosoft.cn/naokuo-live2d-api@1.0.8/autoload.js"></script>