如何无需截图动态生成项目页面预览？

我有一个网站，该网站（即将）收纳我在互联网上的所有内容。目前我正在制作「作品」页面，用于展示全部项目（这些项目已上线但未被搜索引擎索引，例如「Aquarium」项目）。我想咨询：有没有办法无需为每个页面截图就能生成项目的页面预览？（我已在谷歌搜索但未找到解决方案）我期望实现的效果如图（Figma制作）。
*编辑1：iframe难以控制，我希望将预览转为可点击链接，但iframe无法满足此需求

以下是几种可行的解决方案：

• 无头浏览器自动生成预览截图：借助Puppeteer这类无头浏览器工具编写简单脚本，自动访问你的项目页面并生成指定尺寸的截图，之后将截图包装成可点击链接即可。
  安装Puppeteer：npm install puppeteer
  基础示例脚本：

  const puppeteer = require('puppeteer');
  
  async function generatePreview(url, outputPath) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle2' });
    // 生成指定尺寸的截图，可根据需求调整宽高
    await page.screenshot({ path: outputPath, width: 800, height: 600 });
    await browser.close();
  }
  
  // 调用示例，替换为你的项目地址和截图保存路径
  generatePreview('你的项目页面地址', './preview/aquarium.png');
  

  生成的截图只需套上<a>标签，就能成为可点击的项目预览，完美避开iframe的控制难题。

• 静态站点生成器构建阶段处理：如果你的网站基于Next.js、Gatsby这类静态站点生成器搭建，可以在项目构建阶段自动抓取所有项目页面生成预览图，将图片与对应项目的跳转链接关联，构建完成后直接在「作品」页面展示即可。

• 自定义轻量化预览卡片：若不想使用截图，可手动提取每个项目的核心视觉元素（如主色调、标题、关键UI片段），用HTML+CSS还原一个简化版的预览卡片，给整个卡片添加跳转链接。这种方式完全可控，还能保证预览风格与网站整体统一。

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