Karakeep（Hoarder）界面全景导览：从首页书签流到分享面板的每个关键屏幕

Karakeep（Hoarder）界面全景导览：从首页书签流到分享面板的每个关键屏幕

【免费下载链接】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）自托管应用的核心界面：首页书签流、深色模式、标签、列表、书签预览、设置与分享。结合仓库源码中对应页面的实现路径，读者不仅能看懂每个截图对应的功能区域，还能快速定位到界面背后的 Next.js 路由与组件代码，为二次开发、主题定制或撰写集成文档提供准确依据。

一、这份截图文档是什么

docs/versioned_docs/version-v0.30.0/01-getting-started/02-screenshots.md（以及未带版本号的当前文档 docs/docs/01-getting-started/02-screenshots.md）是一份纯界面展示页，按功能模块收录了 7 张核心截图：

所有图片按 Docusaurus 静态资源约定存放在 docs/static/img/screenshots/ 目录下，文档内以/img/screenshots/xxx.png引用。对于 v0.30.0 及之后的版本，这组截图页面被安置在「01-getting-started」章节中，紧随 01-intro.md，作用是在文字介绍之外给新用户一个直观的"第一印象"。

需要说明的是，截图仅覆盖了 Web 端的部分核心界面。Karakeep 的完整界面能力远不止于此（详见后文对路由与组件的展开），但这 7 张图精准对应了项目最常用、最具辨识度的功能入口，是理解产品形态的最佳起点。

二、Homepage：首页书签流

截图homepage.png展示的是登录后的默认首页。对应路由是 apps/web/app/dashboard/bookmarks/page.tsx，其实现非常简洁：

export default async function BookmarksPage() { return ( <div> <Bookmarks query={{ archived: false }} showEditorCard={true} /> </div> ); }

页面渲染<Bookmarks>组件，并传入两个关键参数：

• query={{ archived: false }}：默认只展示未归档的书签，归档内容被隔离在独立的 Archive 视图；
• showEditorCard={true}：在书签流顶部显示"快速新建"编辑器卡片，支持直接输入链接、粘贴文本或拖拽图片/文件来创建书签。

首页两侧的导航结构定义在 apps/web/app/dashboard/layout.tsx。桌面端侧边栏包含：Home（书签流，路径/dashboard/bookmarks）、Search（仅在注册了搜索插件时显示，如 Meilisearch）、Tags、Highlights、Archive；下方通过AllLists组件额外渲染所有列表入口。移动端侧边栏在此基础上追加了 All Lists 入口。

从路由表（apps/web/app/dashboard/）可以看到首页之外完整的一级功能视图：bookmarks、favourites、archive、highlights、search、tags、lists、feeds、cleanups，以及preview/[bookmarkId]与模态预览@modal/(.)preview/[bookmarkId]——书签预览既可以整页打开，也可以在当前页面弹出。

三、Homepage (Dark Mode)：深色模式

homepage-dark.png展示了同一首页在深色主题下的形态。深色模式是 Karakeep 的内建特性（01-intro.md 的功能清单中明确列出 "Dark mode support"）。

其实现依赖next-themes：在 apps/web/components/theme-provider.tsx 中，ThemeProvider基于next-themes提供主题切换能力，并通过useTheme()读取当前theme值、调用setTheme()切换。应用使用 Tailwind CSS 的dark变体配合 CSS 变量组织配色，深色模式下所有界面组件（书签卡片、侧边栏、编辑器）会整体切换为暗色配色，保证长时间收藏与阅读时的舒适度。

四、Tags：标签视图

all-tags.png展示标签管理视图，对应路由 apps/web/app/dashboard/tags/page.tsx，渲染AllTagsView组件（实现位于 apps/web/components/dashboard/tags/AllTagsView.tsx）。该页面按标签聚合展示书签数量，支持重命名、合并标签等管理操作。

标签是 Karakeep 智能化的核心载体：项目的一大卖点是"AI 自动打标签"——收藏的内容会由 LLM 自动生成标签，同时用户也可手动增删标签。点击任一标签进入 apps/web/app/dashboard/tags/[tagId]/page.tsx，页面通过api.tags.get({ tagId })加载标签详情，并复用<Bookmarks>组件以query={{ tagId: tag.id }}过滤出该标签下的全部书签：

const includeArchived = searchParams?.includeArchived !== undefined ? searchParams.includeArchived === "true" : userSettings.archiveDisplayBehaviour === "show";

这里展示了归档显示行为的优先级：URL 查询参数includeArchived优先于用户设置中的archiveDisplayBehaviour，体现了 Karakeep"链接级过滤 + 用户级偏好"的双层设计。

五、Lists：列表视图

all-lists.png展示列表视图，对应 apps/web/app/dashboard/lists/page.tsx。页面顶部展示列表总数与书签总数（来自api.users.stats()的numBookmarks），并提供"新建列表"按钮（EditListModal）；PendingInvitationsCard处理协作邀请；主体AllListsView除展示自定义列表外，还聚合了存档数（archivedCount）与收藏数（favoritesCount）统计。

点击具体列表进入 apps/web/app/dashboard/lists/[listId]/page.tsx，这里体现了协作权限模型：通过list.userRole判断当前用户是owner还是editor，只有这两种角色才显示编辑器卡片（showEditorCard={list.type === "manual" && canEdit}），viewer只能浏览。列表页还支持分享协作链接邀请他人共同维护同一列表，这正是后续分享面板（第八节）的入口之一。

六、Bookmark Preview：书签预览

bookmark-preview.png展示单条书签的详情预览。相关组件集中在 apps/web/components/dashboard/preview/ 目录下，核心为BookmarkPreview.tsx，它根据书签类型组合渲染不同内容区块：

• LinkContentSection.tsx：网页书签，展示抓取到的标题、描述、封面图与原文链接；
• TextContentSection.tsx/NoteEditor.tsx：笔记型书签的富文本内容与行内编辑；
• AssetContentSection.tsx：图片/文件类书签的预览；
• HighlightsBox.tsx：展示从已收藏内容中划选保存的高亮片段；
• AttachmentBox.tsx：附件管理；
• ActionBar.tsx：收藏、归档、删除、分享等操作入口；
• ReaderView.tsx/ReaderSettingsPopover.tsx：阅读模式与字号、行距等阅读偏好设置。

此外，书签预览既可通过/dashboard/preview/[bookmarkId]独立整页打开，也可通过@modal/(.)preview/[bookmarkId]在当前列表页内弹出模态框预览，无需离开浏览上下文。

七、Settings：设置中心

settings.png展示设置中心主界面，对应路由 apps/web/app/settings/。设置中心按功能划分为十余个子页面，从仓库目录即可一览全貌：

settings.png截取的是设置中心的总览/常规页，而具体每一项配置的详细用法分别对应 docs/docs/03-configuration/ 与 docs/docs/06-administration/ 下的专题文档，截图页面本身定位为"入口总览"。

八、Sharing：分享面板

share-sheet.png展示分享面板，这是 Karakeep「快速分享」（quick sharing）能力的核心界面。文档中以限定宽度<img src="/img/screenshots/share-sheet.png" width="400px" />的方式展示，暗示其移动端优先的交互形态——一个从底部弹出的分享动作表。

分享面板支持将书签以多种方式分享出去，完整的使用说明见 docs/docs/04-using-karakeep/quick-sharing.md。在移动端（apps/mobile/app/sharing.tsx）与桌面端均有对应实现，配合浏览器插件、iOS/Android 应用可以将任意网页快速存入 Karakeep 并立即分享。分享面板也与协作列表深度集成：可以将内容直接分享进某个可协作的列表，由团队成员共同维护。

九、如何亲手查看这些界面

截图展示的界面全部来自可自托管的 Web 应用，源码位于 apps/web/。要亲手体验，可按仓库根目录的 start-dev.sh 启动开发环境（完整步骤见 docs/docs/08-development/01-setup.md），启动后访问/dashboard相关路由即可看到与截图一致的界面。截图图片文件本身位于 docs/static/img/screenshots/，也可直接查看原图。

总结

这份截图文档虽然以图片为主，但它精确映射了 Karakeep 的产品骨架：首页书签流（快速新建 + 侧边栏导航）、深色模式、AI 打标驱动的标签体系、协作列表、富内容书签预览、模块化设置中心，以及移动端友好的分享面板。通过将每个截图小节对接到apps/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