基于Li子元素实现按标签展示最新文章的Recent Posts Box

嘿，我来帮你搞定这个需求！要让5个li:nth-child元素分别对应不同标签的最新文章，咱们得对原代码做几个关键调整，下面一步步来：

一、核心思路 #

原代码是一次性请求单个标签（或全站）的5篇文章，现在要改成分别请求5个指定标签的各1篇最新文章，然后把每篇文章渲染到对应的li位置里，刚好对应CSS里预设的5个布局位置。

二、修改后的完整JavaScript代码 #

function FeaturedPost(a) { 
  (function(e) { 
    var h = { 
      blogURL: "", 
      MaxPost: 1, // 每个标签只取1篇最新文章
      idcontaint: "#featuredpost", 
      ImageSize: 500, 
      interval: 10000, 
      autoplay: false, 
      loadingClass: "loadingxx", 
      pBlank: "https://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif", 
      MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
      tagList: [] // 新增：存放5个指定标签的数组
    }; 
    h = e.extend({}, h, a); 
    var g = e(h.idcontaint); 
    var c = h.blogURL; 
    if (h.blogURL === "") { 
      c = window.location.protocol + "//" + window.location.host 
    } 
    // 提前初始化5个空li，对应每个标签的位置
    g.html('<div id="slides"><ul class="randomnya"><li></li><li></li><li></li><li></li><li></li></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass); 

    // 渲染单篇文章到指定索引的li
    var f = function(w, index) { 
      var q, k, u, l = "";
      // 处理标签下无文章的情况
      if (!w.feed.entry || w.feed.entry.length === 0) {
        l = '<a href="' + c + '" title="No posts found"><div class="overlayx"></div><img class="random" src="' + h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1") + '" title="No posts found"><h4>No posts found</h4></a>';
        e("ul.randomnya li:eq(" + index + ")", g).html(l);
        return;
      }
      var s = w.feed.entry[0]; // 取该标签的最新1篇
      // 获取文章跳转链接
      for (var n = 0; n < s.link.length; n++) { 
        if (s.link[n].rel == "alternate") { 
          q = s.link[n].href; 
          break 
        } 
      } 
      // 获取文章缩略图（处理无缩略图的情况）
      if ("media$thumbnail" in s) { 
        u = s.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize + "-c") 
      } else { 
        u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1") 
      } 
      k = s.title.$t; 
      // 拼接文章HTML结构（修复原代码未定义变量的bug）
      l += '<a href="' + q + '" title="' + k + '"><div class="overlayx"></div><img class="random" src="' + u + '" title="' + k + '"><h4>' + k + '</h4></a>';
      // 插入到对应索引的li中
      e("ul.randomnya li:eq(" + index + ")", g).html(l);
    }; 

    var b = function() { 
      // 循环请求每个标签的Feed数据
      h.tagList.forEach(function(tag, index) {
        var feedUrl = c + "/feeds/posts/default/-/" + tag + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script";
        e.ajax({ 
          url: feedUrl, 
          success: function(data) { f(data, index); },
          dataType: "jsonp", 
          cache: true 
        });
      });

      // 保留原有的轮播交互逻辑
      setTimeout(function() { 
        e("#prevx").click(function() { 
          e("#slides li:first").before(e("#slides li:last")); 
          return false 
        }); 
        e("#nextx").click(function() { 
          e("#slides li:last").after(e("#slides li:first")); 
          return false 
        }); 
        if (h.autoplay) { 
          var k = h.interval; 
          var l = setInterval("rotate()", k); 
          e("#slides li:first").before(e("#slides li:last")); 
          e("#slides").hover(function() { 
            clearInterval(l) 
          }, function() { 
            l = setInterval("rotate()", k) 
          }); 
          function rotate() { 
            $('#nextx').click(); 
          }; 
        } 
        g.removeClass(h.loadingClass) 
      }, 1000) // 调整加载延迟，避免过早移除loading状态
    }; 
    e(document).ready(b) 
  })(jQuery) 
}; 

// 调用时传入你的5个指定标签
$(document).ready(function() { 
  FeaturedPost({ 
    blogURL: "https://trit3k.blogspot.com", 
    idcontaint: "#featuredpost", 
    ImageSize: 500, 
    tagList: ["AI", "WebDev", "MobileTech", "Cybersecurity", "Gadgets"] // 替换成你博客实际的5个标签
  }); 
});

三、关键修改点说明 #

1. 新增tagList配置项：用来存放你需要的5个标签，调用时直接传入即可
2. 提前初始化空li：确保每个标签的文章都有对应的渲染位置，避免布局错乱
3. 重构请求逻辑：循环遍历标签数组，每个标签单独请求1篇最新文章
4. 修复原代码bug：解决了原代码中t、m变量未定义导致的渲染错误，同时增加了无文章时的占位处理
5. 优化加载逻辑：把动态计算的延迟改成固定1秒，避免加载过快导致的交互问题

四、补全后的CSS代码（原代码末尾不完整） #

#featuredpost { 
  width: 1170px; 
  overflow: hidden; 
  display: block; 
  position: relative; 
  margin:15px auto; 
} 
#slides *{ 
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box 
} 
#slides ul,#slides li{ 
  padding:0; 
  margin:0; 
  list-style:none; 
  position:relative 
} 
#slides ul{ 
  height:320px 
} 
#slides li{ 
  width:50%; 
  height:100%; 
  position:absolute; 
  display:none 
} 
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){ 
  display:block 
} 
#slides li:nth-child(1){ 
  left:0; 
  top:0 
} 
#slides li:nth-child(2){ 
  left:50%; 
  width:25%; 
  height:50% 
} 
#slides li:nth-child(3){ 
  left:75%; 
  width:25%; 
  height:50% 
} 
#slides li:nth-child(4){ 
  left:50%; 
  top:50%; 
  width:25%; 
  height:50% 
} 
#slides li:nth-child(5){ 
  left:75%; 
  top:50%; 
  width:25%; 
  height:50% 
} 
#slides li:nth-child(1) h4 { 
  overflow:hidden; 
  font-size:20px; 
  bottom:18px; 
  color:#fff; 
  width:auto; 
  text-align:center; 
  text-transform:uppercase; 
  height:auto; 
  font-family:Arial; 
  line-height:32px; 
  left:10px; 
  margin:0px; 
  margin-right:10px; 
} 
#slides li:nth-child(1) .label_text { 
  font-size:30px; 
  display:block; 
  bottom:10px; 
  left:10px; 
  padding:0; 
  font-family:Arial; 
} 
#slides a{ 
  background-color:rgba(40,40,40,1); 
  display:block; 
  width:100%; 
  height:100%; 
  overflow:hidden 
} 
#slides img{ 
  display:block; 
  width:100%; 
  height:auto; 
  border:0; 
  padding:0; 
  background-color:#333; 
  -moz-transform:scale(1.0) rotate(0); 
  -webkit-transform:scale(1.0) rotate(0); 
  -ms-transform:scale(1.0) rotate(0); 
  transform:scale(1.0) rotate(0); 
  transition:transform 0.3s ease; 
} 
#slides a:hover img{ 
  transform:scale(1.1) rotate(0); 
} 
#slides .overlayx{ 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.5); 
  z-index:1; 
} 
#slides h4{ 
  position:absolute; 
  bottom:0; 
  left:0; 
  z-index:2; 
  padding:10px; 
  margin:0; 
  color:#fff; 
  width:100%; 
  background:rgba(0,0,0,0.7); 
} 
#buttons{ 
  position:absolute; 
  bottom:10px; 
  right:10px; 
  z-index:3; 
} 
#buttons a{ 
  display:inline-block; 
  width:30px; 
  height:30px; 
  background:rgba(255,255,255,0.8); 
  margin-left:5px; 
  text-align:center; 
  line-height:30px; 
  color:#333; 
  text-decoration:none; 
  border-radius:50%; 
} 
#buttons a:hover{ 
  background:rgba(255,255,255,1); 
}

五、使用说明 #

只需要在调用FeaturedPost时，把tagList数组里的标签替换成你博客里实际存在的5个标签即可（注意标签名称要和Blogger后台的标签完全一致，区分大小写）。

内容的提问来源于stack exchange，提问作者KR4K