如何在Blogger站点实现随机文章跳转按钮功能？

问题根源 #

你的现有代码是从当前页面DOM中抓取.post-title a链接，但Blogger首页默认只加载最新的若干篇文章，历史文章并未渲染到页面里，所以只能跳转近期发布的内容，无法覆盖所有文章。

解决方案 #

改用Blogger官方的JSON Feed获取所有文章的链接，这样就能随机选择任何一篇历史文章了。

步骤1：更新底部HTML/JavaScript小工具的代码 #

把你原来的脚本替换为以下代码：

function randomPost() {
  // 替换成你的Blogger博客域名（比如http://yourblog.blogspot.com）
  var feedUrl = "http://###/feeds/posts/default?alt=json-in-script&callback=getRandomPost";
  
  // 创建script标签加载Feed（解决跨域访问限制）
  var script = document.createElement('script');
  script.src = feedUrl;
  document.body.appendChild(script);
}

function getRandomPost(data) {
  var posts = data.feed.entry;
  if (!posts || posts.length === 0) return;
  
  // 生成随机索引
  var randomIndex = Math.floor(Math.random() * posts.length);
  var targetPost = posts[randomIndex];
  
  // 提取文章的永久链接
  var postUrl;
  for (var i = 0; i < targetPost.link.length; i++) {
    if (targetPost.link[i].rel === 'alternate') {
      postUrl = targetPost.link[i].href;
      break;
    }
  }
  
  // 跳转到随机文章
  if (postUrl) {
    window.location.href = postUrl;
  }
  
  // 清理临时创建的script标签
  var tempScript = document.querySelector('script[src*="feeds/posts/default"]');
  if (tempScript) {
    document.body.removeChild(tempScript);
  }
}

步骤2：替换Feed地址中的占位符 #

将代码里的http://###/替换为你自己的Blogger博客域名（比如你的博客地址是http://myblog.blogspot.com，就改成http://myblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=getRandomPost）。

步骤3：保留原有页面列表配置 #

你顶部页面列表的代码无需修改，javascript:randomPost()这个链接调用是正确的：

{"link0":{"href":"http://###/","position":0,"title":"Home"},"1442808221004497204":{"href":"https://###","position":1,"title":"About"},"2724719100104741041":{"href":"https://###","position":2,"title":"Contact"},"link1":{"href":"javascript:randomPost()","position":3,"title":"Random"}}

原理说明 #

通过Blogger的JSONP Feed接口，可以获取到博客所有公开文章的元数据（包括链接），JSONP格式允许跨域加载数据，避免了浏览器的同源策略限制。随机索引生成后，从Feed中提取对应文章的永久链接并跳转，这样就能覆盖所有历史文章了。

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