Banner随机文章展示

前言

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

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

实现

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

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

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

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

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

#home_top
  .home_top_group
      .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

: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

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 的大改

轻笑Chuckle

文章目录

前言

实现

懒加载的修改

后记

评论

站点