如何在Blogger中聚合多页面Paytm类div至单页展示

我来帮你解决这个需求——把Blogger多个页面里带Paytm类的完整Div（包含对应的CSS样式）集中展示到单个页面，这里有两种实用的方法，你可以根据页面数量和维护成本选择：

方法一：JavaScript自动抓取（适合页面较多的场景） #

这种方法会自动加载指定页面的内容，提取所有Paytm类的Div并展示在合集页面，后续新增页面只需要更新URL列表即可。

步骤1：创建合集页面并添加基础样式 #

1. 在Blogger后台创建一个新页面（比如命名为「Paytm优惠券合集」）
2. 切换到页面的HTML编辑器（不要用可视化编辑器）
3. 先粘贴所有需要的CSS样式（确保Paytm Div的样式能正常显示），再添加页面结构和抓取脚本：

<style>
/* 复制原页面中所有相关CSS样式 */
body { font-family: Arial; }
.coupon { border: 5px dotted #bbb; width: 80%; border-radius: 15px; margin: 0 auto; max-width: 600px; }
.container { padding: 2px 16px; background-color: #f1f1f1; }
.promo { background: #ccc; padding: 3px; }
.expire { color: red; }
/* 合集页面专属样式（可选） */
.paytm-collection { max-width: 800px; margin: 20px auto; padding: 0 20px; }
</style>

<div class="paytm-collection">
  <h1>所有Paytm优惠券合集</h1>
  <!-- 用来存放抓取到的Paytm Div -->
  <div id="paytm-coupons-container"></div>
</div>

<script>
// 替换成你实际的Blogger页面URL列表
const targetPages = [
  "https://your-blog-url.blogspot.com/p/page-1.html",
  "https://your-blog-url.blogspot.com/p/page-2.html",
  // 继续添加更多包含Paytm优惠券的页面URL
];

const couponsContainer = document.getElementById("paytm-coupons-container");

// 异步抓取并提取Paytm元素
async function loadPaytmCoupons() {
  for (const pageUrl of targetPages) {
    try {
      // 加载目标页面HTML
      const response = await fetch(pageUrl);
      const pageHtml = await response.text();
      
      // 创建临时DOM解析页面内容
      const tempDom = document.createElement("div");
      tempDom.innerHTML = pageHtml;
      
      // 提取所有带Paytm类的Div
      const paytmElements = tempDom.querySelectorAll(".Paytm");
      
      // 将提取的元素添加到合集页面
      paytmElements.forEach(element => {
        couponsContainer.appendChild(element.cloneNode(true));
        // 添加分隔线区分不同页面的优惠券（可选）
        const separator = document.createElement("hr");
        separator.style.margin = "20px 0";
        couponsContainer.appendChild(separator);
      });
    } catch (error) {
      console.error(`加载页面 ${pageUrl} 失败：`, error);
      couponsContainer.innerHTML += `<p style="color:red;">无法加载页面 ${pageUrl} 的优惠券</p>`;
    }
  }
}

// 页面加载完成后执行抓取
window.addEventListener("load", loadPaytmCoupons);
</script>

关键注意事项： #

• 务必把targetPages数组里的URL替换成你自己的Blogger页面链接
• 如果原页面里的图片用的是相对路径（比如/w3images/hamburger.jpg），需要改成绝对路径（比如https://your-blog-url.blogspot.com/w3images/hamburger.jpg），否则在合集页面无法正常显示
• 这种方法依赖浏览器的同源策略，所有页面必须属于同一个Blogger域名，否则会出现跨域错误

方法二：手动复制粘贴（适合页面较少的场景） #

如果你的页面数量不多，手动复制会更稳定，不需要依赖脚本：

1. 打开每个包含Paytm优惠券的页面，切换到HTML编辑器
2. 找到所有<div class="Paytm">...</div>的完整代码块，复制下来
3. 打开合集页面的HTML编辑器，先粘贴所有需要的CSS样式（和方法一的样式部分一致）
4. 把复制的Paytm Div代码依次粘贴到合集页面的内容区域，保存即可

这种方法的优点是不需要担心脚本加载失败，缺点是后续新增优惠券页面需要手动更新合集页面。

内容的提问来源于stack exchange，提问作者abhishek kamble