Butterfly主题美化记录

记录美化Butterfly主题的过程

未完…

yml格式要求严格，如需复制本文代码请务必选择格式敏感的编辑器如vscode

副标题

• 为页面title添加一个副标题
  在主题配置文件中找到并修改subtitle

  subtitle: 
    enable: true
    # Typewriter Effect (打字效果)
    effect: true
    # loop (循环打字)
    loop: true
    # source 调用第三方服务
    # source: false 关闭调用
    # source: 1  调用一言网的一句话（简体） https://hitokoto.cn/
    # source: 2  调用一句网（简体） http://yijuzhan.com/
    # source: 3  调用今日诗词（简体） https://www.jinrishici.com/
    # subtitle 会先显示 source , 再显示 sub 的內容
    # source: 3
    # 如果关闭打字效果，subtitle 只会显示 sub 的第一行文字
    sub:
      - 一颗正在努力的土豆。
  

侧边栏

首先把侧边栏由右边改到了左边
该部分代码较多但并不复杂，详见官方文档

最主要是在侧边栏加入了时钟，接入了和风天气和高德地图的API，实现了天气和定位的显示。相关教程点这里

效果图如下:

代码详见上教程

导航栏

加入了导航栏
目前只有首页、时间轴、标签、分类、关于

效果如下图：

在主题配置文件中加入如下代码

menu:
  # ||后内容为图标
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  关于: /about/ || fas fa-heart

一些简单美化

点击更换背景彩带以及出现爱心

效果如下图

在主题配置文件中加入如下代码

#彩带
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true  #設置是否每次點擊都更換彩带
  mobile: false # false 手機端不顯示 true 手機端顯示

# 点击出現爱心
click_heart:
  enable: true
  mobile: false

图标图片及头像

请务必先将所需图片放置在本地文件夹位置:/themes/butterfly/source/img
具体的设置代码参考了这里

1. 网站图标

   favicon: /img/example.png #这里我尝试了与头像相同的jpg格式大图没有成功
   

2. 头像

   avatar:
      img: /img/example.jpg
      effect: false # 頭像會一直轉圈
   

3. 主页封面图片

   index_img: /img/example.jpg
   

4. 文章默认top_img

   default_top_img : /img/example.jpg
   

5. 时间轴页面的top_img

   archive_img: /img/example.jpg
   

6. tag页的top_img

   tag_img: /img/example.jpg
   

7. category页的top_img

   category_img: /img/example.jpg
   

• 以上所有的top_img均可以以如下表格所示内容赋值

  配置的值	效果
  留空	显示默认的top_img(如有)，否则显示默认的颜色（文章页top_img留空的话，会显示cover的值）
  img链接	图片的链接，显示所配置的图片
  颜色(HEX值 - #0000FF RGB值 - rgb(0,0,255) 颜色单词 - orange 渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%) )	对应的颜色
  transparent	透明
  false	不显示top_img

文内代码

为文内代码设置了高度限制，超出高度的部分需要点击才能展开。

演示效果见本文下方代码，修改主题配置文件

highlight_height_limit: 200 # unit: px

注意：

1. 单位是px，直接添加数字，如200
2. 实际限制高度为highlight_height_limit + 30px,即多增加30px限制，目的是避免代码高度只超出所设值一点时，出现展开按钮，但展开没有内容。
3. 不适用于隐藏后的代码块（css设置 display: none）

主页文章节选

因为主题UI的关系，主页文章节选只支持自动节选和文章页description。

在butterfly里，有四种可供选择

1. description: 只显示description
2. both： 优先选择description，如果没有配置description，则显示自动节选的内容
3. auto_excerpt： 只显示自动节选
4. false： 不显示文章内容

修改主题配置文件

index_post_content:
  method: 2 #此处选择上述四种情况
  length: 500 # if you set method to 2 or 3, the length need to config

description在文章的front-matter里添加

页脚设置

• 博客年份
  页脚显示了站点起始时间，位于页面的最底部。
  修改主题配置文件

  footer:
  owner:
    enable: true
    since: 2023
  

• 页脚样式变成渐变色
  在文件夹位置/themes/butterfly/source/css处新建一个自定义名字的css文件,内容如下

  /* 页脚footer */
  /* 渐变色滚动动画 */
  @-webkit-keyframes Gradient {
      0% {
          background-position: 0 50%;
      }
  
      50% {
          background-position: 100% 50%;
      }
  
      100% {
          background-position: 0 50%;
      }
  }
  
  @-moz-keyframes Gradient {
      0% {
          background-position: 0 50%;
      }
  
      50% {
          background-position: 100% 50%;
      }
  
      100% {
          background-position: 0 50%;
      }
  }
  
  @keyframes Gradient {
      0% {
          background-position: 0 50%;
      }
  
      50% {
          background-position: 100% 50%;
      }
  
      100% {
          background-position: 0 50%;
      }
  }
  #footer {
      background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      -webkit-animation: Gradient 10s ease infinite;
      -moz-animation: Gradient 10s ease infinite;
      animation: Gradient 10s ease infinite;
      -o-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
  }
  #footer:before {
      background-color: rgba(0, 0, 0, 0);
  }
  
  

  并在主题配置文件中加入引用

  inject:
    head:
  		- <link rel="stylesheet" href="css/foot.css">
  

  最终效果
  

  • css文件参考这里
  • 对于inject的参考见此文章

---

本次美化Blog全程参考了butterfly作者的官方文档以及海拥的主题美化博客
Blog搭建过程参考B站视频【2021最新版】保姆级Hexo+github搭建个人博客以及武师叔同学的博客内容
原文见Pp0tato的博客