# 为网页图片生成目录，并可点击跳转

> 本文公开全文。

原文：https://utgd.net/article/20933

世事纷繁，故网有纲，裘有领，以简驭之。过往，目录——无论深思熟虑还是机械排印——常常要仰赖资料提供者，读者往往无暇自己制作；但在数字时代，快速生成目录已非痴话，就阅读网页文章而言，我曾撰文《为 Safari 网页生成可点击的导航目录（Keyboard Maestro 为例》），至少为排版规整的网页自动生成了目录。

可如今的网页文章，早已不只是枯燥的黑白字符，不少文章还配有图片——乃至视频，但恕我暂且搁置——能否也为图片制作目录？此想法并非空穴来风，稍微考究一些的著作，若配图较多，很可能会配上图片索引（图版）——称谓不同，但功能与目录类似——吾辈不过是拿来主义。

而在网页上，图片目录自然不必拘泥于文本格式，完全可以转向缩略图的形式，平铺展示文中插图；同时，既然是电子媒介，最好令诸图片可直接点击，进而滚动到网页的对应位置。如此兼采传统图片目录与电子媒介之长，遂有本文方案。

常言道，一图胜千言，许多文章确实也围绕图片加以组织，例如我常看的几个烹饪类网站，经常发布“XX个你需要的厨房神器”这类文章，虽明知是广告，但偶尔也能捞到宝贝，只是通篇翻下来太浪费时间，此时，就可以引入图片目录，在几秒钟之内判断文章是否值得读。我尝试用可关闭的弹窗充当图片目录，提取当前页面上的图片并摆成矩阵——可能要等页面加载完毕，最好滚动到底部以激活之——某种程度上有点像一个货架或导购手册，一眼透视文章里即将提及的各种商品（尽管前后也有无关图片，但无害宏旨）。

若对某款商品感兴趣，可点击其缩略图，随后网页就会滚到对应位置，用起来就像电子书的目录一样方便。

至于实现方式，我一反手动编写的习惯，全部交由人工智能。曾几何时，网页自动化还是多数玩家避之不及的话题。网页自动化几乎不再依靠自动化工具的内置模块，主要工作基本在 Javascript 代码中完成，自动化工具不过是代码所套上的壳子。我此前设计自动生成可点击目录的方案时，也费了一番力气（我从事法律工作，并非写代码出身）。网页自动化是一个令人不知所措的开区间。

不过，GPT 改变了游戏。你只需描述你想在网页做什么，尽可能还原到具体的操作或元素，如展示弹窗、显示缩略图、如何排布图片、点击、滚动等等，然后把得到的代码丢进网页控制台试一试（快捷键是 ⌥Option\-⌘Command\-C，然后往显示有 \> 符号的输入框里甩 GPT 给出的代码即可）。当然，GPT 临时生成的代码可能毫无美感可言，但这不是本文所关心的——本文只管有没有用。

我通常用 Keyboard Maestro 运行 Javascript 代码，这是我用 Keyboard Maestro 套壳打包好的动作：Keyboard Maestro 版动作下载（GitHub）。理论上，只要一个自动化动作可以跑 Javascript 代码，你就可以移植过去。

除了自动化工具版，本方案也可以压制为 bookmarklet 小书签，方便在浏览器中直接运行——甚至在 iPad 和 iPhone 上也能跑！——不熟悉或不想购买自动化工具的读者同样可以尝试。

下面是已压制好的 bookmarklet 小书签链接，使用方式与需注意的细节可参考《工具论ABC：用 Bookmarklet 自制低技术通用浏览器插件》一文。

```
javascript:(function()%7B(function()%20%7Bconst%20images%20%3D%20document.querySelectorAll('body%20img')%3Bif%20(images.length%20%3D%3D%3D%200)%20%7Balert('No%20image')%3Breturn%3B%7Dconst%20totalImages%20%3D%20images.length%3Bconst%20cols%20%3D%20Math.ceil(Math.sqrt(totalImages))%3Bconst%20rows%20%3D%20Math.ceil(totalImages%20%2F%20cols)%3Bconst%20container%20%3D%20document.createElement('div')%3Bcontainer.style.position%20%3D%20'fixed'%3Bcontainer.style.top%20%3D%20'0'%3Bcontainer.style.left%20%3D%20'0'%3Bcontainer.style.width%20%3D%20'100%25'%3Bcontainer.style.height%20%3D%20'100%25'%3Bcontainer.style.backgroundColor%20%3D%20'rgba(0%2C%200%2C%200%2C%200.8)'%3Bcontainer.style.display%20%3D%20'flex'%3Bcontainer.style.flexWrap%20%3D%20'wrap'%3Bcontainer.style.alignItems%20%3D%20'center'%3Bcontainer.style.justifyContent%20%3D%20'center'%3Bcontainer.style.zIndex%20%3D%20'10000'%3Bcontainer.style.overflow%20%3D%20'auto'%3Bconst%20closeButton%20%3D%20document.createElement('button')%3BcloseButton.innerText%20%3D%20'Close'%3BcloseButton.style.position%20%3D%20'fixed'%3BcloseButton.style.top%20%3D%20'10px'%3BcloseButton.style.right%20%3D%20'10px'%3BcloseButton.style.padding%20%3D%20'10px'%3BcloseButton.style.backgroundColor%20%3D%20'%23fff'%3BcloseButton.style.border%20%3D%20'none'%3BcloseButton.style.cursor%20%3D%20'pointer'%3BcloseButton.style.zIndex%20%3D%20'10001'%3BcloseButton.addEventListener('click'%2C%20()%20%3D%3E%20%7Bdocument.body.removeChild(container)%3B%7D)%3Bcontainer.appendChild(closeButton)%3Bimages.forEach(img%20%3D%3E%20%7Bconst%20thumb%20%3D%20document.createElement('img')%3Bthumb.src%20%3D%20img.src%3Bthumb.style.maxWidth%20%3D%20%60calc(100%25%20%2F%20%24%7Bcols%7D%20-%2010px)%60%3Bthumb.style.maxHeight%20%3D%20%60calc(100%25%20%2F%20%24%7Brows%7D%20-%2010px)%60%3Bthumb.style.margin%20%3D%20'5px'%3Bthumb.style.cursor%20%3D%20'pointer'%3Bthumb.addEventListener('click'%2C%20()%20%3D%3E%20%7Bconst%20rect%20%3D%20img.getBoundingClientRect()%3Bwindow.scrollTo(%7Btop%3A%20rect.top%20%2B%20window.scrollY%20-%20(window.innerHeight%20%2F%202%20-%20rect.height%20%2F%202)%2Cbehavior%3A%20'smooth'%7D)%3Bdocument.body.removeChild(container)%3B%7D)%3Bcontainer.appendChild(thumb)%3B%7D)%3Bdocument.body.appendChild(container)%3B%7D)()%7D)()
```

实施本文方案前，我若是没有闲暇，往往会跳过大合集类型的文章，但有了能够快速透视网页图片的方法后，我也不介意用几秒钟快速扫一眼，事实上也确实刷到过值得买的商品。回顾前后，就好比一个长期觉得蟹腿吃着麻烦的人获得了吃蟹专用道具“蟹八件”，原本棘手的食物——棘手到可能不宜称之为食物——忽然变得可及，不再弃之可惜。

除了商品推荐，再如食谱集锦或每周图文回顾类的资讯，同样可凭图片目录迅速检视之。

话说回来，如今用 GPT 制作的自动化工具，近似于大批量生产的冲压餐具，或许不见往昔手工作品的精致。若日后此种生产方式进入主流，后果也值得深思。

---

[前往标准阅读页](https://utgd.net/article/20933?audience=web)