1.前言

为了把lighthouse的性能优化到极致，所以采用了这种轻笑方案的随机banner来优化
文章来源：

✅来自本站，本站可确保其安全性，请放心点击跳转
Banner随机文章展示
『轻笑Chuckle』

2.添加hometop

1.在 [BlogRoot]\themes\sxiaohe\scripts\helpers中新建home_random_post.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo.extend.generator.register('thePosts', function (locals) {
    const jsonData = locals.posts
      .filter(post => post.random !== false)
      .map(post => {
        return {
          title: post.title || "暂无标题",
          abbrlink: post.abbrlink,
          cover: post.cover,
          description: post.description || "暂无简介"
        };
      });
  
    return {
      path: 'random.json',
      data: JSON.stringify(jsonData)
    };
  });

2.在 [BlogRoot]\themes\butterfly\layout\includes中新建hometop.pug：

提示：如果在页面中添加js文件，会导致浏览器一直读取js，从而让用户无法看到页面内容，所以这里采用pug内嵌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
#home_top
  .home_top_group
    #homeTopGroup.homeTopGroup
      .left-arrow-tip
      .right-arrow-tip
      .category_group
          .category_item
            a.category_button(href="/archives/",style="background:linear-gradient(to right,#00868Bdb,#3fc1c9db)")
              span.category_button_text 归档
              i.fas.fa-laptop-code
          .category_item
            a.category_button(href="/archives/2022/",style="background:linear-gradient(to right, #0A5ABEdb, #2fcbffdb)")
              span.category_button_text 2022
              i.fas.fa-lightbulb
      .top_post_group
        //- 这下面是原来固定的写法
        //- if site.data.slider
        //-   each i in site.data.slider
        //-     .top_post_item
        //-       .post_cover
        //-         a(href=url_for(i.link) title=i.title)
        //-           img.post_bg.entered.loaded(src=url_for(i.cover))
        //-           .post_cover_info
        //-             p.post_cover_text= i.description
        //-       .post_info(onclick=`"window.open(`+url_for(i.link)+`,"_self")"`)
        //-         a.article-title(href=url_for(i.link) title=i.title)= i.title
      script(type='text/javascript')
        | function getRandomElementsFromArray(arr, num) {
        |   const totalElements = arr.length;
        |   const selectedElements = new Set();
        |   while (selectedElements.size < num) {
        |     const randomIndex = Math.floor(Math.random() * totalElements);
        |     selectedElements.add(arr[randomIndex]);
        |   }
        |   return Array.from(selectedElements);
        | }
        | function renderingPosts(data){
        |   const randomElements = getRandomElementsFromArray(data, 6);
        |   const postsHtml = randomElements.map((i) => `
        |     <div class="top_post_item">
        |       <div class="post_cover">
        |         <a href="/article/${i.abbrlink}.html" title="${i.title}">
        |           <img srcset class="post_bg entered loaded" src="${i.cover}" alt="${i.title}" data-no-lazy>
        |           <div class="post_cover_info">
        |             <p class="post_cover_text">${i.description}</p>
        |           </div>
        |         </a>
        |       </div>
        |       <div class="post_info" onclick="window.open('/article/${i.abbrlink}.html', '_self')">
        |         <a class="article-title" href="/article/${i.abbrlink}.html" title="${i.title}">${i.title}</a>
        |       </div>
        |     </div>`).join('');
        |   document.querySelector("#homeTopGroup>.top_post_group").innerHTML = postsHtml
        | }
        | if(!sessionStorage.getItem("postsInfo")){
        |   fetch("/random.json")
        |   .then(res=>res.json())
        |   .then(data=>{
        |     console.log(1);
        |     sessionStorage.setItem("postsInfo", JSON.stringify(data));
        |     renderingPosts(data);
        |   })
        | }else{
        |   renderingPosts(JSON.parse(sessionStorage.getItem("postsInfo")));
        | }
        | if(true){
        |   const leftArrowTip = document.querySelector(".left-arrow-tip");
        |   const rightArrowTip = document.querySelector(".right-arrow-tip");
        |   const xscroll = document.getElementById("homeTopGroup");
        |   leftArrowTip.addEventListener("click", function () {
        |     xscroll.scrollTo({ left: 0, behavior: "smooth" }); // 回到最左边
        |   });
        |   rightArrowTip.addEventListener("click", function () {
        |     xscroll.scrollTo({ left: xscroll.scrollWidth, behavior: "smooth" }); // 回到最右边
        |   });
        |   function toggleArrowVisibility() {
        |     // 计算滚动位置与容器宽度的差值
        |     const scrollDiff = xscroll.scrollWidth - xscroll.scrollLeft - xscroll.clientWidth;
        |     if (xscroll.scrollLeft === 0) {
        |       // 在最左边，隐藏左箭头，显示右箭头
        |       leftArrowTip.style.opacity = "0";
        |       rightArrowTip.style.opacity = "1";
        |       rightArrowTip.style.zIndex = "1";
        |       leftArrowTip.style.zIndex = "-1";
        |     } else if (scrollDiff <= 1) {
        |       // 在最右边，隐藏右箭头，显示左箭头
        |       rightArrowTip.style.opacity = "0";
        |       leftArrowTip.style.opacity = "1";
        |       leftArrowTip.style.zIndex = "1";
        |       rightArrowTip.style.zIndex = "-1";
        |     } else {
        |       // 既不在最右边又不在最左边，显示两个箭头
        |       leftArrowTip.style.opacity = "1";
        |       rightArrowTip.style.opacity = "1";
        |       leftArrowTip.style.zIndex = "1";
        |       rightArrowTip.style.zIndex = "1";
        |     }
        |   }
        |   function topPostScroll() {
        |     if (document.getElementById("homeTopGroup")) {
        |       xscroll.addEventListener("mousewheel", function (e) {
        |         let v = -e.wheelDelta / 2;
        |         xscroll.scrollLeft += v;
        |         e.preventDefault();
        |       }, false);
        |       let isScrolling = false;
        |       xscroll.addEventListener("scroll", function scrollHandler() {
        |         if (!isScrolling) {
        |           isScrolling = true;
        |           setTimeout(function () {
        |             isScrolling = false;
        |             toggleArrowVisibility();
        |           }, 100);
        |         }
        |       });
        |     }
        |   }
        |   toggleArrowVisibility();
        |   topPostScroll();
        | }
        | try{
        |   document.removeEventListener('pjax:complete', catalogActive);
        |   document.addEventListener('pjax:complete', catalogActive);
        | }catch(e){}

3.在自定义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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
:root{
    --mj-white: #fff;
    --mj-card-bg: rgba(255,255,255,0.67);
    --mj-theme: #128adadb;
    --mj-secondbg: #ededed;
    --mj-card-border: #e3e8f7;
    --style-border: 2px solid rgba(0, 255, 255, 0.6);
    --anchor-border: 1px solid rgba(21, 158, 208, 0.8);
    --style-hover-border: 2px solid var(--mj-theme);
}
[data-theme=dark] {
    --mj-card-bg: rgba(0,0,0,0.6);
    --style-border: 2px solid rgba(56,211,203,0.8);
}
/* home top */
#home_top {
    width: 100%;
    margin-bottom: 20px;
}
.home_top_group {
    border-radius: 11px;
    overflow: auto;
    width: 100%;
    margin-bottom: 0;
}
.homeTopGroup {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
    overflow-x: score;
    border-radius: 11px;
}
.homeTopGroup::-webkit-scrollbar {
    display: none;
}

.homeTopGroup .category_group{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 200px;
    min-height: 166px;
}
.top_post_item>.post_cover>a{
    display: block;
}
.homeTopGroup .category_item {
    overflow: hidden;
    transform: scale(1);
    transition: .3s;
    height: 48%;
    border-radius: 12px;
}
.homeTopGroup .category_item a.category_button {
    height: 100%;
    width: 100%;
    background: var(--mj-card-bg);
    border-radius: 12px;
    display: inline-block;
    text-align: left;
    line-height: 4em;
    font-weight: 800;
    font-size: 16px;
    color: var(--mj-white);
    transition: all .4s cubic-bezier(.39,.575,.565,1);
    transform: scale(1);
    overflow: hidden;
}
.category_button_text {
    padding-left: 25px;
}
a.category_button i {
    font-size: 3rem;
    opacity: .3;
    position: absolute;
    right: 15px;
    top: 10%;
    transition: .3s;
    transform: rotate(-10deg);
    /*width: 100px;
    text-align: center;*/
}
a.category_button:hover i {
    opacity: .8;
    transition: .8s;
    transition-delay: .15s;
    transform: scale(1.1)
}
a.category_button:hover:after{
    width: 3rem;
    transition: .8s;
}
a.category_button:after {
    top: 45px;
    width: 1rem;
    left: 25px;
    height: 2.5px;
    background: var(--mj-white);
    content: "";
    border-radius: 1px;
    position: absolute;
    transition: .8s;
}
@media screen and (max-width: 1245px){
  .homeTopGroup,.home_top_group {
      border-radius: 0px;
  }
}
@media screen and (max-width: 768px){
  .homeTopGroup .category_group {
    min-width: 130px!important;
  }
  #home_top {
    width: calc(100% + 17px);
  }
  .home_top_group {
      overflow: visible;
  }
  .homeTopGroup {
      margin-left: -17px;
      scrollbar-width: none;
      width: calc(100% + 17px);
  }
  .homeTopGroup .category_group{
      margin-left: 17px;
  }
}
.top_post_group{
    display: flex;
    position: relative;
}
.top_post_group .top_post_item {
    display: flex;
    width: 200px;
    height: 166px;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 8px;
    background: var(--mj-card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: var(--style-border);
    color: var(--text-highlight-color);
    transition: 0.3s;
}
/* .top_post_group .top_post_item:first-child{
    right: 0px;
} */
.top_post_group .top_post_item:hover {
    border: var(--style-hover-border);
    background: #128adadb;
}
.top_post_group .top_post_item .post_cover {
    width: 100%;
    height: 110px;
    position: relative;
}
.top_post_group .top_post_item .post_cover img {
    object-fit: cover;
    width: 100%;
    height: 110px;
    background: var(--mj-secondbg);
}
.top_post_group .top_post_item .post_cover .post_cover_info {
    position: absolute;
    top: 0;
    width: 101%;
    height: 100%;
    opacity: 0;
    background-color: rgba(0,0,0,0.7) !important;
    transition: all 0.3s ease;
    display: flex;
} 
.top_post_group .top_post_item:hover .post_cover .post_cover_info{
    opacity: 1;
}
.top_post_group .top_post_item .post_cover .post_cover_info .post_cover_text{
    color: #fff;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.top_post_group .top_post_item .post_info a{
    color: var(--mj-fontcolor) !important;
    transition: 0;
}
.top_post_group .top_post_item:hover .post_info a{
    color: var(--mj-white) !important;
}
.top_post_group .top_post_item .post_info {
    padding: 6px 9px!important;
    transition: .3s;
    width: 100%;
    height: 100%;
}
.top_post_group .top_post_item .post_info .article-title {
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    justify-content: center;
    align-items: flex-end;
    align-content: center;
    font-weight: 800;
    font-size: 14px!important;
    padding: 0!important;
}

3.后记

对于一些需要这种方案的以及想要简洁风格的可以根据这篇文章进行修改。