如何修复Blogger最近文章JS代码Uncaught ReferenceError: thumbnail is not defined错误

错误原因 #

• 仅当文章存在media$thumbnail（即设置了封面图）时，才会创建thumbnail变量，一旦某篇文章未设置封面图，代码进入渲染逻辑时就会报thumbnail is not defined错误
• 现有代码里的thumbUrl、thumbnail均未做局部变量声明，会默认挂载到全局作用域，循环过程中容易出现变量值异常覆盖的问题，也是偶发失效的诱因

修复方案 #

直接替换你的JS部分代码即可，修改逻辑如下：

1. 新增默认缩略图兜底，无封面图时也能正常展示
2. 所有变量补充局部声明，避免全局污染
3. 图片补充空alt属性，符合HTML规范

修复后的完整代码 #

JavaScript部分

function getPosts(json) {
  var posts = "<ul class=mbtlist>";
  // 可自行替换为你需要的默认占位图地址
  var defaultThumb = "https://via.placeholder.com/80x65?text=No+Image";
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var title = entry.title.$t;
    var url = entry.link.pop().href;
    // 先初始化thumbnail为默认占位图
    var thumbnail = defaultThumb;
    if (entry.media$thumbnail){
      var thumbUrl = entry.media$thumbnail.url;
      thumbnail = thumbUrl.replace("/s72-c/","/s80/");
    }
    posts += "<li><a class='mbttitle' href='" + url + "'><img src='" + thumbnail + "' alt=''>" + title + "</a></li>";
  }  
  posts += '</ul>';
  document.getElementById('container').innerHTML = posts;
}

CSS部分（无需修改，保留原有即可）

.mbtlist {
      list-style-type: none;
      overflow: hidden
    }
    .mbtlist li {
      margin: 0px auto 20px auto;
      clear: both;
      color: #666;
      font-family: Helvetica;
      font-size: 12px;
      border-bottom: 1px dotted #ddd;
      padding-bottom: 10px;
      overflow: auto;
    }
    .mbtlist .mbttitle {
      font-family: oswald;
      font-size: 16px;
      color: #0080ff;
      font-weight: normal;
      text-decoration: none;
    }
    .mbtlist .mbttitle:hover {
      color: #00A5FF;
    }
    font-family:georgia;
    font-size:15px;
    font-weight:bold
    }
    .mbtlist div span {
      margin: 0 10px 0 0;
      display: inline-block;
    }
    .mbtlist span {
      display: block;
      margin: 5px 0px 0px;
      padding-right: 5px;
    }
    .mbtlist .imore {
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      color: #666;
      line-height: 0.7em;
    }
    .mbtlist img {
      float: left;
      margin: 0px 10px 10px 0px;
      border: 6px solid #fff;
      padding: 0px;
      width: 80px;
      height: 65px;
      box-shadow: -1px -1px 4px #777;
    }
    .mbtlist .icontent {
      text-align: justify;
    }

HTML部分（仅替换JS片段即可，其余结构保留）

<div id="container"></div>
<script src="https://www.sebahotnews.org/feeds/posts/default/-/জাতীয়?max-results=5&alt=json&callback=getPosts"></script>

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