Banner随机文章展示(轻笑同款)

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,
          image: post.cover,
          description: post.description || "暂无简介"
        };
      });
  
    return {
      path: 'random.json',
      data: JSON.stringify(jsonData)
    };
  });

#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){}

: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;
}