个人卡片背景图 + 头像呼吸灯

效果

给个人卡片添加背景图，不用之前的渐变色个人卡片了，并且给头像周围加上呼吸灯

修改前

修改后-白天模式

修改后-夜间模式

操作步骤

  1. 在G:\hexo\source\css\custom.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
62
63
64
65
66
67
68
69
/* 修改个人卡片字体和图标的显示颜色  以适应背景图 */
[data-theme="light"] #aside-content>.card-widget.card-info {
  background-image: url(http://statics.liuhengfeng.xyz/Hexo/07f44d271ae9299e2f920ab0fd128590.png);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-size: 100%;
}

[data-theme="dark"] #aside-content>.card-widget.card-info {
  /* background-image: url(https://statics.liuhengfeng.xyz/Hexo/aurora.webp); */
  background-image: url(https://statics.liuhengfeng.xyz/Hexo/universe.webp);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-size: 100%;
}


/* 修改个人卡片字体和图标的显示颜色  以适应背景图 */
[data-theme="light"] .card-info-data.site-data.is-center.wow.animate__backInLeft *,
[data-theme="light"] .author-info__description,
[data-theme="light"] .author-info__name,
[data-theme="light"] .card-info-social-icons.is-center.wow.animate__backInLeft i {
  color: #f18136 !important;
}

[data-theme="dark"] .card-info-data.site-data.is-center.wow.animate__backInLeft *,
[data-theme="dark"] .author-info__description,
[data-theme="dark"] .author-info__name {
  color: #be370e !important;
}
/* 修改个人卡片字体和图标的显示颜色  以适应背景图 */


/* 头像呼吸灯 */
[data-theme="light"] .avatar-img {
  animation: huxi_light 4s ease-in-out infinite;
}

[data-theme="dark"] .avatar-img {
  animation: huxi_dark 4s ease-in-out infinite;
}

@keyframes huxi_light {
  0% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }

  50% {
    box-shadow: 0px 0px 5px 5px #e9f5fa;
  }

  100% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
}

@keyframes huxi_dark {
  0% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }

  50% {
    box-shadow: 0px 0px 5px 5px #39c5bb;
  }

  100% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
}
  1. 注释掉custom.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
/* 侧边栏个人信息卡片动态渐变色 */
/* #aside-content > .card-widget.card-info {
  background: linear-gradient(
    -45deg,
    #e8d8b9,
    #eccec5,
    #a3e9eb,
    #bdbdf0,
    #eec1ea
  );
  box-shadow: 0 0 5px rgb(66, 68, 68);
  position: relative;
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite !important;
}
@-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%;
  }
} */

/* 黑夜模式适配 */
/* [data-theme="dark"] #aside-content > .card-widget.card-info {
  background: #191919ee;
}  */

顺带一嘴

现在的百度图片AI功能挺好用的，需要用到背景图或者封面标题时可以去百度图片找找，能进行图片清晰度修复、AI生图、自定义修改等功能，最重要的是生成后的图片大小在六七十KB左右！！能很大地节约流量费用。

文章置顶滚动栏

操作步骤

  1. 安装插件,在博客根目录[BlogRoot]下打开终端，运行以下指令：
1
npm install hexo-butterfly-swiper --save
  1. 在主题配置文件_config.butterfly.yml中添加如下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法
  1. 参数释义
参数 备选值/类型 释义
priority number 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable true/false 【必选】控制开关
enable_page path/all 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all
timemode date/updated 【可选】时间显示，date为显示创建日期，updated为显示更新日期,默认为date
layout.type id/class 【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name text 【必选】挂载容器名称
layout.index 0和正整数 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
default_descr text 默认文章描述
swiper_css url 【可选】自定义的swiper依赖项css链接
swiper_js url 【可选】自定义的swiper依赖项加js链接
custom_css url 【可选】适配主题样式补丁
custom_js url 【可选】swiper初始化方法
  1. 使用方法，在文章的front_matter中添加swiper_index配置项即可。
1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---