/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}
2024年年底，我去参加了一场Python岗位的面试。技术面到了后半段，面试官突然问：“你做过哪些和爬虫相关的项目？”我当时从简历里挑了一个自认为讲起来最顺畅的：使用开源可视化爬虫工具Portia，搭建了一套面向公开数据的采集流程。起初我把它当成一个普通的项目介绍，没想到这一聊就收不住了。面试官对Portia的底层实现特别感兴趣，从规则是怎么生成的，到Scrapy的请求调度，再到Python的并发模型，连续追问了将近四十分钟。
这场面试逼着我把原本“拖一拖、点一点就能出数据”的工具认知，重新拆解成了一套能讲清楚原理、能应付追问、也能迁移到其他项目的知识体系。这篇文章就把整个准备过程和复盘结果写出来。对正在准备爬虫方向面试的读者来说，你能从中看到面试官关注哪些细节；对想用Portia做信息采集的读者来说，后面有一整段带命令、带截图逻辑、带坑点说明的实操流程，可以直接照着跑。
1. 面试开场：我为什么在Python面试里聊起Portia
1.1 项目背景，以及我当时是怎么选型
先说项目本身。当时团队需要从一批公开网站上持续采集商品信息和价格数据，用于内部的市场行情参考。数据量不算大，每天几千条，但采集对象分属好几套完全不同的页面结构。团队里写爬虫的只有我一个，其他同学对XPath和CSS选择器并不熟悉，指望他们自己写规则做采集不现实。
我筛选下来，比较合适的方向就是找一个可视化工具，把“写选择器”这件事变成“在网页上点一下”。对比过几款开源方案之后，选定了Portia。主要原因有三个：第一，它和我熟悉的Scrapy同属一个生态，底层是Scrapy的slybot引擎，以后如果要改成手写爬虫，迁移成本很低；第二，它有完整的Web操作界面，负责业务的同事也能上手；第三，它是开源的，代码可以直接拉下来看，遇到问题还能自己排查。这个选型逻辑，在面试里讲出来很加分，因为它展示的不只是“我会用工具”，而是“我了解我为什么选这个工具”。
1.2 可视化爬虫到底“可视化”在哪里
很多朋友一听可视化爬虫，以为它是一个不用写代码的机器人向导。实际用下来，它省掉的是“人工编写选择器”这层功夫，而不是“理解页面结构”这层功夫。
用Portia操作的时候，你在浏览器里打开目标页面，用鼠标选中某个标题、价格或者链接，工具会自动记录你选中的元素位置、对应的DOM结构，并尝试生成一个选择器规则。这些规则最终会落到一套可编辑的JSON或者Python代码里。也就是说，真正懂爬虫的人仍然可以打开项目文件去改规则，不懂爬虫的人则可以完全通过鼠标完成常规采集。这是一层非常巧妙的“可视化外壳”：它没有消灭底层逻辑，而是把底层逻辑封装在了图形界面背后。
面试官听到这里，通常会问一个问题：“那它和直接用SelectorGadget这类浏览器插件有什么区别？”区别就在于Portia不是帮你临时看一眼CSS路径，而是把规则持久化成了完整项目，包含Item定义、页面模板、爬取链接关系，以及后续的导出和部署能力。插件解决的是单次采集里的一个步骤，Portia解决的是“从配置到运行再到数据产出”的完整链路。
2. 拆开Portia：可视化爬虫的底层原理与架构
2.1 不是一个小脚本，而是三个组件
Portia最容易被低估的地方，就是它远不止一个前端的浏览器界面。从代码仓库看，它至少由三部分组成：负责展示和交互的Web前端、负责规则存储和项目管理的服务端、以及真正执行抓取的爬虫引擎slybot。
这三者的关系可以想象成一家餐厅：Web前端是点餐平板，你把想吃的菜（要采集的字段）点上去；服务端是后厨的排单系统，把客人需求转成后厨能看懂的任务单；slybot则是炒菜的厨师，拿着菜谱真正把食材变成成品。面试时把这个比喻讲出来，对方马上就知道你对整个链路有宏观理解，而不是只停留在页面点击这个表层。
slybot是Portia的执行核心，它本身是一个基于Scrapy的爬虫实现。常规Scrapy项目里，我们定义一个继承scrapy.Spider的子类，然后在parse方法里写提取逻辑。slybot则不同，它通过读取Portia生成的规则配置，把“页面在哪里、字段叫什么、点击哪个链接继续爬”等信息动态加载进来，这样同一个Spider类就能处理不同项目、不同页面结构的采集任务。
2.2 从“标注”到“规则”的生成链路
如果你在Portia界面里标注了一个商品标题，它内部实际做的
