Obsidian官方的Web Clipper(網頁擷取/网页剪藏)越來越成熟了，今天來簡單介紹它的設定與使用。

到對應的下載位置安裝後，再將之顯示在工具列，就能隨時點擊圖示來擷取網頁內容了。

Obsidian Web Clipper提供了模板功能，可依需求設定好模板，讓擷取內容以模板樣式來產生。預設的模板 Default 已經能符合一般的操作了，但如果你有不同的需求的話，可以在擴充的選項設定裡用【New template】建立新的模板。

1. 安裝

到官方網站的clipper網頁Obsidian Web Clipper就能找到不同瀏覽器的下載網址，安裝後再將它顯示在工具列上就能開始使用了。

在正式使用之前先來做它的模板設定。

2. 模板設定

擷取的內容可以指定套用需要的模板。預設的Default模板主要設置了 6 個Property，本體內容(Note content)是{{content}}。

筆記存放位置在模板的【Note location】欄位設定。

gh|900

因為我的筆記都是用Heading 1當做標題和檔名，因此我自訂了新的模板，修改了Note content:

An image to describe post

3. 模板變數

點擊擴充右上角的 【•••】 就能查看所有模板變數，這些變數能使用在YAML的特性與筆記本體內容。

參考: https://help.obsidian.md/web-clipper/variables

  • authhor: 網頁作者
  • content: 網頁內容
  • contentHtml: 網頁內容(HTML格式)
  • fullHtml: 未處理過的網頁內容(HTML格式)
  • date: 擷取日期
  • time: 擷取日期待+時間
  • description: 網頁描述
  • domain: 網頁的網域
  • image: 分享用的圖片網址
  • published: 發佈日期，應該是Obsidian Publish服務要使用的
  • site: 網站名稱(似乎就是 title 的值)
  • title: 網頁的標題
  • url: 網頁的網址
  • highlights: 網頁標示為高亮的內容
  • meta...: 網頁head區內的meta data(詮釋資料，後設資料，元資料)
  • 其他請參考 web-clipper variables

變數裡能再使用過濾器（filters），格式是{{variable|filter}}，請參考 web-clipper filters。

An image to describe post

4. Highlighter 高亮功能

除了整頁的擷取，也可啟用高亮功能，啟用後擷取的選取文字會變成Note content，Add to Obsidian點擊後只存入高亮部份。日後再瀏覽此網頁時，高亮部份會自動呈現。

An image to describe post

gh|700

5. 💡 相關鏈接

💡 解說文章: https://jdev.tw/blog/8611/
✅ GitHub: https://github.com/obsidianmd/obsidian-clipper
✅ Obsidian Web Clipper: https://obsidian.md/clipper
✅Chrome 線上應用程式商店 Obsidian Web Clipper: https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf (for Chrome, Brave, Edge, Arc, Orion, and other Chromium-based browsers)
✅ Firefox Addons: https://addons.mozilla.org/en-US/firefox/addon/web-clipper-obsidian/ (for Firefox, Firefox Mobile)
✅ Safari Extensions: https://apps.apple.com/us/app/obsidian-web-clipper/id6720708363 (for macOS, iOS, and iPad)

6. 教學影片

＃＃