浏览器剪藏：把网页存成本地笔记

Sat, 16 May 2026 00:00:00 +0000

前面讲了模板——用变量自动填日期、标题，新建笔记一键套格式。这一章我们更进一步。

光会记笔记还不够。每天刷推特、读公众号、逛Reddit，看到好东西，你要怎么把它存下来？截图？打开就是一张图，没法搜索。复制粘贴？格式全乱，标题链接还要手动补。扔到浏览器收藏夹？那是收藏夹的万年归宿：只进不出，从来不看。

这篇要解决的就是这个问题：网页内容怎么快速、干净地存入 Obsidian。用的工具是 Obsidian 官方出的浏览器插件——Web Clipper（网页剪藏）。

为什么要用 Web Clipper

在没有 Web Clipper 之前，我存网页文章的方式大概经历过三个阶段：

第一阶段，截图。一键截完，扔进笔记。问题是截图不能搜索，三个月后你根本不记得截了什么，更别说找到它。

第二阶段，复制粘贴。把正文复制进 Obsidian，再手动补上标题、来源链接。问题是格式基本全乱——标题变正文、加粗消失、代码块变纯文字，每次都要花几分钟整理。

第三阶段，收藏夹。浏览器右上角一颗星，最方便。代价是：那些链接你永远不会再打开。

Web Clipper 的逻辑是：一键保存，格式干净，自动带上元数据，直接落到 Obsidian 里。 标题、原文链接、保存日期，都自动填好。正文是 Markdown 格式，图片也能保留。配上 AI 解释器，还能在剪藏的时候顺手让 AI 帮你总结一遍。

安装

Web Clipper 是一个浏览器扩展。目前支持 Chrome、Edge、Firefox、Safari（部分功能有差异）。

重要提示：公众号文章需要先在浏览器里打开，不能在微信客户端里直接用。 微信客户端是一个独立的环境，浏览器插件进不去。你需要复制链接，在 Chrome 或 Edge 里打开，再剪藏。

安装步骤

第一步： Chrome 用户打开 Chrome 应用商店，搜索 “Obsidian Web Clipper”，找到官方插件（图标和 Obsidian 一样，就是那个宝石图案），点击"添加到 Chrome"。

第二步： Edge 用户同理，打开 Edge 插件市场，搜索 “Obsidian Web Clipper”，安装。Edge 也可以直接用 Chrome 应用商店里的版本，两个都行。

第三步： 安装完成后，浏览器工具栏右上角会出现插件图标。如果没看到，点工具栏最右边的拼图图标（扩展程序），找到 Obsidian Web Clipper，点一下固定到工具栏。

这样就装好了。

基础设置

点一下工具栏里的插件图标，会弹出剪藏面板。右下角有一个小齿轮，那是设置入口。先进设置，把基本项配一下。

连接你的 Obsidian 库

进入设置以后，第一件事是连接你的 Vault（库）。

在 “Vaults” 这个栏目里，点 “Add vault”，填上你的库名称——就是你 Obsidian 左下角显示的那个库名。比如我的库叫 “OBSIDIAN 仓库”，就填这个。

注意：第一次连接的时候，Obsidian 会弹出一个授权窗口，确认是否允许 Web Clipper 访问。 选"允许"就行，这是正常的安全提示。

设置默认存储文件夹

连接库之后，设置 Default location（默认存储位置）。

推荐单独建一个收集箱文件夹，比如 00收集箱 或者 Inbox，专门放剪藏下来的内容。不要直接扔到库的根目录——时间长了根目录会乱掉，而且你也不知道哪些是整理好的笔记、哪些是还没处理的网页存档。

界面简介

设置完之后，每次点开插件，你会看到三个主要区域：

上方是属性区——自动识别当前网页的标题、URL、作者（如果有的话）
中间是内容预览区——正文已经转成 Markdown 格式
下方是操作区——选择存到哪个库、哪个文件夹，选用哪个模板，然后点"Clip"保存

AI 解释器

这是 Web Clipper 里最值得花时间设置的功能。

是什么

AI 解释器就是在模板里写好指令，剪藏的时候点一下 “添加到Obsidian” 按钮，AI 就会处理你指定的内容。比如：总结全文、提取关键词、翻译……具体能做什么，取决于你怎么写提示词。

这个功能需要一个 API Key。如果你之前已经申请过 OpenAI、DeepSeek 或 Anthropic 的 API Key，这里直接用就行；没有的话，去对应平台注册一个。

配置方法

进入设置，找到 “解释器” 选项卡。

第一步： 选择你的模型来源，填入对应的 API Key。支持 OpenAI、Anthropic（Claude）、Ollama（本地模型）等多种来源。我用的是 DeepSeek，总结文章我感觉效果最好。

第二步： 开启 “启用解释器”，把这个开关打开。

之后在模板里写好提示词变量，剪藏时插件窗口里会多出一个解释器区域，点一下就能触发。

创建自定义模板

Web Clipper 自带一个默认模板，能用，但不够好。花几分钟创建一个自己的模板，之后每次剪藏都舒服很多。

为什么要自定义模板

不同类型的内容，你想记录的东西不一样：

技术文章：你想要标题、链接、AI 摘要、正文
公众号文章：你想要标题、作者、发布日期、AI 总结
产品页面：你想要标题、价格、链接，不需要全文

一个模板满足不了所有场景，按内容类型做几个模板，用的时候选一下，很省心。

进入模板设置

在 Web Clipper 设置左侧点 “新建模板”，新建一个。当然我嫌麻烦就只用一个。

给模板起个名字，比如"文章收藏"，然后开始写内容。

模板变量

Web Clipper 支持两类变量：

页面变量——自动从当前网页提取：

变量	说明
`{{title}}`	网页标题
`{{url}}`	当前页面的 URL
`{{author}}`	文章作者（能识别的话）
`{{date}}`	今天的日期
`{{content}}`	正文内容（Markdown 格式）

解释器变量——在属性或正文里调用 AI：

解释器的写法很直接：把你想给 AI 的指令放进双引号，外面套上两层大括号，就这样：

{{"总结概括全文，不要用一级标题"}}

最里面的中文就是你给 AI 的指令，外面的 {{" "}} 这个格式不要动。Web Clipper 识别到这个写法，剪藏的时候就知道这里要调用 AI 来处理。

属性和正文都可以用。 想让某个属性字段自动 AI 填写，就在属性值那里写这个格式；想在正文里插入一段 AI 摘要，同样写进去。

完整模板示例

下面是我自己在用的模板：

模板属性区（Properties）：

网址: {{url}}
时间: {{date}}

模板正文区（Content）：


# 总结

这里有个地方值得说一下：作者那一行写的是 {{author|split:", "|wikilink|join}}，不是普通的 {{author}}。这串东西是变量 + 过滤器的组合写法——先把作者字段按逗号分割（有些文章会识别出多个作者），再把每个名字变成 Obsidian 双链格式 [[作者名]]，最后拼回去。这样剪藏完，点作者名就能跳转到对应的笔记。你不一定要用这个，{{author}} 直接输出纯文字也完全够用，看你习惯。

正文部分我只留了两行空架子：主题类别/链接 留给手动填关联信息，# 总结 是一个标题占位——如果开了解释器，可以在这下面加 {{"总结概括全文，不要用一级标题"}}，让 AI 自动填内容；如果没开解释器，剪藏完手动写两句也行。

实操：剪藏一篇文章

设置都做完了，来实际用一次。

假设你在微信上看到一篇公众号文章觉得不错，想存下来。

第一步：复制链接，在浏览器打开。 微信里的公众号文章右上角点击”使用默认浏览器打开”

第二步：点击 Web Clipper 图标。 工具栏右上角，那个宝石图标，点一下，弹出剪藏面板。

第三步：检查属性。 面板上方会自动识别文章标题和 URL。作者字段如果没识别出来，手动填一下。日期是今天，不用动。

第四步：选模板。 面板下方选择你刚才创建的"文章收藏"模板。如果有 AI 解释器，这时候会看到一个转圈的动画——AI 正在生成摘要，等它转完就行。

第五步：点 “添加到 Obsidian”。 一秒钟后，打开 Obsidian，进入你设置的收集箱文件夹，刚才那篇文章就在里面了。标题、链接、日期、AI 摘要全都有，正文格式也是干净的 Markdown。

总结

今天学到了什么：

Web Clipper 是 Obsidian 官方出的浏览器扩展，一键将网页保存为 Obsidian 笔记，格式干净，自动带元数据
公众号文章必须在浏览器里打开才能剪藏，在微信客户端里用不了
AI 解释器需要 API Key，配置好之后，剪藏时可以自动生成摘要、提取信息
自定义模板 = 属性变量 + AI 提示词，不同类型的内容用不同模板，剪藏更高效

核心要点：

单独建一个收集箱文件夹，不要把剪藏内容直接扔到库根目录
先用默认模板跑通流程，再花时间定制——模板可以随时改，先用起来更重要
AI 摘要是加分项，不是必须项——没有 API Key 也能正常剪藏，只是少了 AI 处理这一步

Obsidian 实战手册 on RanceLee的博客