anzhiyu主题一图流

之前在玩btf主题的时候就喜欢一图流的效果但是一直没有找到魔改教程，这几天在 煮雪话河山 看到了魔改教程

教程

新建js

新建文件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
119
120
121
122
123
124
125
126
127
128
129
130
// 首页一图流加载优化
/**
 * @description 实现medium的渐进加载背景的效果
 */
(function() {
    class ProgressiveLoad {
      constructor(smallSrc, largeSrc) {
        this.smallSrc = smallSrc;
        this.largeSrc = largeSrc;
        this.initTpl();
        this.container.addEventListener('animationend', () => {
          this.smallStage.style.display = 'none'; 
        }, {once: true});
      }
  
      initTpl() {
        this.container = document.createElement('div');
        this.smallStage = document.createElement('div');
        this.largeStage = document.createElement('div');
        this.smallImg = new Image();
        this.largeImg = new Image();
        this.container.className = 'pl-container';
        this.smallStage.className = 'pl-img pl-blur';
        this.largeStage.className = 'pl-img';
        this.container.appendChild(this.smallStage);
        this.container.appendChild(this.largeStage);
        this.smallImg.onload = this._onSmallLoaded.bind(this);
        this.largeImg.onload = this._onLargeLoaded.bind(this);
      }
  
      progressiveLoad() {
        this.smallImg.src = this.smallSrc;
        this.largeImg.src = this.largeSrc;
      }
  
      _onLargeLoaded() {
        this.largeStage.classList.add('pl-visible');
        this.largeStage.style.backgroundImage = `url('${this.largeSrc}')`;
      }
  
      _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 ldconfig = {
      light: {
        smallSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //浅色模式 小图链接 尽可能配置小于100k的图片 
        largeSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //浅色模式 大图链接 最终显示的图片
        mobileSmallSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //手机端浅色小图链接 尽可能配置小于100k的图片
        mobileLargeSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //手机端浅色大图链接 最终显示的图片
        enableRoutes: ['/'],
        },
      dark: {
        smallSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //深色模式 小图链接 尽可能配置小于100k的图片 
        largeSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //深色模式 大图链接 最终显示的图片
        mobileSmallSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //手机端深色模式小图链接 尽可能配置小于100k的图片
        mobileLargeSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //手机端深色大图链接 最终显示的图片
        enableRoutes: ['/'],
        },
      };
  
      const getCurrentTheme = () => {
        return document.documentElement.getAttribute('data-theme'); 
      }
  
      const onThemeChange = () => {
        const currentTheme = getCurrentTheme();
        const config = ldconfig[currentTheme];
        initProgressiveLoad(config);
        document.addEventListener("DOMContentLoaded", function() {
          initProgressiveLoad(config);
        });
      
        document.addEventListener("pjax:complete", function() {
          onPJAXComplete(config);
        });
      }
  
      let initTheme = getCurrentTheme();
      let initConfig = ldconfig[initTheme];
      initProgressiveLoad(initConfig);
  
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.attributeName === "data-theme" && location.pathname === '/') {
          onThemeChange();
        }
      });
    });
    
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["data-theme"]  
    });
  
    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);
      }
    }
  
  })();

新建css

新建文件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
70
/* 首页头图加载 */
.pl-container {
    width: 100%;
    height: 100%;
    z-index: -2;
    position: fixed;
    overflow: hidden;
    will-change: transform; /* 添加性能优化 */
    animation: blur-to-clear 2s cubic-bezier(.62,.21,.25,1) 0s 1 normal backwards running, scale 1.5s cubic-bezier(.62,.21,.25,1) 0s 1 both;
  }
  .pl-img {
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s;
  }
  
  @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-visible {
    opacity: 1;
  }
  
  .pl-blur {
   /* 小图锯齿多，增加高斯模糊 */
    filter: blur(50px);
  }

/* 页脚透明 */
#footer {
    background: transparent !important;
  }
  
/* 头图透明 */
#page-header {
    background: transparent !important;
  }
/* 底部透明 */
#footer-bar{
    background: transparent !important;
}

/* 更多透明 */
#category-bar{
    background: transparent !important;
}

在这个css中我稍微添加了几行代码使主题的页脚底部和文章更多的位置进行了透明，可以跟据自己的喜好选择是否修改

引入文件

  • 在_config.anzhiyu.yml主题配置文件下inject配置项中head和bottom处
  • 分别引入custom.css和imgloaded.js文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    inject:
      head:
        # 自定义css
        - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

      bottom:
        # 自定义js
        # - <script src="/js/xxx"></script>
         - <script async data-pjax src="/js/imgloaded.js?1"></script> # 首页图片渐进式加载
    在安知鱼主题中可以直接把head中的取消注释在bottom中引入js就好了,如果是其他文件夹就把herf的路径修改一下就好了

配置懒加载

在_config.anzhiyu.yml中修改懒加载lazyload将field修改为psot

1
2
3
4
5
6
lazyload:
  enable: true
  field: post # site/post
  placeholder:
  blur: true
  progressive: true

配置图片的方法

我们需要在_config.anzhiyu.yml中的index_img进行修改

1
2
# The banner image of home page
index_img: "background: url() top / cover no-repeat"

注意在url()的括号中不需要进行填写地址，图片会由js进行渲染
修改图片的地址在imgloaded.js中进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const ldconfig = {
  light: {
    smallSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //浅色模式 小图链接 尽可能配置小于100k的图片 
    largeSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //浅色模式 大图链接 最终显示的图片
    mobileSmallSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //手机端浅色小图链接 尽可能配置小于100k的图片
    mobileLargeSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //手机端浅色大图链接 最终显示的图片
    enableRoutes: ['/'],
    },
  dark: {
    smallSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //深色模式 小图链接 尽可能配置小于100k的图片 
    largeSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //深色模式 大图链接 最终显示的图片
    mobileSmallSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //手机端深色模式小图链接 尽可能配置小于100k的图片
    mobileLargeSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //手机端深色大图链接 最终显示的图片
    enableRoutes: ['/'],
    },
  };

按照代码中的注释进行修改就好了,在配置完成后hexo三连就能看到效果了

文章教程部分链接