基于Vue 3与File System API构建本地Markdown知识库管理器

1. 项目概述一个Markdown文件管理器的诞生如果你和我一样是一个重度依赖Markdown来记录工作、整理知识、撰写文档的开发者或内容创作者那么你一定遇到过这样的困境随着时间推移电脑里散落着成百上千个.md文件。它们可能躺在不同的项目目录里也可能在某个名为“笔记”的文件夹中野蛮生长。当你急需找到半年前写下的某个技术方案或者想回顾某个学习主题的所有笔记时传统的文件管理器就显得力不从心了。文件名搜索内容早已模糊。文件夹分类层级太深记忆负担太重。这时候一个专门为Markdown文件设计的、具备强大内容索引和检索能力的工具就成了刚需。yf-hao/haomd正是为了解决这个痛点而生的。它不是一个简单的文件浏览器而是一个本地优先、轻量级的Markdown文件管理器。它的核心价值在于将你散落在各处的Markdown文档聚合起来通过解析文件内容如标题、标签、链接关系构建一个可搜索、可浏览、可视化的知识网络。你可以把它想象成为你个人的Markdown文档库建立了一个专属的“谷歌搜索引擎”和“关系图谱”。对于开发者它可以管理项目文档、API说明、开发日志对于写作者它可以串联文章草稿、素材收集、灵感片段对于学习者它可以构建互相关联的知识卡片库。这个项目背后是对“个人知识管理”效率的极致追求其技术选型也紧紧围绕着本地化、高性能和良好用户体验展开。2. 核心设计思路与技术选型解析2.1 为什么是“本地优先”与“纯前端”架构在云服务无处不在的今天haomd选择“本地优先”和“纯前端”架构是一个经过深思熟虑的、对特定场景高度优化的选择。这主要基于以下几个核心考量数据隐私与绝对控制权Markdown文档常常包含未公开的想法、工作记录、私人笔记甚至敏感信息。将这些数据无条件托付给第三方云服务存在隐私泄露和厂商锁定的风险。“本地优先”意味着所有数据始终保存在用户自己的电脑上haomd只是一个运行在浏览器中的应用程序它读取本地文件系统通过现代浏览器提供的File System Access API但数据不会离开你的设备。这给予了用户最大的安全感与控制权。离线可用性与性能知识检索应该是一个即时响应的过程。依赖网络请求云端索引会引入不可预测的延迟并且在无网络环境下完全失效。纯前端应用将所有索引、搜索、渲染逻辑都放在浏览器中执行利用现代JavaScript引擎的高性能可以实现毫秒级的搜索反馈。首次扫描建立索引后后续所有操作都无需网络体验流畅。简化部署与零成本作为一个工具类项目降低用户的使用门槛至关重要。纯前端应用意味着用户不需要安装Node.js、配置数据库、处理服务端环境。他们只需要通过一个简单的HTTP服务器甚至直接打开本地HTML文件来运行这个单页应用。对于高级用户可以轻松地将其部署到自己的NAS或内网服务器上实现跨设备访问但核心逻辑依然在前端。注意“本地优先”并非完全排斥同步。项目可以通过设计支持将索引数据而非原始文件内容通过WebDAV或用户自建的同步服务如Nextcloud在不同设备间同步实现“本地存储元数据同步”的混合模式但这需要额外的架构设计。2.2 技术栈深度剖析Vite Vue 3 TypeScript Tailwind CSShaomd的技术栈组合堪称现代前端开发的“黄金搭档”每一项选择都直指高效开发与优秀用户体验。Vite作为构建工具取代了传统的Webpack。Vite的核心优势在于极快的冷启动和热更新HMR。对于haomd这样需要频繁修改和预览的开发项目Vite的体验提升是巨大的。它利用原生ES模块在开发阶段按需编译大大减少了打包和等待时间。Vue 3作为核心框架Vue 3的Composition API非常适合构建haomd这类逻辑相对复杂的应用。文件树管理、搜索过滤、内容渲染、状态同步这些功能可以用ref、computed、watch和自定义组合式函数清晰地组织起来代码的可读性和可维护性远优于选项式API。同时Vue 3更小的体积和更好的性能对纯前端应用也至关重要。TypeScript提供类型安全项目涉及大量的数据结构文件信息对象、索引条目、搜索结果、图形节点等。使用TypeScript可以在编码阶段就捕获潜在的类型错误提供智能的代码提示使得维护和重构这种规模的项目信心大增。特别是在处理文件系统API这种相对底层的接口时明确的类型定义能避免很多运行时错误。Tailwind CSS实现高效样式工具类优先的CSS框架与组件化开发模式完美契合。haomd的UI组件如文件列表项、搜索框、预览面板样式可以通过组合工具类快速实现避免了在CSS文件和组件文件之间来回切换的上下文损耗。同时它内置的设计系统间距、颜色、响应式断点保证了UI的一致性且最终生成的CSS文件尺寸经过优化非常精简。2.3 核心功能模块设计从顶层设计看haomd可以分解为以下几个松耦合的模块文件系统访问模块负责与浏览器文件系统API交互请求目录读取权限递归扫描指定文件夹下的所有.md文件并监听文件变化增删改。这是应用的数据入口。内容解析与索引模块这是项目的“大脑”。它需要读取Markdown文件内容解析出元信息从Front Matter文件头部的YAML块中提取title、date、tags、categories等。文档结构通过分析标题# H1,## H2生成文档大纲。内部链接识别[[内部链接]]或[链接文本](file-path.md)这样的语法构建文档间的关联关系。关键词对正文内容进行分词处理建立全文倒排索引用于快速搜索。 解析后的结构化数据将被存入内存中的索引对象通常是一个大的Map或特定结构的数据存储。搜索与过滤模块提供用户界面接收搜索关键词对内存索引进行查询。搜索策略可能包括标题匹配、标签匹配、全文关键词匹配、以及基于内部链接的关联度排序。过滤功能则允许用户按标签、目录、日期范围等维度筛选文档。图形化关系图谱模块这是一个可视化亮点。利用图数据库的思想但在内存中实现将每个文档视为一个节点Node将文档间的内部链接视为边Edge。然后使用力导向图布局算法如D3.js或类似库实现将这些节点和边渲染成可交互的图谱。用户可以直观地看到知识网络的结构并通过点击节点快速跳转到对应文档。双栏编辑/预览界面提供良好的写作和阅读体验。通常左侧为树形文件列表或搜索结果列表中间为Markdown编辑器可能集成类似CodeMirror或Monaco Editor右侧为实时预览面板。支持常见的Markdown扩展语法如表格、代码高亮、任务列表等。3. 关键实现细节与核心技术点攻关3.1 基于File System Access API的本地文件操作这是项目能与用户本地文件交互的基础。现代浏览器主要是Chromium内核系列提供了相对稳定的File System Access API。核心操作流程请求目录句柄通过一个按钮触发window.showDirectoryPicker()方法。这会弹出一个原生的文件夹选择对话框。用户选择包含其Markdown库的根目录后浏览器会返回一个FileSystemDirectoryHandle对象。重要这个权限是“粘性”的如果用户之前授予过权限浏览器可能会记住但最佳实践是提供清晰的“选择文件夹”入口。let directoryHandle; try { directoryHandle await window.showDirectoryPicker(); // 保存handle例如到IndexedDB以便下次访问时尝试恢复权限 await saveDirectoryHandle(directoryHandle); } catch (err) { // 用户取消了选择或发生错误 console.error(Failed to get directory handle:, err); }递归遍历与文件读取获得句柄后需要递归遍历目录树。这里需要异步处理因为文件系统操作是异步的。async function scanDirectory(dirHandle, path ) { const files []; for await (const entry of dirHandle.values()) { const entryPath path ? ${path}/${entry.name} : entry.name; if (entry.kind file entry.name.endsWith(.md)) { // 是Markdown文件 const file await entry.getFile(); const content await file.text(); files.push({ handle: entry, // 保存文件句柄用于后续写入 path: entryPath, name: entry.name, content: content, lastModified: file.lastModified }); } else if (entry.kind directory) { // 递归扫描子目录 const subFiles await scanDirectory(entry, entryPath); files.push(...subFiles); } } return files; }权限持久化为了提升用户体验避免每次刷新页面都要求用户重新选择文件夹可以将目录句柄序列化后存储到localStorage或IndexedDB中。下次启动时尝试用存储的句柄请求权限directoryHandle.requestPermission({ mode: readwrite })如果成功则直接使用。实操心得File System Access API的兼容性是目前最大的挑战。Firefox和Safari的支持尚不完整或处于实验性阶段。因此在项目中必须做好降级处理例如检测API是否存在并提供备选方案比如传统的文件input上传但这样无法实现动态监听文件变化。3.2 Markdown内容解析与索引构建这是haomd智能化的核心。我们需要将纯文本的Markdown转化为结构化的数据。使用统一的解析器推荐使用markdown-it或unified生态系统remark-parse。它们功能强大插件生态丰富可以准确地将Markdown转换为语法树AST。import MarkdownIt from markdown-it; import mdFrontMatter from markdown-it-front-matter; import mdLinkAttributes from markdown-it-link-attributes; const md new MarkdownIt(); let frontMatterData {}; md.use(mdFrontMatter, (fm) { frontMatterData jsYaml.load(fm); }); md.use(mdLinkAttributes, { attrs: { target: _blank, rel: noopener } }); const tokens md.parse(markdownContent);提取Front MatterFront Matter是位于文件开头---之间的YAML或JSON块。使用js-yaml库可以轻松解析。这里存储了文档的“元数据”是索引的重要来源。遍历AST提取关键信息标题遍历tokens找到类型为heading_open的token其层级hLevel和下一个token内容就是标题信息。这用于生成文档大纲和快速导航。内部链接识别链接token (link_open,link_close)。判断其href属性是否指向本地.md文件如./path/to/doc.md或[[doc-name]]。将这些链接关系收集起来用于构建知识图谱。标签除了从Front Matter的tags字段获取有些写作习惯也会在正文中用#标签的形式标注。可以通过正则表达式或专门解析段落内容的token来提取。构建内存索引设计一个高效的数据结构来存储所有文档的元信息和关联关系。一个简单的设计可能如下// 索引结构示例 const globalIndex { byId: new Map(), // key: 文件路径, value: 文档对象 byTag: new Map(), // key: 标签名, value: Set(文件路径) backlinks: new Map(), // key: 目标文件路径, value: Set(来源文件路径) searchIndex: ... // 全文搜索索引可以使用lunr.js, flexsearch等库 }; // 文档对象结构 const doc { id: path/to/file.md, title: frontMatter.title || deriveTitleFromFirstHeading(content), tags: [...frontMatter.tags, ...extractedInlineTags], content: plainTextContent, // 用于搜索的纯文本 outline: [...], // 标题大纲数组 links: [path/to/other1.md, path/to/other2.md], // 出链 lastModified: 1234567890, wordCount: 1500 };集成全文搜索引擎对于稍大规模的文档库线性遍历内容进行搜索是不可接受的。可以集成轻量级的客户端搜索库如Lunr.js或FlexSearch。它们在索引构建阶段将文档内容添加进去搜索时返回匹配的文档ID和相关性评分速度极快。import * as FlexSearch from flexsearch; const searchIndex new FlexSearch.Index({ tokenize: forward }); // 为每个文档创建索引 globalIndex.byId.forEach((doc, id) { searchIndex.add(id, ${doc.title} ${doc.tags.join( )} ${doc.content}); }); // 搜索 const results searchIndex.search(关键词);3.3 知识图谱可视化的实现将文档间的链接关系可视化是haomd区别于普通管理器的杀手锏。数据建模将索引中的backlinks和links关系转换为图数据。每个文档是一个节点{ id: path, label: title, group: tag }每个链接是一条边{ source: fromPath, target: toPath }。选择可视化库D3.js功能最强大也最灵活但学习曲线陡峭。Vis.js或Cytoscape.js提供了更高级的图布局和交互API更适合快速实现。以Cytoscape.js为例import cytoscape from cytoscape; import fcose from cytoscape-fcose; // 一种力导向布局算法 cytoscape.use(fcose); const cy cytoscape({ container: document.getElementById(graph-container), elements: [ // 将索引数据转换为节点和边 // ... nodes and edges ], style: [ // 定义样式 { selector: node, style: { label: data(label), background-color: #666 } }, { selector: edge, style: { width: 2, line-color: #ccc } } ], layout: { name: fcose, animate: true } // 使用力导向布局 });布局算法力导向布局Force-directed layout是最常用的它模拟物理力节点间的斥力、边上的引力让关联紧密的节点聚集关联稀疏的节点远离从而自然呈现出社区结构。fcose或cose-bilkent是性能较好的实现。交互设计点击节点高亮该节点及其一度关联的节点和边并在侧边栏或主区域打开该文档。拖拽与缩放允许用户自由探索图谱。搜索高亮当在搜索框输入时在图谱中高亮匹配的节点。动态筛选根据标签过滤只显示包含特定标签的节点及其关联边。注意事项图谱可视化在文档数量很大例如超过500个节点时可能会遇到性能问题。需要做优化比如增量渲染只渲染可视区域内的节点。聚合节点将同一标签下的大量节点先聚合成一个“超级节点”点击后再展开。提供筛选器让用户通过标签、修改时间等条件动态过滤减少同时显示的节点数。4. 完整开发流程与核心环节实现4.1 项目初始化与基础架构搭建首先使用Vite快速搭建Vue 3 TypeScript项目环境这是最高效的起点。# 使用Vite官方模板创建项目 npm create vitelatest haomd -- --template vue-ts cd haomd npm install # 安装核心依赖 npm install vue-routernext pinia markdown-it js-yaml lunr flexsearch cytoscape # 安装UI和样式相关依赖 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p项目目录结构规划如下保持清晰的功能划分src/ ├── assets/ # 静态资源 ├── components/ # 可复用组件 │ ├── FileTree.vue │ ├── SearchBar.vue │ ├── EditorPane.vue │ ├── PreviewPane.vue │ └── GraphView.vue ├── composables/ # Vue 3组合式函数 │ ├── useFileSystem.ts │ ├── useMarkdownParser.ts │ ├── useSearchIndex.ts │ └── useGraphData.ts ├── stores/ # Pinia状态管理 │ └── documentStore.ts ├── utils/ # 工具函数 │ ├── fileUtils.ts │ └── markdownUtils.ts ├── views/ # 页面级组件 │ ├── HomeView.vue # 主编辑视图 │ └── GraphView.vue # 图谱视图 ├── App.vue └── main.ts在tailwind.config.js中配置好内容路径确保能扫描到Vue文件中的类名。在main.ts中引入Tailwind的基础样式文件。4.2 状态管理设计使用Pinia管理全局文档状态由于应用涉及多个组件共享复杂的文档数据文件列表、当前文档、索引、搜索状态等使用Pinia进行集中式状态管理是理想选择。定义核心Store (stores/documentStore.ts):import { defineStore } from pinia; import { ref, computed } from vue; import type { DocumentMeta, IndexStructure } from ../types; export const useDocumentStore defineStore(document, () { // 状态 const currentDirectoryHandle refFileSystemDirectoryHandle | null(null); const documents refMapstring, DocumentMeta(new Map()); // 所有文档元数据 const currentDocumentId refstring(); // 当前打开的文档路径 const searchQuery refstring(); // 搜索关键词 const isLoading refboolean(false); // 计算属性 const currentDocument computed(() documents.value.get(currentDocumentId.value)); const filteredDocuments computed(() { // 根据searchQuery和可能的其他过滤器返回过滤后的文档列表 if (!searchQuery.value) return Array.from(documents.value.values()); // 调用搜索索引进行过滤 return performSearch(searchQuery.value); }); const tagCloud computed(() { // 从所有文档中统计标签频率 const tagMap new Mapstring, number(); documents.value.forEach(doc { doc.tags?.forEach(tag { tagMap.set(tag, (tagMap.get(tag) || 0) 1); }); }); return Array.from(tagMap.entries()).sort((a, b) b[1] - a[1]); }); // Actions async function selectDirectory(handle: FileSystemDirectoryHandle) { isLoading.value true; currentDirectoryHandle.value handle; try { // 调用composable中的函数扫描目录并解析 const scannedDocs await scanAndParseDirectory(handle); documents.value new Map(scannedDocs.map(doc [doc.id, doc])); // 重建搜索索引 rebuildSearchIndex(scannedDocs); } catch (error) { console.error(Failed to load directory:, error); } finally { isLoading.value false; } } function setCurrentDocument(id: string) { currentDocumentId.value id; } function updateDocumentContent(id: string, newContent: string) { const doc documents.value.get(id); if (doc) { doc.content newContent; doc.lastModified Date.now(); // 触发重新解析和索引更新防抖处理 queueUpdateIndex(id, newContent); } } // ... 其他actions return { // 状态和计算属性 currentDirectoryHandle, documents, currentDocumentId, searchQuery, isLoading, currentDocument, filteredDocuments, tagCloud, // actions selectDirectory, setCurrentDocument, updateDocumentContent, }; });这个Store成为了整个应用的数据枢纽任何组件都可以通过useDocumentStore()来获取或修改状态并通过Vue的响应式系统自动更新UI。4.3 实现双栏编辑与实时预览主界面通常采用左右或左中右布局。这里以左-中-右布局为例左侧文件树/列表中间编辑器右侧预览。HomeView.vue核心结构template div classflex h-screen bg-gray-50 !-- 左侧边栏文件树和搜索 -- div classw-64 border-r border-gray-200 flex flex-col SearchBar / FileTree :documentsfilteredDocuments / /div !-- 主编辑区 -- div classflex-1 flex overflow-hidden !-- 编辑器 -- div classflex-1 border-r border-gray-200 EditorPane v-ifcurrentDocument :keycurrentDocument.id // 用key强制重新创建编辑器实例 :contentcurrentDocument.rawContent update:contenthandleContentUpdate / div v-else classp-8 text-gray-500请从左侧选择或搜索一个文档开始编辑。/div /div !-- 预览区 -- div classflex-1 overflow-auto p-4 PreviewPane :contentcurrentDocument?.parsedHTML / /div /div /div /template script setup langts import { storeToRefs } from pinia; import { useDocumentStore } from /stores/documentStore; import SearchBar from /components/SearchBar.vue; import FileTree from /components/FileTree.vue; import EditorPane from /components/EditorPane.vue; import PreviewPane from /components/PreviewPane.vue; const documentStore useDocumentStore(); const { currentDocument, filteredDocuments } storeToRefs(documentStore); function handleContentUpdate(newContent: string) { if (currentDocument.value) { documentStore.updateDocumentContent(currentDocument.value.id, newContent); } } /scriptEditorPane.vue组件可以集成codemirror或monaco-editor。以CodeMirror 6为例它轻量且可定制性强。需要创建一个Vue组件来封装CodeMirror的初始化、内容绑定和事件监听。PreviewPane.vue组件接收Markdown原始内容或已解析的HTML。使用markdown-it实例将Markdown转换为HTML并渲染。需要注意安全对用户生成的内容进行适当的清理如使用DOMPurify以防止XSS攻击。4.4 实现文件变更监听与索引增量更新为了提供接近IDE的体验当用户在外部修改了文件或者在其他地方新增了文件时haomd应该能感知并更新索引。监听文件变化实验性APIFile System Access API提供了watch()方法但目前兼容性极差。一个更实用的降级方案是轮询检查简单但有效对于已打开的目录定期例如每30秒重新扫描目录比较文件的lastModified时间戳或内容哈希找出发生变化的文件然后只更新这些文件的索引。// 在composable中 let pollingInterval: number; export function startFileWatcher(dirHandle: FileSystemDirectoryHandle) { if (pollingInterval) clearInterval(pollingInterval); pollingInterval window.setInterval(async () { const changedFiles await detectChanges(dirHandle); if (changedFiles.length 0) { // 增量更新索引和UI updateIndexForFiles(changedFiles); } }, 30000); // 30秒轮询一次 }手动刷新按钮提供一个显眼的“刷新”按钮让用户主动触发重新扫描。这是最可靠且兼容性最好的方式。增量更新索引当检测到文件变化时不需要重建整个索引。对于全文搜索索引如FlexSearch可以调用update(docId, newContent)方法。对于内存中的关系索引找到对应的文档对象更新其内容、解析新的元数据和链接并相应地更新byTag和backlinks等Map。5. 部署、优化与常见问题排查5.1 如何部署给普通用户使用纯前端应用部署非常简单但也需要一些考量。本地直接运行开发/个人使用使用npm run build生成静态文件在dist目录。在dist目录下你可以直接双击index.html在浏览器中打开但可能会因为文件协议file://导致File System API受限。更好的方式是使用一个极简的本地HTTP服务器。Python用户可以用python -m http.server 8080Node.js用户可以用npx serve dist。然后访问http://localhost:8080。静态网站托管团队/多设备共享你可以将dist文件夹内的内容部署到任何静态托管服务如GitHub Pages, Vercel, Netlify, 或你自己的Nginx服务器上。重要警告部署到公网后由于浏览器安全限制同源策略File System Access API只能通过HTTPS或localhost工作并且用户授予的权限是与“源”协议域名端口绑定的。这意味着用户需要在你的网站域名下授权访问其本地文件夹。务必在UI中清晰说明这一点并确保你的网站使用HTTPS。打包为桌面应用进阶使用Electron或Tauri将haomd打包成真正的桌面应用。这样可以突破浏览器的沙盒限制获得更完整的本地文件系统访问权限无需每次请求许可并可以集成系统菜单、托盘图标等。这是提供最佳用户体验的途径但会显著增加开发和分发复杂度。5.2 性能优化要点随着文档数量增长以下优化至关重要虚拟滚动文件列表或搜索结果列表可能很长。使用vue-virtual-scroller等库实现虚拟滚动只渲染可视区域内的DOM元素可以极大提升列表渲染性能。搜索索引防抖在搜索框输入时不要每次按键都触发搜索。使用防抖函数例如Lodash的_.debounce延迟执行搜索操作避免不必要的计算。图谱可视化优化如前所述对大量节点进行力导向布局计算非常消耗资源。设置一个节点数量上限如200超过后提示用户使用筛选功能。或者采用Web Worker在后台线程进行布局计算避免阻塞UI。持久化缓存将构建好的索引序列化后存储到IndexedDB中。下次启动应用时可以先加载缓存索引让UI快速呈现然后在后台异步检查文件是否有更新并进行增量同步。这能实现“秒开”的体验。代码分割与懒加载使用Vite/ Rollup的代码分割功能将图谱可视化等非首屏必需的组件打包成独立的chunk按需加载。5.3 常见问题与排查技巧实录在实际开发和用户使用中你可能会遇到以下典型问题问题现象可能原因排查与解决思路无法选择文件夹/“选择文件夹”按钮无效1. 浏览器不支持File System Access API。2. 页面未通过HTTPS或localhost访问。3. 浏览器安全设置或扩展程序拦截。1. 检查if (showDirectoryPicker in window)不支持则显示降级UI文件上传。2. 确保部署环境为https://或http://localhost。3. 尝试无痕模式或禁用广告拦截插件。刷新页面后需要重新选择文件夹目录句柄未正确持久化或权限请求失败。1. 检查将句柄序列化存储到IndexedDB的逻辑。2. 在应用启动时尝试用存储的句柄调用handle.requestPermission({ mode: readwrite })根据结果决定是静默恢复还是提示用户重新选择。搜索速度慢输入卡顿1. 文档数量太多1000线性搜索。2. 搜索逻辑未防抖。3. 索引未构建或损坏。1. 集成FlexSearch等客户端搜索引擎。2. 为搜索输入事件添加防抖300ms。3. 确认在文件加载完成后正确调用了searchIndex.add()。图谱视图卡死或白屏1. 节点和边数量过多。2. 力导向布局计算未在Web Worker中执行阻塞主线程。3. 内存泄漏。1. 强制限制初始渲染的节点数提供筛选器。2. 考虑使用cytoscape的webworker布局或换用计算量小的布局。3. 使用浏览器开发者工具的Memory面板检查内存占用确保在组件销毁时调用cy.destroy()。Markdown预览样式错乱或脚本未执行1. 生成的HTML包含不安全标签/样式被Tailwind重置。2. 代码块未正确高亮。1. 使用DOMPurify.sanitize(html)过滤预览HTML。为预览区域容器添加prose类如果使用tailwindcss/typography或限定预览CSS作用域。2. 集成highlight.js在Markdown解析后对precode块进行高亮处理。编辑内容后图谱或链接未实时更新索引更新逻辑是异步的或未触发。1. 确保updateDocumentContentaction被调用后触发了重新解析文档内容和更新索引的函数使用防抖避免频繁解析。2. 检查更新索引的逻辑是否同步了backlinks当A文档的链接指向BB文档的backlinks集合应包含A。一个关键的实操心得处理内部链接路径。Markdown中的链接可能是相对路径./sub/doc.md也可能是基于项目根的路径/docs/intro.md甚至是Wiki风格的[[文档名]]。在索引和解析时必须将这些链接统一转换为一个唯一的标识符如相对于根目录的路径才能正确建立文档间的关联。这需要仔细处理路径的解析和规范化否则图谱中的边会断裂。