企业官网建设流程全解析

• 知识管理
• 知识库

导读

本文是 Dendron 五步入门教程的第一步（Navigation Basics），围绕 Dendron 插件的 VS Code 界面展开，逐一解析编辑器、预览、工作区文件树、大纲、层级树视图与反向链接六个核心区域。读完本文，你将能熟练通过命令面板运行 Dendron 命令、理解每个面板的职责与使用方式，并为后续的记笔记、链接与格式化教程打下基础。

该教程文档位于仓库的 tutorial.user-interface.md，是插件随新工作区一起分发的五个教程笔记之一（对应 tutorial.md 首页中的currentStep: 1 / totalSteps: 5）。

教程定位：五步入门的第一步

Dendron 在创建全新工作区时，会通过 tutorialInitializer.ts 将教程笔记复制进工作区，并直接以"教程布局"（左侧打开tutorial.md、右侧同时打开预览）启动。从源码注释可以看到，它的职责是"Copies tutorial notes and launches the user into the tutorial layout after the workspace is opened"（复制教程笔记并在工作区打开后引导用户进入教程布局）。

完整教程共五个步骤，均在 tutorial.md 首页以复选框形式列出，可随时回到首页勾选进度：

• 第一步：界面导航（本文）→ tutorial.user-interface.md
• 第二步：记笔记 → tutorial.taking-notes.md
• 第三步：链接笔记 → tutorial.linking-notes.md
• 第四步：富文本格式化 → tutorial.rich-formatting.md
• 第五步：总结 → tutorial.conclusion.md

教程首页还给出了两个贯穿全程的图标约定：🌱 表示"现在就在编辑器中试试这个功能"，💡 表示"重点提示"。

运行 Dendron 命令的基础：VS Code 命令面板

如果你不熟悉 VS Code，首先需要掌握命令面板（Command Palette）的用法：按Cmd / Ctrl + Shift + P呼出命令面板，然后输入命令名称即可运行。整个教程中凡是出现"运行某个命令"的指令，都是指这一操作路径——呼出命令面板并输入命令名。

Dendron 的全部命令都注册在 constants.ts 的DENDRON_COMMANDS中，统一以Dendron:前缀命名。与本文相关的命令示例：

从 constants.ts 可以看到，Dendron: Toggle Preview还同时注册到了编辑器标题栏（editor/title）、编辑器标题右键菜单（editor/title/context）、资源管理器右键菜单（explorer/context）等多个位置，前提条件是当前文件为 Markdown 且插件已激活（resourceLangId == markdown && dendron:pluginActive）。也就是说，除了命令面板，你还可以直接通过编辑器工具栏的预览图标或右键菜单开关预览。

六个核心界面区域速览

打开 Dendron 教程工作区后，整个界面由六个主要区域构成。下面逐一说明它们的职责与用法。

1. 编辑器窗格（Editor Pane）

编辑器窗格是撰写和编辑笔记的地方。Dendron 中的笔记本质上是 Markdown 文件，所有写作、修改都发生在这里。点击工作区文件树、树视图或反向链接中的任何笔记，都会在编辑器窗格中打开该笔记。

2. 预览窗格（Preview Pane）

预览窗格实时渲染当前打开笔记的 Markdown 效果，相当于"所见即所得"的阅读视图。如果不小心关闭了预览窗格，随时可以通过命令面板（Cmd / Ctrl + Shift + P）运行预览命令将其找回。

从实现上看，预览由TogglePreviewCommand（位于 TogglePreview.ts）驱动，它同时服务于 Show Preview 与 Toggle Preview 两个命令。其核心逻辑是：

• 若预览面板当前可见，则隐藏（dispose）它——这就是"切换"的含义；
• 若不可见，则根据调用方式确定要预览的内容：通过命令栏调用时预览当前焦点笔记（getActiveNote()），通过右键菜单调用时预览指定路径的笔记（getNoteFromPath(opts.fsPath)）；
• 如果目标不是工作区内的笔记，只要它是.md文件，仍会以"临时笔记"（NoteUtils.createForFile）的方式在预览中渲染。

预览面板背后是PreviewProxy接口（见 PreviewProxy.ts），它定义了show、hide、lock、unlock、isVisible、isOpen、isLocked等方法，说明预览面板还支持锁定（锁定后切换笔记不会同步更新预览）等进阶能力。

💡 重要提示：预览窗格是只读的，不能用来编辑笔记。所有编辑都必须在编辑器窗格中进行。

3. Dendron 工作区（Dendron Workspace）

Dendron 工作区窗格展示当前 vault（保险库）中的文件。vault 是 Dendron 存储 Markdown 笔记、附件（assets）以及一些辅助文件（如 schema 定义）的地方。在这里点击任意笔记，会将其在编辑器窗格中打开。

从教程工作区实际内容看，一个 vault 的典型结构包括：root.md（根笔记）、root.schema.yml（根 schema）、assets/（图片等附件）以及各层级笔记文件。多个 vault 可以共存于一个工作区，这也是 Dendron 支持"多保险库"知识管理的基础。

4. 大纲（Outline）

大纲窗格展示当前打开笔记的文档结构，它实时观察笔记 Markdown 中的标题级别（H1、H2、H3……），形成可点击跳转的目录树。当笔记较长、层级较多时，大纲是快速定位章节的利器。

5. 树视图（Tree View）

树视图以层级结构展示你的笔记，视觉上类似于文件系统中的文件夹嵌套。它直接反映 Dendron 笔记的层级命名体系（如dendron.blog.one会以dendron > blog > one的层级呈现）。你同样可以通过点击树视图中的条目来四处导航。

树视图由 NativeTreeView.ts 实现——它通过window.createTreeView注册到 VS Code，数据来源是EngineNoteProvider（EngineNoteProvider.ts），即以 Dendron 引擎索引的笔记层级为数据源，而非直接读取文件系统。这一点保证了即使笔记被移动、重命名，树视图展示的依然是符合层级语义的最新结构。树视图还支持按标题或按文件名两种展示/排序方式（在 constants.ts 中注册为dendron.treeView.labelByTitle/dendron.treeView.labelByFilename两个命令）。

树视图等面板统一挂载在活动栏的 Dendron 视图容器（dendron-view，图标为media/icons/dendron-activity-bar-icon.svg）之下。从 constants.ts 的DENDRON_VIEWS可以看出，Dendron 活动栏还包含 Tip of the Day、反向链接、树视图、查询视图、日历视图、图视图（Graph Panel）、最近工作区、帮助与反馈等面板。

6. 反向链接（Backlinks）

反向链接窗格列出所有"链接到当前笔记"的其他笔记。也就是说，当你在笔记 A 中通过 wiki 链接引用了笔记 B，那么在 B 的反向链接窗格中就会看到 A。Dendron 教程首页把链接相关知识安排在第三步（tutorial.linking-notes.md），本步只需了解反向链接的呈现方式即可。

反向链接的底层实现是BacklinksTreeDataProvider（BacklinksTreeDataProvider.ts），它实现了 VS Code 的TreeDataProvider<Backlink>接口。几个值得注意的实现细节：

• 它通过window.onDidChangeActiveTextEditor与引擎的onEngineNoteStateChanged事件驱动刷新，刷新操作做了 250ms 防抖；
• 支持两种排序方式：按路径名（PathNames）或按最后更新时间（LastUpdated），默认按最后更新时间，且排序偏好会持久化到 MetadataService；
• 每个反向链接条目会展示"链接到当前笔记的引用所在行"，并可展开为行级引用，悬停时通过 remark 处理器（ProcFlavor.BACKLINKS_PANEL_HOVER）渲染引用周围的上下文内容；
• 启用链接候选（link candidates，dendron.yml中dev.enableLinkCandidates）时，还会把"疑似链接但尚未显式链接"的候选条目一并展示，方便你将其转换为正式 wiki 链接。

从 constants.ts 可见，反向链接面板还提供了Sort by Last Updated、Sort by Path Names、Expand All等标题栏操作按钮。

预览功能的实现原理

教程中"预览窗格"对应的命令，在源码层面有着完整实现链。以 TogglePreview.ts 为例，其执行流程可以总结为：

1. 若面板已可见，直接hide()关闭（实现 toggle 语义）；
2. 否则确定预览对象：有显式参数（如右键菜单传入的路径）则取对应笔记，否则取当前活动笔记；
3. 通过_panel.show(note)渲染预览；
4. 若找不到对应笔记但文件是 Markdown，则读取文件内容（优先取编辑器中未保存的最新文本），构造临时笔记对象后渲染——即使文件不在 vault 内也能预览。

对应地，快捷键ctrl+k v是打开预览最快捷的方式；而Dendron: Toggle Preview Lock（constants.ts）则用于锁定/解锁预览内容，锁定后预览不会随编辑器切换而跳转。

界面可定制性：按你的习惯重新布局

Dendron 的所有界面窗格本质上都是 VS Code 原生面板，因此完全继承 VS Code 的布局能力：你可以用鼠标拖拽任意窗格到侧边、底部或独立编辑组，保存后下次打开依然保持。教程文档也明确鼓励："VS Code 允许你按需重排任意窗口，请自由调整成最适合你的布局。"

常见的高效布局建议：编辑器和预览并排（左右分栏），左侧活动栏聚焦 Dendron 树视图，底部放置大纲与反向链接，形成"写—看—查"一体化的知识工作流。

下一步

至此你已经完成了界面导航基础。回到 tutorial.md 首页，勾选 "Navigation Basics" 复选框标记进度，然后进入第二步 tutorial.taking-notes.md，学习如何在 Dendron 中高效创建与记录笔记。

关联阅读：本教程对应的插件命令注册与面板配置集中在 constants.ts；预览命令实现见 TogglePreview.ts；树视图实现见 NativeTreeView.ts；反向链接实现见 BacklinksTreeDataProvider.ts；教程工作区的初始化逻辑见 tutorialInitializer.ts。相关测试用例可参考 NativeTreeView.test.ts 与 EngineNoteProvider.test.ts。

• 知识管理
• 知识库