ArchiveBox UI 界面全景指南公开归档页、管理后台与快照视图逐屏解析【免费下载链接】ArchiveBox Open source self-hosted web archiving. Takes URLs/browser history/bookmarks/Pocket/Pinboard/etc., saves HTML, JS, PDFs, media, and more...项目地址: https://gitcode.com/gh_mirrors/ar/ArchiveBox本篇技术指南以 ArchiveBox 官方 UI 截图图库docs/Screenshots.md为主体逐屏梳理 ArchiveBox 自托管 Web 归档服务的全部主要界面——从登录页、公共快照列表、添加 URL 页面到 Django 管理后台的快照/归档结果/标签/用户/爬取/机器/API 令牌管理再到环境诊断与快照查看器的 20 余种输出类型视图。读完本文你将掌握每个界面对应的路由入口、底层视图与模板源码位置理解图库的自动生成机制与三种响应式视口规格并能据此快速定位、复现或二次开发 ArchiveBox 的任意 UI。图库概览覆盖范围、视口规格与生成机制截图图库由脚本bin/generate_ui_screenshot_gallery.py自动生成原文档标注 “Generated by bin/collect_ui_screenshots.sh. Do not edit by hand.”旨在覆盖 ArchiveBox主要的公开 UI 与认证 UI 视图而有意排除以下类型的端点原始 API 端点/api/...API 文档页健康检查/health/错误路由如urls.py中用于测试的/error/图库中每个视图都按三种视口规格各截取一张图对应CAPTURE_PROFILES定义bin/generate_ui_screenshot_gallery.py视口尺寸说明Desktop1600×1000桌面浏览器完整窗口Tablet1024×1366平板竖屏Mobile390×844现代手机竖屏图库还从同一个构建版本对三种视口进行截图并在文档头部标注生成时的 ArchiveBox 版本号与 Git revisionbuild_provenance()从pyproject.toml与git rev-parse HEAD读取。脚本同时生成 Markdown 图库docs/Screenshots.md与独立的 HTML 图库页并校验每个截图是否为合法的 PNG、尺寸是否与视口规格完全一致append_manifest中对 PNG 头 16-24 字节解析宽高比对。此外脚本还会对每个截图计算 SHA-256 哈希作为 Markdown 图片 URL 的?v...缓存版本号确保文档中引用的截图与产物一致。公开访问界面登录、公共快照列表、添加 URL 与快照查看ArchiveBox 的公开访问侧包含 4 类核心界面均可在 archivebox/core/urls.py 中找到对应路由。登录页路由/admin/login/源码archivebox/templates/admin/login.html登录页基于 Django 认证体系定制由 archivebox/core/admin_site.py 中的ArchiveBoxLoginView(LoginView)驱动。urls.py中/accounts/login/与/accounts/logout/会被重定向到/admin/login/与/admin/logout/并保留?next...参数保证未登录用户访问/add/等受保护页面时登录后能回到原页面。公共快照列表路由/public/源码archivebox/core/views.py 中的PublicIndexView模板 archivebox/templates/core/public_index.htmlPublicIndexView继承 DjangoListView按-bookmarked_at, -created_at倒序展示快照并挂载AcceleratedPaginator做分页。它只对外公开标记为公开的快照是无认证访问归档内容的主要入口。urls.py中还把public.html重定向到/public/兼容旧链接。添加 URL路由/add/源码archivebox/core/views.py 中的AddView表单 archivebox/core/forms.py 中的AddLinkForm模板 archivebox/templates/core/add.htmlAddView使用UserPassesTestMixin保护只有通过权限校验的用户可访问GET 请求时会从?url参数预填表单初始值方便浏览器书签或扩展直接跳转到预填页面。WebAddView是其子类用于/web/url这类“网页提交”场景会先查找该 URL 的最新快照再决定行为。urls.py中/admin/core/snapshot/add/也被重定向到/add/统一添加入口。快照查看抓取进行中路由/首页即最新快照查看器源码archivebox/templates/core/snapshot.html视图为 archivebox/core/views.py 中的HomepageView与SnapshotView首页路由由HomepageView处理当BASE_URL未配置时重定向到登录或返回 403当用户已认证且启用控制平面时直接跳到/admin/core/snapshot/。SnapshotView负责按 URL 路径查找快照并渲染其静态index.html。图库中的“capture in progress”截图展示的是快照正在抓取时的页面状态——此时还没有输出文件页面会渲染“无输出”的空状态#snapshot-empty-state提示 “No archive outputs yet”并带有刷新按钮与data-snapshot-state状态标记。管理后台核心仪表盘、快照表格与网格管理后台整体由 archivebox/core/admin_site.py 中的自定义ArchiveBoxAdmin(admin.AdminSite)提供路由挂在/admin/下。仪表盘路由/admin/源码archivebox/core/admin_site.py 的index()方法仪表盘以模型分组卡片形式列出当前用户有查看权限的各数据模型快照、归档结果、标签、爬取、Persona、机器、API 令牌等模板见 archivebox/templates/admin/index.html 与 index_model_card.html。AI Agent路由/admin/agent/源码archivebox/opencode/views.pyURL 配置见 archivebox/opencode/urls.pyurls.py中re_path(r^admin/agent/?(?$|opencode), include(archivebox.opencode.urls))将/admin/agent/挂到 opencode 插件的代理视图同时/assets/...由opencode_proxy_view提供前端资源。这是 ArchiveBox 内置的 AI Agent 管理界面。快照表格路由/admin/core/snapshot/源码archivebox/core/admin_snapshots.py快照的 Django admin 列表页支持按状态、标签、时间筛选与批量操作并内联展示各快照的归档进度与输出统计。快照网格路由/admin/core/snapshot/grid/源码archivebox/templates/admin/snapshots_grid.html网格视图以卡片墙形式展示快照模板中的 CSS 使用display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))自适应列数每个卡片.card包含缩略图.card-thumbnail、标题与元信息。缩略图默认加载预览图带loading-preview状态加载失败时通过onerror回退到备选缩略图全部失败则标记为.missing并显示缺失占位。快照管理详情路由/admin/core/snapshot/snapshot_id/change/源码archivebox/core/admin_snapshots.py单个快照的完整编辑页可查看与修改快照的 URL、标题、标签、状态、时间戳等字段并查看该快照下所有归档结果。快照文件浏览路由/?files1快照查看器带文件列表参数源码archivebox/templates/core/static_index.html?files1让快照查看器切换为文件列表模式直接浏览该快照在磁盘上保存的全部产出文件index.html、截图、PDF、媒体等是调试归档产物完整性的快捷入口。归档数据管理归档结果、标签与用户归档结果列表与详情列表路由/admin/core/archiveresult/详情路由/admin/core/archiveresult/id/change/源码archivebox/core/admin_archiveresults.pyArchiveResult记录每个 URL 在每种提取方法singlefile、screenshot、pdf、wget 等下的执行结果——状态、耗时、输出文件、错误信息。列表页可批量重试失败结果详情页展示单次提取的完整状态机信息。相关模型定义在 archivebox/core/models.py。标签列表与详情列表路由/admin/core/tag/详情路由/admin/core/tag/id/change/源码archivebox/core/admin_tags.py标签用于给快照打分类标记支持批量关联快照、重命名对应 API 中的 tag rename 端点与删除。前端内联标签编辑依赖 archivebox/static/admin-inline-tags.js。用户列表与详情列表路由/admin/auth/user/详情路由/admin/auth/user/id/change/源码archivebox/core/admin_users.py基于 Django 自带的auth.User管理页扩展用于维护可登录访问 ArchiveBox 的账户与权限。抓取与自动化爬取、调度与 Persona爬取列表与详情列表路由/admin/crawls/crawl/详情路由/admin/crawls/crawl/id/change/源码archivebox/crawls/admin.py模型 archivebox/crawls/models.pyCrawl 代表一次具体的抓取任务包含种子 URL 集合、状态、进度、产物统计与限额配置由配置快照冻结在任务上见迁移0018_freeze_crawl_config_snapshots.py。详情页可查看任务运行中的实时进度进度索引见迁移0009_crawl_progress_status_idx.py与每个快照的抓取结果。调度列表与详情列表路由/admin/crawls/crawlschedule/详情路由/admin/crawls/crawlschedule/id/change/源码archivebox/crawls/admin.py调度逻辑 archivebox/crawls/schedule_util.pyCrawlSchedule是周期性抓取任务的定义cron 表达式 要抓取的 URL 模式 配置调度器据此创建新的 Crawl。其运行参数同样以配置快照形式保存迁移0019_crawlschedule_config.py。Persona 列表与详情列表路由/admin/personas/persona/详情路由/admin/personas/persona/id/change/源码archivebox/personas/admin.py模型 archivebox/personas/models.pyPersona 是可复用的浏览器身份包含 Cookie、LocalStorage、UA 等会话状态导入逻辑见 archivebox/personas/importers.py用于让抓取任务以特定登录态访问站点。详情页展示其浏览器状态文件与关联的快照。机器与运行环境机器、网络接口、二进制与进程这一组界面由 archivebox/machine/admin.py 统一注册模型定义在 archivebox/machine/models.py对应机器检测逻辑 archivebox/machine/detect.py。界面路由说明Machines/admin/machine/machine/本机或远程归档机器的状态与能力描述Machine detail/admin/machine/machine/id/change/单台机器的配置与运行信息Network interfaces/admin/machine/networkinterface/机器网络接口IP、身份标识列表Network interface detail/admin/machine/networkinterface/id/change/单个网络接口详情Binaries/admin/machine/binary/归档依赖的外部二进制chrome、yt-dlp 等状态Binary detail/admin/machine/binary/id/change/单个二进制的版本、路径、可用性详情Processes/admin/machine/process/归档后台进程抓取、提取任务列表Process detail/admin/machine/process/id/change/单进程的资源占用、命令行、状态机详情其中 Processes 界面是 ArchiveBox 统一进程追踪的核心入口Process模型记录了后台任务从排队到运行、完成、失败的全生命周期并通过machine关联到具体执行机器。API 与集成API 令牌与 WebhooksAPI 令牌列表与详情列表路由/admin/api/apitoken/详情路由/admin/api/apitoken/id/change/源码archivebox/api/admin.pyAPI 令牌用于以程序化方式访问/api/...端点如archivebox add、搜索、爬取控制等。认证逻辑见 archivebox/api/auth.py令牌在 Web UI 中管理、在客户端以Authorization: Token ...方式使用。Webhook 列表与详情列表路由/admin/api/outboundwebhook/详情路由/admin/api/outboundwebhook/id/change/源码archivebox/api/admin.py事件派发逻辑 archivebox/api/webhooks.py出站 Webhook 允许在快照创建、更新等事件发生时向外部服务推送 JSON 通知用于与 CI、聊天机器人或其他自动化流水线集成。环境诊断与运维Environment、Configuration、Dependencies、Plugins、Workers、Logs这一组界面集中提供运行环境的状态诊断能力视图实现主要在 archivebox/config/views.py 与 archivebox/plugins/views.py。界面路由说明Environment/admin/environment/环境总览源码 archivebox/core/settings.py 相关视图Configuration/admin/environment/config/全部运行时配置项的只读表格Configuration detail/admin/environment/config/BASE_URL/单个配置项详情如BASE_URL含默认值、来源与说明Dependencies/admin/environment/binaries/外部依赖二进制的安装与可用性总览Dependency detail/admin/environment/binaries/abxbus/单个依赖详情以abxbus为例Plugins/admin/environment/plugins/已加载插件列表及其钩子注册情况Workers/admin/environment/workers/后台常驻 Workersupervisord 托管列表Worker detail/admin/environment/workers/supervisord/单个 Worker 的运行状态与配置Logs/admin/environment/logs/各服务日志文件列表Log detail/admin/environment/logs/supervisord/单个日志文件的尾部内容其中binaries_list_view/binary_detail_view会将磁盘探测到的二进制与数据库中的Binary模型记录合并比对get_db_binaries_by_name、render_binary_detail_description直接展示每个依赖的版本与状态worker_list_view则通过archivebox.workers.supervisord_util.get_existing_supervisord_process读取 supervisord 的实时进程信息日志页用_read_text_tail读取日志文件末尾内容LOG_DETAIL_TAIL_BYTES控制读取字节数避免加载超大日志。Snapshot View 输出类型URL Hash 驱动的查看器Snapshot Viewarchivebox/templates/core/snapshot.html是 ArchiveBox 最具代表性的界面同一快照的多种存档产物通过 URL 的#hash片段切换预览图库为此对 20 余种输出类型各截一组图。模板中的 JavaScript 监听window.location.hash变化const rawHash window.location.hash ? window.location.hash.slice(1) : 据此选中对应输出并滚动定位同时用localStorage持久化页头折叠状态。图库收录的 Snapshot View 变体完整清单如下#Hash 输出类型说明capture in progress无 hash抓取尚未完成、无输出的空状态singlefile#singlefileSingleFile 保存的完整单文件 HTMLscreenshot#screenshot整页截图预览wget#wgetwget 镜像的站点结构dom#domDOM 快照pdf#pdf打印版 PDFreadability#readabilityReadability 清洗后的正文阅读视图ytdlp#ytdlpyt-dlp 下载的媒体文件responses#responses抓取时的 HTTP 响应记录chrome_mhtml#chrome_mhtmlChrome 导出的 MHTMLdefuddle#defuddleDefuddle 提取的正文mercury#mercuryMercury Parser 提取的正文archivewebpage#archivewebpageArchiveWeb.page 的存档chrome#chromeChrome 原生抓取结果consolelog#consolelog页面 Console 日志dns#dnsDNS 解析记录sslcerts#sslcertsTLS 证书链信息redirects#redirects重定向链记录headers#headers响应头记录seo#seoSEO 相关元信息title、meta 等accessibility#accessibility可访问性审计输出htmltotext#htmltotextHTML 转纯文本trafilatura#trafilaturaTrafilatura 提取的正文liteparse#liteparseLiteParse 解析结果parse_html_urls#parse_html_urls从 HTML 解析出的链接parse_txt_urls#parse_txt_urls从纯文本解析出的链接parse_dom_outlinks#parse_dom_outlinks从 DOM 解析出的外链hashes#hashes各产物的哈希校验值header collapsed无 hash页头折叠后的紧凑模式从列表可以看出这些输出类型与 ArchiveBox 的提取插件体系一一对应每个提取器产生一种 ArchiveResultSnapshot View 以 hash 导航让用户在同一页面内自由切换查看不同格式的存档成果。图库生成脚本要求除“capture in progress”与“header collapsed”外的 Snapshot View 输出类型截图不少于 20 种从构建期保证了对这套多格式查看能力的完整视觉覆盖。响应式设计与视口基准图库的“一视图 × 三视口”结构直接体现了 ArchiveBox UI 的响应式设计目标Desktop1600×1000完整呈现管理后台的表格、批量操作与内联面板用于日常管理Tablet1024×1366验证网格卡片与表格在中屏下的换行与导航折叠Mobile390×844验证公开页面与快照查看器在手机上的可用性尤其是 Snapshot View 的多输出切换与页头折叠。对应的响应式样式可参考 archivebox/templates/admin/snapshots_grid.html 中media断点与grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))的自适应卡片布局以及 HTML 图库模板生成脚本内嵌样式在max-width: 900px时降级为单列布局的处理方式。如何在本地复现这套截图图库Screenshots 文档由bin/generate_ui_screenshot_gallery.py生成其工作流分为三步脚本main()支持三个子命令validate校验导航元数据——对每个目标路由发起请求断言 HTTP 状态为 200 且最终 URL 路径与预期一致validate_navigationappend将一张截图及其元数据名称、URL、源码路径、文件名、视口、宽高以及可选的 TTFB 首字节耗时追加进 manifest 清单同时校验 PNG 合法性并与CAPTURE_PROFILES中的期望尺寸逐像素比对append_manifestbuild读取 manifest按名称分组、按视口聚合强制要求每组包含桌面/平板/移动三张截图且必选视图清单完整最终同时渲染docs/Screenshots.md与独立 HTML 图库页并输出build.json与每个文件的 SHA-256 清单build_galleries。要复现你需要一个本地运行的 ArchiveBox 实例含测试数据与若干已完成的快照参考 docs/Quickstart.md 与 docs/Docker.md配置测试域名如admin.archivebox.localhost:9292、web.archivebox.localhost:9292、snap-id.archivebox.localhost:9292解析到本机以便无头浏览器访问按UI_SCREENSHOT_PROFILE、UI_SCREENSHOT_NAME、UI_SCREENSHOT_URL、UI_SCREENSHOT_SOURCE、UI_SCREENSHOT_FILENAME等环境变量驱动截图工具逐视图调用脚本的append与validate子命令最后执行build子命令生成图库。该脚本同时充当回归测试与文档生成器REQUIRED_VIEW_NAMES常量规定了图库必须覆盖的 36 个核心视图首次安装向导、登录、公共快照列表、添加 URL、管理仪表盘、AI Agent、快照表格/网格、各管理详情页、环境与配置页等任何缺失都会导致 build 失败并输出缺失清单从而防止 UI 重构时关键页面失去视觉回归覆盖。结语通过 Screenshots 图库可以快速建立对 ArchiveBox 界面的完整认知公开侧承担“浏览归档、提交新 URL、查看快照”的日常使用管理后台承担快照/结果/标签/用户/爬取/机器/API 令牌的全量运维Environment 系列页面提供依赖、插件、Worker 与日志的运行态诊断而 Snapshot View 则以 hash 导航将多种存档格式整合进单一查看器。结合 docs/Configuration.md 与 docs/Usage.md 等文档你可以进一步理解这些界面背后各配置项的语义若需对 UI 做深度定制或贡献图库生成脚本与各视图源码是理想的起点——任何对模板或视图的改动都可以通过重新生成图库得到全量视觉回归验证。【免费下载链接】ArchiveBox Open source self-hosted web archiving. Takes URLs/browser history/bookmarks/Pocket/Pinboard/etc., saves HTML, JS, PDFs, media, and more...项目地址: https://gitcode.com/gh_mirrors/ar/ArchiveBox创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考