记录美化Butterfly主题的过程

未完…

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

副标题

  • 为页面title添加一个副标题
    在主题配置文件中找到并修改subtitle 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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，实现了天气和定位的显示。相关教程点这里

效果图如下:

代码详见上教程

导航栏

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

效果如下图：

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

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

一些简单美化

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

效果如下图

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#彩带
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. 网站图标
    1
    favicon: /img/example.png #这里我尝试了与头像相同的jpg格式大图没有成功
  2. 头像
    1
    2
    3
    avatar:
       img: /img/example.jpg
       effect: false # 头像会一直转圈
  3. 主页封面图片
    1
    index_img: /img/example.jpg
  4. 文章默认top_img
    1
    default_top_img : /img/example.jpg
  5. 时间轴页面的top_img
    1
    archive_img: /img/example.jpg
  6. tag页的top_img
    1
    tag_img: /img/example.jpg
  7. category页的top_img
    1
    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

文内代码

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

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

1
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： 不显示文章内容

修改主题配置文件

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

description在文章的front-matter里添加

页脚设置

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

    1
    2
    3
    4
    footer:
    owner:
      enable: true
      since: 2023

  • 页脚样式变成渐变色
    在文件夹位置/themes/butterfly/source/css处新建一个自定义名字的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
    /* 页脚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);
    }

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

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

    最终效果

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