obsidian Web Clipper剪藏模板包

我给 Obsidian Web Clipper 做了一套中文平台模板，覆盖微信/知乎/小红书/B站等 7 个场景

背景：官方剪藏好用，但中文平台全靠自己

Obsidian 官方出了 Web Clipper 浏览器扩展之后，剪藏网页终于不用再折腾第三方工具了。但打开模板社区一看——Reddit、GitHub、Medium、YouTube……全是英文平台。

微信公众号？知乎？小红书？B站？一个都没有。

用默认模板剪藏中文网站，结果通常是这样的：

• 微信公众号：推荐文章、底部广告全混进来
• 知乎：点赞数、评论区、侧边栏一个不少
• 小红书：内容为空，或者同一张图重复 3 遍
• B站：标题带着「_哔哩哔哩_bilibili」后缀，视频链接无法播放

于是我花了点时间，针对每个平台的页面结构，写了一套精准提取的模板。现在已经提交到 Obsidian 官方社区模板库，是这个仓库里的第一批中文平台模板。

7 个模板，覆盖主流中文平台

每个模板都设置了 triggers（触发器），打开对应网站时 Web Clipper 会自动匹配，不需要手动选模板。

技术细节：每个平台踩了什么坑

微信公众号：#js_content 是关键

微信公众号的页面结构相对规范。文章正文被包在 #js_content 这个容器里，用 selectorHtml 抓取后转 Markdown 就很干净：

{{selectorHtml:#js_content|markdown}}

作者名通过 OpenGraph 元数据提取：

{{meta:property:og:article:author}}

这样剪藏出来的笔记只有正文，不会混入底部推荐、公众号名片之类的东西。

知乎：.RichText 过滤一切噪音

知乎的页面噪音很多——点赞数、评论区、「相关推荐」、侧边栏广告。核心正文在 .RichText 这个 class 里：

{{selectorHtml:.RichText|markdown}}

模板同时配了两个 trigger，覆盖知乎问答页和专栏文章：

"triggers": ["www.zhihu.com/question", "zhuanlan.zhihu.com"]

小红书：轮播图去重是个技术活

小红书是这套模板里最难搞的平台。主要有两个问题：

问题 1：内容抓不到

小红书的笔记是在搜索页上以弹窗形式展示的，{{content}} 抓到的全是背后搜索页的内容——搜索框、筛选器、其他笔记缩略图。解决方案是用 CSS 选择器精准定位笔记正文容器：

{{selectorHtml:#detail-desc|markdown}}

问题 2：图片重复 3 倍

小红书使用 Swiper.js 做图片轮播。为了实现「无缝循环」效果，Swiper 会在真实 slide 前后各复制一份，加上 swiper-slide-duplicate 这个 class。一张图实际在 DOM 里出现了 3 次。

如果直接用 {{selectorHtml:.swiper-wrapper|markdown}}，剪藏出来每张图都会重复 3 遍。

解决方案分三步：

1. CSS 排除复制帧：:not(.swiper-slide-duplicate) 只选中真实 slide
2. 二次去重：|unique 过滤器确保 URL 级别无重复
3. 转为图片嵌入：用 join 技巧把 URL 数组拼成 ![](url) 格式

最终的选择器：

![]({{selector:.swiper-slide:not(.swiper-slide-duplicate) img?src|unique|join:\")\n\n![](\"}}  )

这行代码做了一件很巧妙的事：join 的分隔符是 )\n\n![]( ——也就是「关闭上一个图片嵌入 + 空行 + 打开下一个图片嵌入」。再在整体外面包上 ![]() 的头尾，完成拼接。

B站：从 URL 里提取 BV 号

B站视频页面的 URL 格式是这样的：

https://www.bilibili.com/video/BV1QTX2BUEBh/?spm_id_from=...&t=6.30256&bvid=...

要生成 iframe 播放器，需要提取出 BV1QTX2BUEBh 这个 BV 号。用了一条链式过滤器：

{{url|replace:"https://www.bilibili.com/video/":""|split:"/"|first|split:"?"|first}}

步骤拆解：

1. replace 去掉域名前缀 → BV1QTX2BUEBh/?spm_id_from=...
2. split:"/" 按斜杠分割 → ["BV1QTX2BUEBh", "?spm_id_from=..."]
3. first 取第一个 → BV1QTX2BUEBh（可能还带 ? 参数）
4. split:"?" + first 去掉参数 → BV1QTX2BUEBh

然后拼成 iframe：

<iframe src="https://player.bilibili.com/player.html?bvid=BV1QTX2BUEBh&high_quality=1&quality=80&autoplay=0" 
        width="100%" height="500" frameborder="0" allowfullscreen></iframe>

标题也做了自动清理，去掉 B站默认追加的 _哔哩哔哩_bilibili 后缀：

{{title|replace:"_哔哩哔哩_bilibili":""}}

注意：B站 iframe 在 Obsidian 中可能无法加载（B站服务器拒绝来自 app:// origin 的请求），但模板同时保留了原视频链接，点击可跳转浏览器全画质观看。

文章收藏：多站通用兜底

对于财新、少数派、36Kr、虎嗅、V2EX、即刻等网站，页面结构差异较大，没法为每个站写专用选择器。用 {{content}} 做通用提取，配合 {{author}}、{{published}} 等标准元数据变量，效果已经不错：

"triggers": ["*.wsj.com", "cn.wsj.com", "caixin.com", "*.sspai.com", 
             "36kr.com", "huxiu.com", "ifanr.com", "*.lifeweek.com.cn", 
             "*.v2ex.com", "okjike.com", "*.jike.com"]

财新、WSJ 中文版等付费墙网站，需要在浏览器中登录后才能抓到完整正文。

使用方法

安装

1. 浏览器扩展商店搜索 Obsidian Web Clipper（官方出品，免费）
2. Chrome / Edge / Arc / Brave → Chrome Web Store
3. Safari（含 iOS）→ App Store
4. Firefox → Firefox Add-ons

导入模板

1. 点击浏览器 Web Clipper 图标 → 进入 Settings
2. 找到 Templates 区域 → 点击 Import
3. 选择下载好的 JSON 文件，依次导入 7 个模板

模板 JSON 文件可以从 GitHub PR 下载，或者自己按文末的 JSON 源码创建。

调整模板优先级

Web Clipper 按模板列表顺序匹配，第一个命中的 trigger 生效。建议排列顺序（在 Web Clipper 设置里拖拽调整）：

1. 微信公众号（最具体）
2. 知乎
3. 小红书
4. YouTube
5. 视频笔记（B站等）
6. 文章收藏（通用兜底）
7. 快速收藏（手动选择，不自动触发）

日常使用

• 保存整篇文章：打开网页 → 点 Clipper → 自动匹配模板 → 保存
• 只存选中文字：先选中文字 → 再点 Clipper → 选中内容自动进入「摘录」区域
• 高亮多段内容：点 Clipper → 点荧光笔图标 → 在网页上点击要标记的段落 → 保存

已知限制

1. 小红书需要登录：未登录状态下页面内容不完整，剪藏结果可能为空
2. 小红书图片会过期：CDN 临时链接有时效，重要图片建议手动保存到本地
3. B站 iframe 可能不加载：Obsidian 的 app:// origin 被 B站拒绝，但原视频链接始终可用
4. 付费墙文章：财新、WSJ 中文需要在浏览器中登录付费账号后才能抓正文

开源

这套模板已提交至 Obsidian 官方社区模板库，是仓库里第一批中文平台模板：

GitHub: obsidian-community/web-clipper-templates #26

如果对你有帮助，欢迎去 GitHub 给个 Star ⭐

本文中的模板在 Obsidian Web Clipper 最新版本上测试通过（2026 年 4 月）。如果某个平台更新了页面结构导致模板失效，欢迎在 GitHub 上提 Issue。