Karakeep（原 Hoarder）Web 界面全览：首页、标签、列表、书签预览与设置逐屏详解-编程实验室

Karakeep（原 Hoarder）Web 界面全览：首页、标签、列表、书签预览与设置逐屏详解

【免费下载链接】hoarderA self-hostable bookmark-everything app (links, notes and images) with AI-based automatic tagging and full text search项目地址: https://gitcode.com/GitHub_Trending/ho/hoarder

Karakeep（原 Hoarder）是一款以自托管为第一优先级的开源「Bookmark Everything」应用，可统一收藏链接、笔记与图片，并借助 AI 自动打标签、全文与语义搜索。本文以官方入门文档中的界面截图章节为主体，逐屏讲解 Web 端从首页到书签预览的核心界面布局、暗色模式、标签与列表组织方式、设置中心与分享流程，并结合仓库源码说明每个界面背后的实际实现与访问路径，帮助你快速建立对 Karakeep 产品形态的整体认知。

界面截图从哪来：文档位置与资源目录

本文内容对应官方文档 02-screenshots.md（当前主线版本见 docs/docs/01-getting-started/02-screenshots.md），属于「快速上手（Getting Started）」系列的第二篇，紧随 01-intro.md 的功能总览之后，用于以可视化方式呈现应用的主要使用界面。

所有截图资源均存放在 docs/static/img/screenshots/ 目录下，包括homepage.png、homepage-dark.png、all-tags.png、all-lists.png、bookmark-preview.png、settings.png、share-sheet.png（以及未出现在该文档中的admin.png）。这些截图对应的 Web 前端实现位于 apps/web，是一个基于 Next.js 构建的应用（路由结构见 apps/web/app/dashboard 与 apps/web/app/settings）。下文将按照文档顺序逐屏展开。

首页（Homepage）

首页是登录后的默认落地界面，集中展示当前用户收藏的全部书签，并支持直接在此开始新的收藏。从源码看，首页由 apps/web/app/dashboard/bookmarks/page.tsx 渲染，它挂载了<Bookmarks query={{ archived: false }} showEditorCard={true} />组件——archived: false表示默认只展示未归档的书签，showEditorCard: true则允许在列表顶部就地输入 URL 或文本快速新建书签，无需跳转到单独页面。

整个仪表盘的框架由 apps/web/app/dashboard/layout.tsx 提供，其侧边栏导航项包括「首页（Home）」「搜索（Search，仅在启用搜索插件时显示）」「标签（Tags）」「高亮（Highlights）」「归档（Archive）」，并在分隔线下方通过AllLists组件直接内嵌全部列表，方便随时按列表过滤书签。

首页暗色模式（Homepage Dark Mode）

暗色模式是 Karakeep 内置的界面特性（在 01-intro.md 的功能清单中列为Dark mode support）。同一首页在暗色主题下自动切换为深色配色，适合夜间或低光照环境使用。

从实现上看，主题切换基于next-themes完成：apps/web/components/theme-provider.tsx 中通过useTheme()读取当前主题并据此渲染，例如在theme == "dark"时启用对应的深色样式分支。这意味着主题可以跟随系统偏好自动切换，也可由用户在设置中手动指定，Web 端、移动端与浏览器扩展保持一致的视觉体验。

标签页（Tags）

标签是 Karakeep 组织书签的核心手段之一。标签页以标签为维度聚合展示所有书签，点击某个标签即可查看打上该标签的全部内容，便于跨列表地按主题归拢知识。

从源码看，该页面由 apps/web/app/dashboard/tags/page.tsx 渲染，内部使用AllTagsView组件（位于 apps/web/components/dashboard/tags）；单个标签下的书签列表则对应 apps/web/app/dashboard/tags/[tagId]/page.tsx。值得强调的是，Karakeep 的标签能力与 AI 深度绑定——文档 01-intro.md 明确指出应用使用 LLM 对收藏内容进行自动打标签（LLM-based automatic tagging），并支持通过 ollama 接入本地模型，因此即使不手动整理，新收藏的内容也会被自动归类到合适标签下。

列表页（Lists）

列表（Lists）是 Karakeep 中更偏「收藏夹/文件夹」语义的组织方式，适合按项目、主题或使用场景划分内容。列表页集中展示当前用户拥有的全部列表，点击进入后可查看该列表下的书签。

对应实现包括列表总览页 apps/web/app/dashboard/lists/page.tsx 与单个列表页 apps/web/app/dashboard/lists/[listId]/page.tsx。此外，如前述仪表盘布局所示，侧边栏通过 apps/web/components/dashboard/sidebar/AllLists.tsx 常驻展示所有列表，实现「一键切换列表视图」的高频操作。根据 01-intro.md 的功能说明，列表还支持与他人协作共享（Collaborate with others on the same list），适合团队共同维护同一收藏库。

书签预览（Bookmark Preview）

书签预览是点击任意书签后进入的详情界面，用于查看书签的完整内容与元信息。从源码看，该界面由 apps/web/app/dashboard/preview/[bookmarkId]/page.tsx 提供，它通过api.bookmarks.getBookmark({ bookmarkId })拉取指定书签数据并交给BookmarkPreview组件渲染；若书签不存在则返回 404（notFound()）。在桌面端，预览以弹窗模态（modal）形式呈现，路由对应 apps/web/app/dashboard/@modal/(.)preview/[bookmarkId]/page.tsx。

结合 01-intro.md 的功能清单，预览界面承载了相当丰富的能力：对链接自动抓取标题、描述与缩略图；在内容上标记并保存高亮（Highlights）；将书签归档；查看 AI 生成的摘要与自动标签；对于图片书签还可基于 OCR 提取文字。配合全文与语义搜索，用户可以真正做到「存得进来、找得回去」。

设置（Settings）

设置中心是管理账户、AI 能力、数据备份与自动化规则的统一入口。从 apps/web/app/settings/layout.tsx 的侧边栏定义与 apps/web/app/settings 的目录结构来看，设置项包括：

用户信息（Info）：账户资料与基础信息（/settings/info）；
用量统计（Stats）：查看收藏、标签等使用统计数据（/settings/stats）；
订阅（Subscription）：仅当服务端配置了 Stripe 时显示（/settings/subscription）；
AI 设置：配置 AI 提供商与自动打标签/摘要能力（/settings/ai）；
API 密钥（API Keys）：为 CLI、MCP 等外部客户端签发访问密钥（/settings/api-keys）；
备份（Backups）：创建与下载数据库备份（/settings/backups）；
导入（Import）：从 Chrome、Pocket、Linkwarden、Omnivore 等来源批量导入书签（/settings/import）；
规则引擎（Rules）：配置自动化管理规则（/settings/rules）；
Webhooks：配置事件回调（/settings/webhooks）；
Feed：管理 RSS 自动收藏源（/settings/feeds）；
资源（Assets）：管理存储的图片等资源（/settings/assets）；
失效链接（Broken Links）：检查并处理失效链接（/settings/broken-links）。

设置页面通常会随服务端配置动态增减条目（如订阅项仅在 Stripe 已配置时出现），这正是自托管应用「按部署环境裁剪功能」的典型体现。

分享（Sharing）

分享是 Karakeep「快速收藏一切」理念的落地点：从浏览器扩展、移动端系统分享面板或外部应用将链接、文本直接发送给 Karakeep，即可立即完成收藏，而无需打开 Web 应用手动录入。官方文档 quick-sharing.md 对这一能力做了专门说明，覆盖 iOS/Android 移动应用、Chrome/Firefox 扩展等入口。

从架构上看，分享入口与 Web 端通过同一套收藏 API 对接：浏览器扩展位于 apps/browser-extension，移动端分享逻辑位于 apps/mobile/app/sharing.tsx 与 apps/mobile/lib/shareBookmark.ts。通过各端「快速捕获」能力，用户在任何阅读场景下都能以最短路径把内容归入自己的收藏库，再由后端的 AI 自动打标签、全文索引与归档流程接手处理。

小结

通过这组官方截图可以快速把握 Karakeep Web 端的核心使用路径：在首页收藏与浏览书签 → 用标签和列表双维度组织内容 → 在预览页阅读、高亮与归档 → 在设置中心完成账户、AI 与备份配置 → 通过浏览器扩展与移动端分享随时快速收藏。对开发者而言，每个界面都能在 apps/web 中找到对应的 Next.js 路由与组件实现，截图资源则统一维护在 docs/static/img/screenshots/，可作为界面设计、文档编写与二次开发的直接参考。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考