Hexo 主题背景美化

Hexo 主题背景美化

该文章最后更新时间是: 2023-11-18

首页背景图渐进式加载

预览图

此教程参考于铭心石刻博客，并加以修改
以本站使用的主题anzhiyu为例（butterfly通用），为首页顶部图配置渐进式加载。

  • 新建文件source/js/imgloaded.js新增以下内容
  • 你可以修改对应的图片链接
    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
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    // 首页头图加载优化
    /**
     * @description 实现medium的渐进加载背景的效果
     */

    if (!window.ProgressiveLoad) {
      // 定义ProgressiveLoad类
      class ProgressiveLoad {
        constructor(smallSrc, largeSrc) {
          this.smallSrc = smallSrc;
          this.largeSrc = largeSrc;
          this.initScrollListener(),
          this.initTpl();
        }
        // 这里的1是滚动全程渐变 改为0.3就是前30%渐变后固定前30%产生的渐变效果
        initScrollListener() {
          window.addEventListener("scroll", (()=>{
              var e = Math.min(window.scrollY / window.innerHeight, 1);
              this.container.style.setProperty("--process", e)
          }
          ))
        }
        /**
         * @description 生成ui模板
         */
        initTpl() {
          this.container = document.createElement('div');
          this.smallStage = document.createElement('div');
          this.largeStage = document.createElement('div');
          this.video = document.createElement('div');
          this.smallImg = new Image();
          this.largeImg = new Image();
          this.container.className = 'pl-container';
          this.container.style.setProperty("--process", 0),
          this.smallStage.className = 'pl-img pl-blur';
          this.largeStage.className = 'pl-img';
          this.video.className = 'pl-video';
          this.container.appendChild(this.smallStage);
          this.container.appendChild(this.largeStage);
          this.container.appendChild(this.video);
          this.smallImg.onload = this._onSmallLoaded.bind(this);
          this.largeImg.onload = this._onLargeLoaded.bind(this);
        }

        /**
         * @description 加载背景
         */
        progressiveLoad() {
          this.smallImg.src = this.smallSrc;
          this.largeImg.src = this.largeSrc;
        }
        /**
         * @description 大图加载完成
         */
        _onLargeLoaded() {
          this.largeStage.classList.add('pl-visible');
          this.largeStage.style.backgroundImage = `url('${this.largeSrc}')`;
        }

        /**
         * @description 小图加载完成
         */
        _onSmallLoaded() {
          this.smallStage.classList.add('pl-visible');
          this.smallStage.style.backgroundImage = `url('${this.smallSrc}')`;
        }
      }

      const executeLoad = (config, target) => {
        console.log('执行渐进背景替换');
        const isMobile = window.matchMedia('(max-width: 767px)').matches;
        const loader = new ProgressiveLoad(
          isMobile ? config.mobileSmallSrc : config.smallSrc,
          isMobile ? config.mobileLargeSrc : config.largeSrc
        );
        // 和背景图颜色保持一致，防止高斯模糊后差异较大
        if (target.children[0]) {
          target.insertBefore(loader.container, target.children[0]);
        }
        loader.progressiveLoad();
      };

      const config = {
        smallSrc: 'https://t.mwm.moe/moez', // 小图链接 尽可能配置小于100k的图片
        largeSrc: 'https://t.mwm.moe/moez', // 大图链接 最终显示的图片
        mobileSmallSrc: 'https://t.mwm.moe/moez', // 手机端小图链接 尽可能配置小于100k的图片
        mobileLargeSrc: 'https://t.mwm.moe/moez', // 手机端大图链接 最终显示的图片
        enableRoutes: ['/'],
        };

      function initProgressiveLoad(config) {
        // 每次加载前先清除已有的元素
        const container = document.querySelector('.pl-container'); 
        if (container) {
          container.remove(); 
        }
        const target = document.getElementById('page-header');
        if (target && target.classList.contains('full_page')) {
          executeLoad(config, target);
        }
      }

      function onPJAXComplete(config) {
        const target = document.getElementById('page-header');
        if (target && target.classList.contains('full_page')) {
          initProgressiveLoad(config);
        }
      }

      document.addEventListener("DOMContentLoaded", function() {
        initProgressiveLoad(config);
      });

      document.addEventListener("pjax:complete", function() {
        onPJAXComplete(config);
      });

    }
  • 新建文件source/css/imgloaded.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
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    /* 首页头图加载 */
    body[data-type=anzhiyu] #nav,
    body[data-type=anzhiyu] #scroll-down,
    body[data-type=anzhiyu] #site-info {
      -webkit-animation: scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards;
      animation: scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards
    }

    @media screen and (max-width: 768px) {
      .pl-container {
        position: relative !important
      }
    }

    @media screen and (min-width: 768px) {

      #page-header.full_page,
      .pl-container {
        height: 100vh
      }

      #page-header.full_page.expand-to-full,
      .pl-container.expand-to-full {
        height: 50vh !important
      }

      .pl-container {
        will-change: opacity, transform, filter;
        opacity: calc(1 - var(--process) * 1) !important;
        transform: scale(calc(1 + var(--process) * .1));
        filter: blur(calc(var(--process) * 10px));
      }
    }

    .pl-container {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: -2;
      overflow: hidden;
      will-change: transform;
      /* 添加性能优化 */
      animation: blur-to-clear 2.5s cubic-bezier(.6, .25, .25, 1) 0s 1 backwards, scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards;
    }

    .pl-img {
      width: 100%;
      height: 100%;
      position: absolute;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: .1;
      transition: opacity 1s;
      will-change: transform, opacity
    }

    .pl-video.pl-visible {
      display: block
    }

    @keyframes blur-to-clear {
      0% {
        filter: blur(50px);
        opacity: 1;
      }

      100% {
        filter: blur(0);
        opacity: 1;
      }
    }

    @keyframes scale {
      0% {
        transform: scale(1.5) translateZ(0);
        opacity: 0;
      }

      to {
        transform: scale(1) translateZ(0);
        opacity: 1;
      }
    }

    .pl-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
    }

    .pl-visible {
      opacity: 1;
    }

    .pl-blur {
      /* 小图锯齿多，增加高斯模糊 */
      filter: blur(50px);
    }

    /* 去除首页图片背景黑板 */
    [data-theme='dark'] #web_bg:before, [data-theme='dark'] #footer:before, [data-theme='dark'] #page-header:before{
      background-color: transparent;
    }
  • 引入文件
  • 在_config.anzhiyu.yml主题配置文件下inject配置项中head和bottom处添加以下内容：
    1
    2
    3
    4
    5
    6
    7
    8

    inject:
      head:
        - <link rel="stylesheet" href="/css/imgloaded.css?1">

      bottom:
        - <script async data-pjax src="/js/imgloaded.js?1"></script> # 首页图片渐进式加载

背景美化

  • 新建文件source/css/imgloaded.css，我们会在这里添加一些自定义css
  • 添加以下内容

渐变背景

预览图

1
2
3
4
/* 默认背景 */
[data-theme=light] #body-wrap {
    background: linear-gradient(0deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)) !important;
  }

自定义背景

在url()的括号里里填入图片链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[data-theme=light] #body-wrap {
    background-image: url(https://bu.dusays.com/2023/10/28/653ce9975bdfe.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
  /* 黑夜背景 */
  [data-theme=dark] #body-wrap {
    background-image: url(https://bu.dusays.com/2023/10/28/653ce9975bdfe.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
  • 引入文件
  • 在_config.anzhiyu.yml主题配置文件下inject配置项中head和bottom处添加以下内容：
    1
    2
    3
    inject:
      head:
        - <link rel="stylesheet" href="/css/costom.css">

作者卡片美化

自定义背景

  • 在已有的custom.css文件中添加以下内容
  • 在url()的括号里里填入图片链接
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* 侧边栏头像卡片 */
    #aside-content>.card-widget.card-info::before {
        background: url('');
        border: 0;
        position: absolute;
        background-size: 400% 400%;
        -webkit-animation: Gradient 10s ease infinite;
        -moz-animation: Gradient 10s ease infinite;
        animation: Gradient 10s ease infinite !important;
    }

渐进背景

  • 在已有的custom.css文件中添加以下内容
  • 在url()的括号里里填入图片链接
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* 侧边栏头像框背景色 */
    [data-theme=dark] #aside-content>.card-widget.card-info::before {
        overflow: hidden;
        background-size: contain;
        position: relative;
    }

    #aside-content>.card-widget.card-info::before {
        background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
    }

添加视频背景

  1. 在themes\anzhiyu\layout\includes\layout.pug下添加以下内容
    1
    2
    3
    div#bg-video
      video(autoplay muted loop)
        source(src= url_for('视频url') type='video/mp4')
  2. 在已有的custom.css文件中添加以下内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    [data-theme=light] #bg-video {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
      }
    [data-theme=dark] #bg-video {
        display: none;
      }
      #bg-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    若出现部署后和本地显示不一致问题，请查看教程