为您的链接聚合器或目录自动化网站缩略图

Source: Dev.to

介绍

如果你在构建链接聚合器、目录或书签管理器，可能会想如何为每个链接显示预览缩略图，而不必手动截屏。解决方案是使用截图 API 自动化此过程。

截图 API 示例

async function captureThumb(url) {
  const response = await fetch('https://api.rendly.dev/v1/screenshot', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url,
      width: 1280,
      height: 720,
      format: 'webp',
      quality: 80
    })
  });

  if (!response.ok) throw new Error(`Screenshot failed: ${response.status}`);
  return response.json();
}

队列处理

当新 URL 进入系统时，将其存入数据库并向缩略图队列添加任务。

async function onNewLink(link) {
  await db.links.create({ url: link.url, title: link.title, thumb: null });
  await thumbnailQueue.add({ linkId: link.id, url: link.url });
}

thumbnailQueue.process(async (job) => {
  const { linkId, url } = job.data;
  const result = await captureThumb(url);
  await db.links.update(linkId, { thumb: result.url });
});

定期刷新

网站会变化，缩略图可能会过时。按计划刷新陈旧的缩略图。

async function refreshStaleThumbs() {
  const staleLinks = await db.links.where(
    'thumb_updated_at < ?',
    new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // 30 days
  );

  for (const link of staleLinks) {
    await thumbnailQueue.add({ linkId: link.id, url: link.url, refresh: true });
  }
}

懒加载与占位符

懒加载

[Image: ${link.title}]

备用占位符

function thumbUrl(link) {
  return link.thumb || `/placeholders/${getDomainColor(link.url)}.svg`;
}

响应式尺寸

为不同场景提供不同尺寸的缩略图。

const listThumb = await captureThumb(url, { width: 640, height: 360 });
const detailThumb = await captureThumb(url, { width: 1280, height: 720 });

使用场景

• 链接聚合器（例如带预览的 Hacker News）
• 书签管理器（Raindrop.io、Pocket 风格）
• 网络目录（精选工具、资源列表）
• 作品集网站（展示项目缩略图）
• 竞争分析仪表盘

扩展考虑

大多数截图 API（包括 Rendly）都提供分层定价，使其在大规模使用时仍然经济实惠。

结论

自动化缩略图将“可有可无”的功能转变为产品的可靠组成部分。其模式很简单：

1. 在写入时捕获。
2. 使用队列实现可扩展性。
3. 定期刷新。

用户将获得更丰富的预览，而你再也不需要手动截屏。