六维教程

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 五类
调试 剪辑窗口的 ... 按钮查看当前页面的实际变量值

下一篇讲过滤器和模板逻辑,给取到的变量做格式化、条件判断和循环。

上一篇
Web Clipper 剪辑网页与高亮、阅读模式
下一篇
Web Clipper 过滤器与模板逻辑