如何修改Tumblr photosets的点击跳转URL，使其在新标签页打开帖子详情

算力阿峰

2026-10-7

Tumblr嵌入iframe图集点击跳转问题解决方案

问题根因

Tumblr的photosets（图集）类帖子默认自带独立的预览交互逻辑，会绑定自定义点击事件拦截原生a标签跳转，且多数模板中图集的渲染逻辑和普通帖子分离，你之前修改的通用href规则不会自动作用到图集模块，因此出现适配失效的问题。

修复方案

方案1：修改模板图集渲染逻辑

直接修改Tumblr模板中的图集专属渲染段，从根源替换交互：

找到模板中{block:Photoset}对应的代码块
给整个图集模块外层包裹a标签，href设置为https://diestadtgaertner.tumblr.com/post/{PostID}，同时添加target="_blank"属性
移除原有图集代码中绑定的预览交互属性，包括onclick、data-open-photoset等自定义事件属性，避免事件拦截跳转

方案2：JS强制覆盖点击事件

如果不想调整模板结构，可以添加全局脚本统一处理图集跳转：
在模板</body>标签前插入以下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 可根据你的模板实际类名修改选择器
  const photosetClickableEls = document.querySelectorAll('.photoset, .photoset-item, .photoset img');
  const postDetailUrl = 'https://diestadtgaertner.tumblr.com/post/{PostID}';
  
  photosetClickableEls.forEach(el => {
    // 清除原有点击事件
    el.onclick = null;
    el.removeEventListener('click', el.click);
    // 绑定新标签页跳转逻辑
    el.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      window.open(postDetailUrl, '_blank');
    });
    // 兜底给a标签补全属性
    if(el.tagName.toLowerCase() === 'a') {
      el.setAttribute('href', postDetailUrl);
      el.setAttribute('target', '_blank');
    }
  });
});