SiYuan 网页剪藏功能全攻略
你是否还在为网页内容保存不完整、格式错乱而烦恼?作为一款隐私优先的个人知识管理软件,SiYuan(思源笔记)提供的网页剪藏功能彻底解决了这一痛点。本文将带你掌握从安装配置到高级剪辑的全流程,让网页知识收集效率提升。
为什么选择 SiYuan 剪藏
传统网页保存方式存在三大痛点:格式丢失、链接失效、管理混乱。SiYuan 作为开源知识管理工具,通过深度整合的剪藏功能实现了三大突破:
- 原格式保留:完整保存网页排版、图片和表格,避免 Markdown 转换丢失
- 双向链接:自动建立剪藏内容与源网页的关联,支持后续回溯
- 块级管理:剪藏内容可拆分为独立知识块,便于碎片化重组
技术实现:SiYuan 通过自研的块级文档模型(Block Model)和剪贴板处理逻辑,结合前端解析实现富文本解析,确保内容无损转换。
准备工作:5 分钟快速配置
安装剪藏扩展
SiYuan 提供浏览器扩展实现一键剪藏,支持 Chrome/Edge 等基于 Chromium 的浏览器:
- 下载扩展包
- 在浏览器地址栏输入
chrome://extensions/进入扩展管理 - 开启开发者模式,拖拽扩展包到页面完成安装
配置剪藏目标
通过 SiYuan 的设置界面配置剪藏内容的默认存储位置:
- 打开 SiYuan,进入设置 > 编辑器 > 网页剪藏
- 设置默认笔记本和文件夹路径(建议使用
/剪藏/{{domain}}/{{date}}格式) - 选择剪藏格式选项:完整 HTML/纯文本/Markdown
配置文件路径:剪藏规则保存在工作空间的
conf/appearance.json中,可通过 API 接口进行批量配置。
三种剪藏方式全解析
1. 一键剪藏整个页面
适用于需要完整保存文章、教程等内容的场景:
- 浏览目标网页,点击浏览器工具栏的 SiYuan 图标
- 在弹出面板选择完整页面模式
- 等待 3-5 秒处理后自动跳转到剪藏结果页
技术原理:扩展通过截图获取页面内容,同时复制完整 DOM 结构,通过自定义协议传输到客户端。
2. 选区剪藏精准提取
针对只需部分内容的场景,实现精准知识截取:
- 按住鼠标选中网页中的目标内容(支持跨段落选择)
- 右键选择 SiYuan 剪藏 > 选区内容
- 可选设置标签和备注,点击确认完成剪藏
代码示例:选区剪藏的核心处理逻辑
// 简化自 app/src/protyle/util/paste.ts
async function handleSelectionClipboard() {
const selection = window.getSelection();
if (!selection.rangeCount) return;
const range = selection.();
fragment = range.();
tempDiv = .();
tempDiv.(fragment);
(tempDiv);
..(, tempDiv.);
}

