Web Clipper 模板与变量
默认剪辑只能把正文原样搬进仓库,格式千篇一律。模板让 Web Clipper 按网站自动套用不同格式,比如剪公众号文章走一种排版,剪豆瓣读书走另一种,各自提取不同的元数据。变量就是模板里占位取值的语法。
这篇讲模板的创建、自动触发和五类变量,下一篇再讲给变量加工数据的过滤器。
创建和管理模板
打开扩展设置,左侧栏点 New template 新建模板,点右上角菜单可以复制现有模板。所有修改自动保存,不用手动存。
不想从零写,官方维护了一个 clipper-templates 示例仓库,里面有几十个现成的网站模板可以参考。
导入和导出
模板以 .json 文件形式分享。
- 导入,进入任意模板的编辑页,点右上角 Import,或者直接把
.json文件拖进模板区域,可以一次拖多个。 - 导出,点右上角 Export 下载
.json文件。右上角菜单里还能把模板数据复制到剪贴板。
模板的行为设置
Behavior 保存方式
定义剪辑进来的内容放到哪里,三种选择:
- 新建一篇笔记。
- 追加到已有笔记的顶部或底部。
- 追加到日记的顶部或底部,需要先在 Obsidian 里启用 Daily notes 核心插件。
Triggers 自动触发模板
Triggers 按当前页面的 URL 或 schema.org 数据自动选用模板,一行写一条规则,可以写多条。
多个模板都可能命中时,排在前面的模板先匹配。在设置里可以拖拽调整模板顺序。建议把规则最宽松的模板放最后当兜底(fallback)。
简单 URL 匹配,页面 URL 以给定文本开头即命中:
https://obsidian.md
正则匹配,用斜杠包住正则,注意 . 和 / 这类特殊字符要加反斜杠转义。下面这条匹配 IMDB 的影片资料页:
/^https:\/\/www\.imdb\.com\/title\/tt\d+\/reference\/?$/
schema.org 匹配,用 schema: 前缀,适合按页面结构化数据类型触发:
schema:@Recipe
schema:@Recipe.name
schema:@Recipe.name=Cookie
第一行匹配类型为 Recipe 的页面,第二行匹配存在 @Recipe.name 字段的页面,第三行要求该字段的值正好是 Cookie。
变量
变量用 {{变量名}} 的语法写在模板里,剪辑时自动替换成页面的真实数据。变量可以用在笔记名称、保存路径、Properties、正文四个地方。
点剪辑窗口的更多按钮(...),能看到当前页面实际提取到了哪些变量和值,写模板时多靠它调试。
变量共五类,逐个看。
预设变量
按页面内容自动生成,大多数网站都能用。最核心的是 {{content}},即正文内容(Markdown 格式)。如果页面有选区或高亮,{{content}} 会按上一篇讲的优先级替换成选区或高亮。
| 变量 | 含义 |
|---|---|
{{title}} |
页面标题 |
{{author}} |
作者 |
{{content}} |
正文 Markdown,或高亮、选区 |
{{contentHtml}} |
正文 HTML 格式 |
{{description}} |
页面描述或摘要 |
{{published}} |
发布日期,可用 date 过滤器格式化 |
{{date}} / {{time}} |
当前日期 / 当前日期时间 |
{{url}} |
当前页面链接 |
{{domain}} |
域名 |
{{site}} |
网站名或发布方 |
{{image}} |
社交分享图 URL |
{{favicon}} |
网站图标 URL |
{{language}} |
页面语言 |
{{words}} |
字数统计 |
{{selection}} / {{selectionHtml}} |
选区内容,Markdown / HTML |
{{highlights}} |
高亮列表,含文字和时间戳 |
{{fullHtml}} |
整页未处理的原始 HTML |
{{model}} 等 |
Interpreter 模型名、模型 ID、提供商,见第五篇 |
Meta 变量
读取页面 <meta> 标签的内容,包括 Open Graph 社交分享数据:
{{meta:name:description}}
{{meta:property:og:title}}
Selector 变量
用 CSS 选择器从页面上抓取指定元素的内容,语法是 {{selector:选择器?属性}},属性可省略,省略时取元素的文本内容:
{{selector:h1}}
{{selector:.author}}
{{selector:img.hero?src}}
{{selector:a.main-link?href}}
还有 {{selectorHtml:选择器}} 取元素的 HTML。配合 markdown 过滤器可以把 HTML 转成 Markdown:
{{selectorHtml:body|markdown}}
几点说明:
- 支持嵌套选择器和组合器,可以写得很精确。
- 选择器匹配到多个元素时返回数组,可以用
join、map这类数组过滤器处理,下一篇讲。 - Selector 变量绑定具体网站的 HTML 结构,换站可能失效,适合为高频网站定制模板。
Schema.org 变量
很多网站在页面里嵌了 schema.org 的 JSON-LD 结构化数据,这类变量直接读它,比 CSS 选择器稳定。
{{schema:@Type:key}}
{{schema:@Type:parent.child}}
{{schema:@Type:arrayKey[index].property}}
{{schema:@Type:arrayKey[*].property}}
不写类型也行,会匹配任意 schema 类型里第一个同名属性:
{{schema:author}}
{{schema:author.name}}
{{schema:author[0].name}}
{{schema:author[*].name}}
* 表示取数组里所有元素的该属性,返回数组。
Prompt 变量
双引号包住一句自然语言,交给大模型处理,比如:
{{"a summary of the page"}}
它需要启用 Interpreter 并配置模型,涉及速度和成本,细节放到第五篇专门讲。这里先记住一个取舍,数据格式稳定的页面用 Selector 或 Schema 变量更快更准,Prompt 变量适合格式不稳定的场景,比如做一个通吃所有读书网站的藏书模板,{{"author of the book"}} 在哪家都管用。
速查卡片
| 主题 | 要点 |
|---|---|
| 模板 | 设置里新建,自动保存,json 导入导出 |
| Behavior | 新笔记 / 追加已有笔记 / 追加日记 |
| Triggers | URL 前缀、正则、schema.org,首个匹配生效 |
| 变量 | 预设、Meta、Selector、Schema.org、Prompt 五类 |
| 调试 | 剪辑窗口的 ... 按钮查看当前页面的实际变量值 |
下一篇讲过滤器和模板逻辑,给取到的变量做格式化、条件判断和循环。