要在 Blogger 中实现按钮点击后切换跳转链接，核心思路并不复杂：在页面中放置一个按钮，通过 JavaScript 监听它的点击事件，每次点击时从预设的链接数组中取出下一个地址，然后用 window.location.href 完成跳转。不过 Blogger 作为一个托管博客平台，对 HTML 和脚本的插入位置有一定限制，实际操作时需要选择合适的挂载方式，避免主题代码被压缩或过滤导致脚本失效。
一、实现思路：用数组管理跳转链接
按钮切换跳转链接的核心是维护一个链接队列。可以把所有需要轮换的网址放进一个 JavaScript 数组里，再声明一个变量记录当前已经跳转到第几个。每次点击按钮时，先取出对应索引的链接，然后把索引加一；当索引超出数组长度时，重新归零，形成一个循环。这样用户每次点击都会跳到不同的地址，不需要刷新页面重新加载脚本。
这里有一个容易忽略的细节：window.location.href 一旦赋值，浏览器会立即发起跳转，当前页面的 JavaScript 执行会中断。因此必须在设置跳转之前完成索引更新，否则索引永远不会变化，按钮永远跳第一个链接。正确的顺序是先计算下一个索引，再执行跳转。如果还需要记录用户的点击次数，可以同步写入 localStorage，但要注意跨页面读取的时机。
另外，如果只是想让按钮在多个链接之间随机跳转，也可以用 Math.random() 从数组中随机选取，但随机方案无法保证每次点击的结果不同，本文重点讨论的是顺序切换，因为这种需求在“轮播跳转”“多镜像下载”等场景中更常见。
二、在 Blogger 中添加按钮和脚本的两种方式
Blogger 提供了两种插入自定义 HTML 和 JavaScript 的途径。第一种是在「布局」页面中添加一个「HTML/JavaScript」小工具，把按钮和脚本一起粘贴进去。这种方式的好处是不用修改主题源码，适合不定期替换内容。但小工具里的脚本会被包裹在特定容器中，如果脚本依赖页面其他元素，需要通过 document.getElementById 直接定位，不能直接写内联事件。
第二种是进入「主题」→「修改 HTML」，找到 <body> 部分，在合适的位置插入按钮和脚本。这种方式的自由度更高，可以把脚本放在页面底部，确保 DOM 加载完成后再绑定事件。但修改主题有一定风险，操作前建议先备份当前主题。对于习惯了改代码的用户来说，直接编辑主题更可控，尤其是需要把脚本与文章内容分离时。
无论采用哪种方式，都要避免在按钮的 HTML 属性中使用 onclick 内联事件。Blogger 的某些模板可能会对属性内容进行过滤或转义，导致脚本无法执行。更稳妥的做法是给按钮设置一个唯一的 id，然后在独立的 <script> 块中使用 addEventListener 绑定事件。脚本最好放在按钮之后，或者使用 DOMContentLoaded 事件包裹。
三、完整代码示例与细节解析
下面给出一个可直接使用的示例。假设按钮的 id 为 switchBtn，链接数组包含三个地址，点击按钮后依次跳转，循环往复。第一段是 HTML 结构，第二段是 JavaScript 逻辑。
<!-- 放到 Blogger 页面中 --> <button id="switchBtn" type="button">点击切换跳转</button>
// 链接队列，按顺序轮换
var links = [
"https://www.ipipp.com/page1",
"https://www.ipipp.com/page2",
"https://www.ipipp.com/page3"
];
var currentIndex = 0;
document.getElementById("switchBtn").addEventListener("click", function() {
// 先取出本次要跳转的链接
var target = links[currentIndex];
// 索引加一，超出长度则归零
currentIndex = (currentIndex + 1) % links.length;
// 最后执行跳转
window.location.href = target;
});
代码中使用了取模运算 % 来让索引自动循环，比手动判断 if 更简洁。注意 currentIndex 必须是全局变量，如果放在事件回调内部声明，每次点击都会重新初始化为 0，导致永远跳第一个链接。如果你不希望用户在当前页面停留过久，可以在跳转前加入短暂的视觉反馈，比如修改按钮文字为“正在跳转...”，但不要用 alert 弹窗，因为弹窗会阻塞跳转流程。
如果链接较多，维护数组会比较繁琐。可以把链接写在一个 <script> 块的 JSON 对象中，或者直接使用 Blogger 的变量功能动态输出。但 Blogger 模板变量主要服务于布局和文章数据，对于纯静态的链接列表，手写数组反而更直观。另外，如果链接来自第三方 API，需要用 fetch 异步获取后再绑定点击事件，此时要注意事件绑定时机，避免用户点击时数据尚未加载完成。
四、常见问题与优化：localStorage 与防误触
每次页面刷新后，currentIndex 都会重置为 0，用户第一次点击永远跳到第一个链接。如果希望记住用户上次跳转到哪个链接，可以用 localStorage 持久化索引。在页面加载时读取存储值，点击后更新存储。示例代码只需要在原有基础上增加几行。
// 读取上次保存的索引，没有则默认为 0
var currentIndex = parseInt(localStorage.getItem("switchIndex") || "0", 10);
document.getElementById("switchBtn").addEventListener("click", function() {
var target = links[currentIndex];
currentIndex = (currentIndex + 1) % links.length;
localStorage.setItem("switchIndex", currentIndex);
window.location.href = target;
});
需要注意的是，localStorage 只能在同源页面间共享，如果跳转目标不是当前域名，索引记录仍然只对当前页面有效。另外，当链接数组长度变化时，存储的索引可能越界，这时可以在初始化时加一个判断：if (currentIndex >= links.length) currentIndex = 0;。不过大多数场景下链接列表是固定的，无需过度设计。
还有一个常见问题是用户快速连续点击按钮，可能会触发多次跳转，导致浏览器只执行最后一次赋值。虽然 window.location.href 是同步操作，但连续点击时前面的跳转可能被后面的覆盖。可以在点击后立即禁用按钮，例如设置 this.disabled = true;，等跳转自然发生。由于页面即将卸载，禁用的状态不会残留，下个页面重新加载后按钮依然可用。
对于移动端用户，按钮的点击区域要足够大，建议设置 min-width 和 padding。如果按钮在 Blogger 文章内，部分模板会限制按钮的样式，可以通过 !important 覆盖，但要谨慎使用，避免影响主题整体风格。最后提醒一句：所有链接都必须以 https:// 或 http:// 开头，否则浏览器可能把跳转当作相对路径处理，导致 404。