article_image

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

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

Alt text
《图说日本美术史》的图版一览,可惜未配页码

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

Alt text
一键生成缩略图矩阵,点击图片即可滚动到网页的对应位置

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

Alt text
原网页和缩略图

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

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

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

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

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

Alt text
小书签的效果,与 Keyboard Maestro 版无异

下面是已压制好的 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)()

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

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

Alt text
各种应用图片目录的场景

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


author_avatar

Lawyer, macOS/iOS Automation Amateur