Karakeep 界面全景导览从首页书签流到移动端分享的完整功能地图【免费下载链接】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本篇指南以官方 Screenshots 文档为线索逐屏拆解 Karakeep原 Hoarder这一自托管收藏一切应用的核心界面首页书签流、暗色模式、AI 标签管理、列表组织、书签预览、用户设置、管理后台与 iOS 分享面板。读完本文你将掌握每个界面背后的功能入口与对应源码位置快速判断这套界面体系是否满足你的自托管需求。文档与仓库对应关系本文所依据的官方截图文档位于 docs/versioned_docs/version-v0.28.0/04-screenshots.md当前主线版本对应的 docs/docs/01-getting-started/02-screenshots.md 内容基本一致。文档中的 8 张截图均存放在 docs/static/img/screenshots 目录与 Web 端、管理端、移动端的真实实现一一对应。下面按截图顺序逐一展开并给出各界面在仓库中的源码入口方便你对照阅读。首页Homepage书签一切的主战场首页是 Karakeep 的默认落点整体布局分为三栏左侧导航栏顶部为品牌名下方依次是 Home、Search、Tags、Highlights、Archive 等一级入口再往下是 LISTS 区域展示 All Lists、Favourites、In the News、Wishlist、Youtube 等列表及其书签数量底部显示版本号。这一导航结构对应 apps/web/components/dashboard/sidebar 目录下的侧边栏组件。中央内容区顶部有一个NEW ITEM快速录入框占位提示为Paste a link, write a note or drop an image...可直接粘贴链接、写笔记或拖入图片点击 Save 完成保存。这与 README 中Bookmark links, take simple notes and store images and pdfs的能力一致底层的文件拖放上传逻辑见 apps/web/components/dashboard/UploadDropzone.tsx。书签卡片流每张卡片包含预览图、标题、来源网址、保存日期和标签如 baking、cupcakes右上角提供收藏星标与更多操作按钮。这是自动抓取链接标题、描述与图片README 中 Automatic fetching for link titles, descriptions and images在界面层的直接呈现。从路由结构看首页由 apps/web/app/dashboard 下的路由驱动其中bookmarks/、archive/、favourites/、highlights/、lists/、tags/、search/、feeds/等目录分别对应不同的内容视图apps/web/app/dashboard/layout.tsx 负责整体布局与侧边栏装配。首页暗色模式夜间与自托管的默认体验暗色模式是官方明确列出的特性README Features 中 Dark mode support。与亮色版相比暗色主题仅替换色彩体系导航栏、卡片、输入框与标签按钮全部转为深灰/浅灰配色布局与交互不变。主题切换能力由 apps/web/components/theme-provider.tsx 提供并通过 tooling/tailwind 中的 Web 主题配置统一管理设计令牌实现亮暗两套视觉的全局切换。标签管理All Tags人工标签与 AI 标签的合并治理Tags 页面是 Karakeep 的差异化亮点它将标签明确划分为两类Your Tags人工标签用户手动创建的标签位于页面上部AI TagsAI 自动标签由 LLM 自动为书签生成的标签数量通常远大于人工标签截图中达 90 个每个标签旁标注使用次数底部提供 Load More 分页加载。页面顶部提供搜索框、排序选项Sort by Usage以及三个关键操作按钮Create Tag新建标签Bulk Edit进入批量编辑模式可对多个标签执行批量操作其状态与逻辑由 apps/web/lib/bulkTagActions.ts 与 apps/web/components/dashboard/tags/BulkTagAction.tsx 实现Drag Drop Merging开启后可直接拖拽合并标签对应 apps/web/components/dashboard/tags/AllTagsView.tsx 中的draggingEnabled状态切换逻辑toggleDraggingEnabled。该页面的路由入口为 apps/web/app/dashboard/tags/page.tsx其标题元数据来自 i18n 的tags.all_tags键。AI 标签能力的底层来自 README 所述的 LLM-based automatic tagging由 apps/workers/workers/inference 中的推理 Worker 异步生成这也是自动标签与人工标签在界面上被分区展示的原因。列表管理All Lists用列表组织并协作Lists 页面负责书签的组织与协作页面顶部显示统计信息如 3 lists · 13 bookmarks和 New List 新建按钮。列表被分为两个分组PINNED固定列表如 Favourites、Archive带图标与描述例如 Archive 的说明是 Cold storage, out of the way可理解为冷存储性质的收纳区ALL全部列表其余列表按名称、描述、隐私状态Public/Private与书签数量展示每项右侧有更多操作按钮。这里的列表对应 README 中 Sort your bookmarks into lists 与 Collaborate with others on the same list 两项能力即列表不仅用于整理还支持协作。路由入口为 apps/web/app/dashboard/lists/page.tsx列表详情页位于 apps/web/app/dashboard/lists/[listId]列表相关组件集中在 apps/web/components/dashboard/lists。书签预览Bookmark Preview阅读视图与元数据面板点击任意书签卡片即进入预览详情页采用左右分栏左侧阅读区提供 Reader View 切换按钮将抓取到的正文以清爽排版呈现对应 README 中的 Full text semantic search of all the content stored 所依赖的正文提取能力底层实现见 packages/api/utils/readableContent.ts右侧元数据面板集中展示标题、作者、发布日期、标签、笔记输入框以及附件区域。附件通常包含三类Banner Image封面图、Full Page Archive整页归档、Screenshot页面截图其中整页归档对应 README 中基于 monolith 的 Full page archival 能力用于对抗链接失效link rot底部还有编辑、收藏、分享等操作按钮。预览路由位于 apps/web/app/dashboard/preview阅读视图组件见 apps/web/components/dashboard/preview。设置页Settings账户、安全与偏好设置页左侧是一组完整的设置项导航与仓库目录一一对应User Info账户信息、Usage Statistics用量统计、AI SettingsAI 配置、RSS SubscriptionsRSS 订阅、Backups备份、Import/Export导入导出、API Keys、Broken Links失效链接检测、Webhooks、Rule Engine规则引擎、Manage Assets资源管理。右侧当前展示三个分组Basic Details姓名、邮箱Security当前密码、新密码、确认新密码支持显示/隐藏修改后点击 Save 保存Options界面语言、时区选择语言能力对应 README 中的 Multi-language support。设置页的路由入口在 apps/web/app/settings其中ai/、api-keys/、backups/、broken-links/、feeds/、import/、rules/、stats/、webhooks/、assets/等子目录与左侧导航逐项对应实现组件位于 apps/web/components/settings。管理后台Admin Panel服务器状态与运维动作管理后台面向自托管管理员主要包含四块内容Server Stats服务器统计Total Users、Total Bookmarks、Server Version以卡片形式展示Background Jobs后台任务分别列出 Crawling Jobs抓取任务、Indexing Jobs索引任务、Inference Jobs推理任务的失败数量这三个任务分别对应 apps/workers 下的 crawlerWorker、searchWorker、embeddingsWorker 等 Worker 进程Actions运维操作Re crawl Failed Links Only仅重抓失败链接、Re crawl All Links重抓全部、Re crawl All Links (Without Inference)跳过推理重抓、Reindex All Bookmarks重建全部索引——这些操作对应后台任务路由 apps/web/app/admin/background_jobs 与 apps/web/app/admin/admin_toolsUsers List用户列表展示用户的 Name、Email、Role 与操作列用于用户管理。后台路由入口为 apps/web/app/admin其overview/、background_jobs/、users/、admin_tools/子目录分别承载统计概览、任务调度、用户管理与运维工具页面。后台能力对应的服务端实现分布在 packages/api/routes/admin.ts 与 packages/trpc/routers 中。iOS 分享面板移动端一键收藏最后一张截图展示 iOS 系统分享面板Share Sheet中调用 Karakeep 的场景在 Safari 等 App 中阅读文章时通过系统分享菜单选择 Karakeep即可将当前页面直接加入书签。这正是 README 所述 iOS App 与浏览器扩展生态的一部分——桌面端通过 Chrome/Firefox/Safari 扩展快速收藏移动端则通过 iOS 分享面板与 Android 分享菜单接入相关移动端实现位于 apps/mobile其中 apps/mobile/app/sharing.tsx 处理分享入口apps/mobile/lib/shareBookmark.ts 承载书签落库逻辑。小结从 8 张官方截图可以完整还原 Karakeep 的功能版图首页负责收藏一切链接、笔记、图片标签系统以 AI 自动标签与人工标签双轨驱动列表提供组织与协作书签预览集成阅读视图与整页归档设置页覆盖账户、AI、备份与 API 等深度配置管理后台让自托管运维一目了然移动端分享面板则打通了随时随地收藏的最后一环。若你想进一步验证截图中的行为细节可直接对照 apps/web 的 Web 端路由、apps/workers 的抓取/索引/推理 Worker以及 apps/mobile 的移动端代码逐屏探索。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Karakeep 界面全景导览：从首页书签流到移动端分享的完整功能地图
Karakeep 界面全景导览从首页书签流到移动端分享的完整功能地图【免费下载链接】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本篇指南以官方 Screenshots 文档为线索逐屏拆解 Karakeep原 Hoarder这一自托管收藏一切应用的核心界面首页书签流、暗色模式、AI 标签管理、列表组织、书签预览、用户设置、管理后台与 iOS 分享面板。读完本文你将掌握每个界面背后的功能入口与对应源码位置快速判断这套界面体系是否满足你的自托管需求。文档与仓库对应关系本文所依据的官方截图文档位于 docs/versioned_docs/version-v0.28.0/04-screenshots.md当前主线版本对应的 docs/docs/01-getting-started/02-screenshots.md 内容基本一致。文档中的 8 张截图均存放在 docs/static/img/screenshots 目录与 Web 端、管理端、移动端的真实实现一一对应。下面按截图顺序逐一展开并给出各界面在仓库中的源码入口方便你对照阅读。首页Homepage书签一切的主战场首页是 Karakeep 的默认落点整体布局分为三栏左侧导航栏顶部为品牌名下方依次是 Home、Search、Tags、Highlights、Archive 等一级入口再往下是 LISTS 区域展示 All Lists、Favourites、In the News、Wishlist、Youtube 等列表及其书签数量底部显示版本号。这一导航结构对应 apps/web/components/dashboard/sidebar 目录下的侧边栏组件。中央内容区顶部有一个NEW ITEM快速录入框占位提示为Paste a link, write a note or drop an image...可直接粘贴链接、写笔记或拖入图片点击 Save 完成保存。这与 README 中Bookmark links, take simple notes and store images and pdfs的能力一致底层的文件拖放上传逻辑见 apps/web/components/dashboard/UploadDropzone.tsx。书签卡片流每张卡片包含预览图、标题、来源网址、保存日期和标签如 baking、cupcakes右上角提供收藏星标与更多操作按钮。这是自动抓取链接标题、描述与图片README 中 Automatic fetching for link titles, descriptions and images在界面层的直接呈现。从路由结构看首页由 apps/web/app/dashboard 下的路由驱动其中bookmarks/、archive/、favourites/、highlights/、lists/、tags/、search/、feeds/等目录分别对应不同的内容视图apps/web/app/dashboard/layout.tsx 负责整体布局与侧边栏装配。首页暗色模式夜间与自托管的默认体验暗色模式是官方明确列出的特性README Features 中 Dark mode support。与亮色版相比暗色主题仅替换色彩体系导航栏、卡片、输入框与标签按钮全部转为深灰/浅灰配色布局与交互不变。主题切换能力由 apps/web/components/theme-provider.tsx 提供并通过 tooling/tailwind 中的 Web 主题配置统一管理设计令牌实现亮暗两套视觉的全局切换。标签管理All Tags人工标签与 AI 标签的合并治理Tags 页面是 Karakeep 的差异化亮点它将标签明确划分为两类Your Tags人工标签用户手动创建的标签位于页面上部AI TagsAI 自动标签由 LLM 自动为书签生成的标签数量通常远大于人工标签截图中达 90 个每个标签旁标注使用次数底部提供 Load More 分页加载。页面顶部提供搜索框、排序选项Sort by Usage以及三个关键操作按钮Create Tag新建标签Bulk Edit进入批量编辑模式可对多个标签执行批量操作其状态与逻辑由 apps/web/lib/bulkTagActions.ts 与 apps/web/components/dashboard/tags/BulkTagAction.tsx 实现Drag Drop Merging开启后可直接拖拽合并标签对应 apps/web/components/dashboard/tags/AllTagsView.tsx 中的draggingEnabled状态切换逻辑toggleDraggingEnabled。该页面的路由入口为 apps/web/app/dashboard/tags/page.tsx其标题元数据来自 i18n 的tags.all_tags键。AI 标签能力的底层来自 README 所述的 LLM-based automatic tagging由 apps/workers/workers/inference 中的推理 Worker 异步生成这也是自动标签与人工标签在界面上被分区展示的原因。列表管理All Lists用列表组织并协作Lists 页面负责书签的组织与协作页面顶部显示统计信息如 3 lists · 13 bookmarks和 New List 新建按钮。列表被分为两个分组PINNED固定列表如 Favourites、Archive带图标与描述例如 Archive 的说明是 Cold storage, out of the way可理解为冷存储性质的收纳区ALL全部列表其余列表按名称、描述、隐私状态Public/Private与书签数量展示每项右侧有更多操作按钮。这里的列表对应 README 中 Sort your bookmarks into lists 与 Collaborate with others on the same list 两项能力即列表不仅用于整理还支持协作。路由入口为 apps/web/app/dashboard/lists/page.tsx列表详情页位于 apps/web/app/dashboard/lists/[listId]列表相关组件集中在 apps/web/components/dashboard/lists。书签预览Bookmark Preview阅读视图与元数据面板点击任意书签卡片即进入预览详情页采用左右分栏左侧阅读区提供 Reader View 切换按钮将抓取到的正文以清爽排版呈现对应 README 中的 Full text semantic search of all the content stored 所依赖的正文提取能力底层实现见 packages/api/utils/readableContent.ts右侧元数据面板集中展示标题、作者、发布日期、标签、笔记输入框以及附件区域。附件通常包含三类Banner Image封面图、Full Page Archive整页归档、Screenshot页面截图其中整页归档对应 README 中基于 monolith 的 Full page archival 能力用于对抗链接失效link rot底部还有编辑、收藏、分享等操作按钮。预览路由位于 apps/web/app/dashboard/preview阅读视图组件见 apps/web/components/dashboard/preview。设置页Settings账户、安全与偏好设置页左侧是一组完整的设置项导航与仓库目录一一对应User Info账户信息、Usage Statistics用量统计、AI SettingsAI 配置、RSS SubscriptionsRSS 订阅、Backups备份、Import/Export导入导出、API Keys、Broken Links失效链接检测、Webhooks、Rule Engine规则引擎、Manage Assets资源管理。右侧当前展示三个分组Basic Details姓名、邮箱Security当前密码、新密码、确认新密码支持显示/隐藏修改后点击 Save 保存Options界面语言、时区选择语言能力对应 README 中的 Multi-language support。设置页的路由入口在 apps/web/app/settings其中ai/、api-keys/、backups/、broken-links/、feeds/、import/、rules/、stats/、webhooks/、assets/等子目录与左侧导航逐项对应实现组件位于 apps/web/components/settings。管理后台Admin Panel服务器状态与运维动作管理后台面向自托管管理员主要包含四块内容Server Stats服务器统计Total Users、Total Bookmarks、Server Version以卡片形式展示Background Jobs后台任务分别列出 Crawling Jobs抓取任务、Indexing Jobs索引任务、Inference Jobs推理任务的失败数量这三个任务分别对应 apps/workers 下的 crawlerWorker、searchWorker、embeddingsWorker 等 Worker 进程Actions运维操作Re crawl Failed Links Only仅重抓失败链接、Re crawl All Links重抓全部、Re crawl All Links (Without Inference)跳过推理重抓、Reindex All Bookmarks重建全部索引——这些操作对应后台任务路由 apps/web/app/admin/background_jobs 与 apps/web/app/admin/admin_toolsUsers List用户列表展示用户的 Name、Email、Role 与操作列用于用户管理。后台路由入口为 apps/web/app/admin其overview/、background_jobs/、users/、admin_tools/子目录分别承载统计概览、任务调度、用户管理与运维工具页面。后台能力对应的服务端实现分布在 packages/api/routes/admin.ts 与 packages/trpc/routers 中。iOS 分享面板移动端一键收藏最后一张截图展示 iOS 系统分享面板Share Sheet中调用 Karakeep 的场景在 Safari 等 App 中阅读文章时通过系统分享菜单选择 Karakeep即可将当前页面直接加入书签。这正是 README 所述 iOS App 与浏览器扩展生态的一部分——桌面端通过 Chrome/Firefox/Safari 扩展快速收藏移动端则通过 iOS 分享面板与 Android 分享菜单接入相关移动端实现位于 apps/mobile其中 apps/mobile/app/sharing.tsx 处理分享入口apps/mobile/lib/shareBookmark.ts 承载书签落库逻辑。小结从 8 张官方截图可以完整还原 Karakeep 的功能版图首页负责收藏一切链接、笔记、图片标签系统以 AI 自动标签与人工标签双轨驱动列表提供组织与协作书签预览集成阅读视图与整页归档设置页覆盖账户、AI、备份与 API 等深度配置管理后台让自托管运维一目了然移动端分享面板则打通了随时随地收藏的最后一环。若你想进一步验证截图中的行为细节可直接对照 apps/web 的 Web 端路由、apps/workers 的抓取/索引/推理 Worker以及 apps/mobile 的移动端代码逐屏探索。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考