如何用JavaScript动态修改Blogger缩略图URL至s1600分辨率

核心逻辑 #

Blogger生成的缩略图URL里会带分辨率标识（比如s72），咱们直接把这个标识替换成s1600就能拿到高分辨率图，不用复杂操作。

具体代码实现 #

先假设你的HTML结构是这样的（如果和你的实际代码有差异，调整选择器就行）：

<!-- intro-thumbnail模块 -->
<div class="intro-thumbnail">
  <img src="https://blogger.googleusercontent.com/...s72-c/..." alt="Intro图">
</div>

<!-- favourite-thumbnail模块 -->
<div class="favourite-thumbnail">
  <img src="https://blogger.googleusercontent.com/...s72/..." alt="Favourite图">
</div>

对应的JavaScript代码，直接替换URL里的分辨率参数：

// 选中两个模块里的所有缩略图
const thumbnails = document.querySelectorAll('.intro-thumbnail img, .favourite-thumbnail img');

// 遍历替换每个图片的URL
thumbnails.forEach(img => {
  // 替换s72或s72-c为s1600或s1600-c，保留裁剪参数
  img.src = img.src.replace(/s72(-c)?/g, 's1600$1');
});

关键注意点 #

• 如果你的缩略图URL里只有s72不带-c，把正则改成/s72/g就行
• 一定要等页面DOM加载完再执行这段代码，要么把JS放在</body>标签前，要么用DOM加载事件包裹：

document.addEventListener('DOMContentLoaded', function() {
  const thumbnails = document.querySelectorAll('.intro-thumbnail img, .favourite-thumbnail img');
  thumbnails.forEach(img => {
    img.src = img.src.replace(/s72(-c)?/g, 's1600$1');
  });
});

• 如果是动态生成的缩略图（比如通过Blogger模板标签渲染后才生成的），要确保在动态内容插入到页面后再执行替换代码

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