QX-AI
GPT-4
QX-AI初始化中...
暂无预设简介，请点击下方生成AI简介按钮。
介绍自己
生成预设简介
推荐相关文章
生成AI简介

前言

Banner 处的文章推荐总是挂着那几个文章，静态博客要去经常换也麻烦，嗯，就是懒了

改为随机展示文章就解放双手啦

实现

首先当然得实现一个类似于我首页那样的Banner

1、在themes\butterfly\scripts\helpers\ 新建一个生成器 home_random_post.js

该生成器会将 matter 中 random 配置不为 false 的文章的基本信息输出到 random.json

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、js 请求该 json ，随机选取若干文章渲染展示到页面上

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
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 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")));
}

Banner 的实现各不相同，但适配自己的并不难，postsHtml 内的 hmtl 模板需要修改一下

这里放一下我的 pug 和 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
#home_top
  .home_top_group
    #homeTopGroup.homeTopGroup
      .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

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
: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%;
}
.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: auto;
    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 {
      width: calc(100% + 17px);
      margin-left: -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;
}

懒加载的修改

btf主题若开启了懒加载，可能会有些bug，文章图片不能正常被懒加载所加载，那干脆就不让懒加载去接管这些图片

修改 themes\butterfly\scripts\filters\post_lazyload.js

对返回值进行了修改
1
2
3
4
5
function lazyload (htmlContent) {
  const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  // 修改下面的返回值
  return htmlContent.replace(/(<img(?![^>]*\bdata-no-lazy\b)[^>]*? src=)/ig, `$1 "${bg}" data-lazy-src=`);
}

现在，只要加上了 data-no-lazy 属性的 img 标签，都不会被懒加载所接管

后记

期待 @Heo 对他 Banner 的大改