Blogger按钮点击后切换跳转链接的实现方法求助

实现思路 #

用JavaScript的localStorage记录按钮点击状态——毕竟Blogger是静态平台，没法用服务器端存储，本地存储能在用户浏览器里保存点击次数，刷新页面也能记住状态。

具体步骤 #

1. 插入按钮HTML代码
   在Blogger文章/页面的「HTML视图」里，插入按钮代码（可自行修改按钮样式和文字）：

   <button id="toggle-link-btn" style="padding: 8px 16px; cursor: pointer; border: none; border-radius: 4px; background: #2563eb; color: white;">点击跳转</button>
   

   要是想用链接样式的按钮，也可以用<a>标签：

   <a id="toggle-link-btn" href="#" style="padding: 8px 16px; text-decoration: none; border-radius: 4px; background: #2563eb; color: white;">点击跳转</a>
   

2. 添加JavaScript逻辑
   同样在HTML视图里，把这段JS代码插在按钮代码后面：

   <script>
     // 获取按钮元素
     const toggleBtn = document.getElementById('toggle-link-btn');
     // 从本地存储取点击次数，默认0
     let clickCount = parseInt(localStorage.getItem('btnClickCount')) || 0;
   
     // 替换成你自己的两个跳转链接
     const firstLink = 'https://你的第一个目标链接.com';
     const secondLink = 'https://你的第二个目标链接.com';
   
     // 点击事件处理
     function handleBtnClick() {
       if (clickCount === 0) {
         // 首次点击跳第一个链接
         window.location.href = firstLink;
         clickCount = 1;
       } else {
         // 再次点击跳第二个链接
         window.location.href = secondLink;
         // 这里可选：如果想循环切换（点完第二个再点回到第一个），就把下面一行换成 clickCount = 0;
         clickCount = clickCount === 1 ? 0 : 1;
       }
       // 把更新后的次数存到本地存储
       localStorage.setItem('btnClickCount', clickCount.toString());
     }
   
     // 绑定点击事件
     toggleBtn.addEventListener('click', handleBtnClick);
   </script>
   

   注意：

   • 务必把firstLink和secondLink替换成实际的目标链接
   • 要是不需要循环切换，把clickCount = clickCount === 1 ? 0 : 1;改成clickCount = 0;即可，这样刷新后会回到首次点击状态

3. 保存测试
   切换回「撰写视图」确认按钮显示正常，发布后点击测试：首次跳转第一个链接，再次点击跳转第二个，刷新页面状态会被保留（除非用户清除浏览器缓存）。

补充说明 #

如果是全局按钮（比如放在页眉/页脚），可以把JS代码加到Blogger模板的「HTML编辑器」里，放在</body>标签之前，按钮代码放在对应的布局模块中就行。

内容的提问来源于stack exchange，提问作者Ye Htet Shwe