Obsidian Web Clipper：把網頁一鍵存進筆記庫（附我的三個範本）

這是「Obsidian 入門」第 2 篇。還沒用過 Obsidian，先看第 1 篇。這篇講怎麼用 Web Clipper 把網頁存進筆記庫，最後附我自己用的三個範本，下載後匯入就能用。

先講結論

• Web Clipper 是什麼：Obsidian 官方出的瀏覽器擴充功能，免費。看到想留的網頁，按一下，它會把正文轉成 Markdown，存成一篇 Obsidian 筆記。
• 範本決定存成什麼樣子：檔名、存到哪個資料夾、筆記開頭要記哪些資料、內文放什麼，都寫在範本裡。不同網站可以用不同範本。
• 我用三個範本：一般網頁存全文；YouTube 只存標題、網址和描述；GitHub 存專案說明。三個都存進 00-Inbox 收件匣，之後再整理。
• 兩個最容易踩的坑：觸發規則要用正規表示式時，前後要加斜線；沒有規則符合時，用的是清單最上面那個範本。我自己的範本就是在寫這篇時才發現這兩點寫錯了。

安裝

到你用的瀏覽器的擴充功能商店裝「Obsidian Web Clipper」：

裝好之後，建議把它釘選在瀏覽器工具列上，比較好按。

存到哪個筆記庫：預設會存到 Obsidian 目前開著的那個 vault，只有一個 vault 的話不用設定。有好幾個 vault、想在存的時候挑，就按擴充功能面板右上角的齒輪進設定，在「一般」的儲存庫（英文介面是 Vaults）輸入 vault 名稱、按 Enter 加進去。名稱要跟 Obsidian 裡的 vault 名稱一字不差。

基本用法

1. 打開想留的網頁。
2. 按工具列上的 Web Clipper 圖示（Mac 是 ⌘⇧O，Windows 是 Ctrl+Shift+O）。
3. 面板會跳出來，上面是要用的範本、筆記名稱、屬性，下面是內文預覽。要改什麼直接改。
4. 按「新增到 Obsidian」（英文介面是 Add to Obsidian）。Obsidian 會打開，新筆記就在指定的資料夾裡。

上圖是在 YouTube 影片頁打開面板：左上角自動選了 YouTube 範本（觸發規則生效了），存到 00-Inbox。範本選錯時，點左上角的範本名稱就能換。

另外幾個快捷鍵：

快捷鍵可以在 Chrome 的 chrome://extensions/shortcuts 改。

它不是把整頁原封不動存下來。Web Clipper 會先把廣告、選單這些拿掉，只留正文，再轉成 Markdown。圖片存的是網址，不會把圖檔下載到你的電腦，原網站拿掉圖片的話，筆記裡的圖也會跟著看不到。

範本是什麼

範本就是一份「這類網頁要存成什麼樣子」的設定。在設定的「範本」裡可以新增、編輯、匯入、匯出。一個範本有這幾個部分：

用兩個大括號包起來的是變數，存的時候會換成網頁上的資料：

變數後面可以接 | 加篩選器，把結果再處理一次。我用到三個：

• safe_name：把檔名裡不能用的字元拿掉。例如標題結尾是句點時，不加這個會存出 xxx..md 這種檔名。
• split:", "、wikilink、join：作者有好幾位時，先拆開、各自包成 [[連結]]、再接回去。
• 完整清單在官方說明的 Filters 頁。

我的三個範本

為什麼 YouTube 不存正文

YouTube 頁面的正文會把整份逐字稿抓進來，又長又沒排版。我改成只存一個「空殼」，記下這支影片是什麼，之後再用 yt-dlp 抓字幕、請 AI 寫成繁中報告。做法在 AI 助理實戰第 2 篇。

存下來長這樣

剪一支 YouTube 影片後，Obsidian 裡的筆記開頭是這些屬性：

內文是影片資訊、描述，最後一段是給 AI 助理看的待處理說明：

截圖裡看得到三件事：

• 頻道和長度是空的：這是常見狀況，見下面「踩過的坑」第 4 點。
• 描述只有開頭一段：停在「Get t」，因為 YouTube 網頁本身只給一小段描述，不是範本的問題。完整描述在後面抓字幕時一起拿。（原本描述第一行是一則廣告連結，截圖時拿掉了。）
• 網址後面多了 &t=340s：這是我在影片播到 5 分 40 秒時剪的，網址會帶著當時的播放時間。不影響後面處理，但點開會從那個時間開始播。

為什麼 GitHub 只認專案首頁

GitHub 上的網頁很多種：專案首頁、某個檔案、議題、合併請求。我只想在專案首頁用 GitHub 範本，所以觸發規則寫成「github.com/ 後面剛好兩段」。其他 GitHub 網頁都當一般網頁處理。

每個屬性是做什麼的

三個範本共用的：

各範本自己多的：

pending_action：讓 AI 知道下一步

這是我的範本跟官方預設範本最大的差別。剪報存進來時，就先寫好「這篇接下來要怎麼處理」：

我跟 AI 助理說「整理收件匣」時，它先讀這個欄位，就知道每篇該走哪條路，不用每篇再問我。這套分工怎麼來的，寫在 PKM 第 4 講。

你不用 AI 助理的話，這個欄位可以刪掉，或改成你自己的待辦標記。

下載與匯入

三個範本：

• 一般網頁（1-general.json）
• YouTube（2-youtube.json）
• GitHub（3-github.json）

匯入步驟：

1. 打開 Web Clipper 設定，點左邊任一個範本。
2. 按右上角的「匯入」（英文介面是 Import），選剛下載的 .json 檔。也可以直接把檔案拖進範本區。
3. 三個都匯入後，把「一般網頁」拖到範本清單最上面。理由在下一節。
4. 依你的筆記庫改這幾處：
   • 筆記位置：我的是 00-Inbox，改成你的收件匣資料夾。
   • YouTube、GitHub 的筆記內容：最後那段「🤖 待處理」是寫給我自己的 AI 助理看的，裡面連到我筆記庫的規則，你的筆記庫裡沒有，可以整段刪掉。
5. 各剪一個 YouTube 影片、一個 GitHub 專案、一篇一般文章，打開存下來的筆記，看 type 對不對。

右上角三個按鈕：Import 匯入、Export 匯出（備份用），More 裡可以把範本內容複製到剪貼簿。

圖中「Template triggers」那一行是我修正前的寫法，前後沒有斜線，不會生效。正確寫法見下一節第 1 點。

下載的版本跟我寫這篇之前在用的版本差兩處：觸發規則改成正確寫法，也拿掉了 word_count 這個屬性。理由一樣在下一節。

踩過的坑

1. 正規表示式的觸發規則要加斜線

觸發規則有兩種寫法：

我原本的 GitHub 規則寫成 ^https?://github\.com/...，前後沒加斜線，Web Clipper 就把它當成「網址開頭要是 ^https?://」，當然不會有網址符合。YouTube 那條也一樣。也就是說，這兩條規則從來沒有成立過，網頁會用哪個範本，其實都是看清單順序，或是我在面板上自己切換。

另外，正規表示式裡的 / 要寫成 \/。

2. 沒有規則符合時，用的是清單最上面那個

這點跟直覺相反：沒有任何觸發規則符合時，Web Clipper 用的是範本清單最上面那個，不是最下面。所以沒有觸發規則、要拿來「接住其他所有網頁」的那個範本（我的是一般網頁），要放在最上面。

我原本把 YouTube 放最上面，結果所有網頁預設都會用 YouTube 範本，只存標題和描述，正文全丟了。

3. 沒有 wordcount 這個篩選器

我原本有一個 word_count 屬性寫成 {{content|wordcount}}，存出來常常是 0.3 這種怪數字。查了官方的篩選器清單才發現根本沒有 wordcount。要算字數的話，交給之後的 AI 助理或 Obsidian 的字數統計就好，所以下載版拿掉了。

4. YouTube 的頻道和長度常常抓不到

channel 和 duration 靠的是 YouTube 頁面裡給搜尋引擎看的資料，有時候抓不到，存出來是空的（上面的截圖就是）。我後面會用 yt-dlp 重新抓這兩項，所以沒有處理。你很在意的話，可以把 channel 改成 {{author}} 試試。

常見問題

手機可以用嗎？ iPhone、iPad 的 Safari 可以，從 App Store 裝。Android 可以用 Firefox。

存下來的圖片會不見嗎？ 可能會。筆記裡的圖片是原網站的網址，原網站拿掉圖片或改網址，就看不到了。真的重要的圖片，記得另外存到 vault 裡。

範本可以備份嗎？ 可以。每個範本右上角都有「匯出」，會存成 .json 檔。改範本之前先匯出一份。

剪進來的東西一定要整理嗎？ 不用每篇都整理。收件匣是暫存區，定期翻一次：有用的整理進筆記庫，沒用的直接刪。怎麼分類可以參考 PARA 那篇。

推薦影片

想看影片的話，推薦 Tina Huang 的〈Obsidian in 24 Minutes〉（英文，約 25 分鐘）。內容紮實、講解清楚，24 分鐘就從 Obsidian 的主要功能一路講到怎麼跟 AI 搭配，很適合入門。上面的截圖剪的就是這支影片。

這裡播不了的話（例如所在的網路擋 YouTube），可以直接到 YouTube 看。

LLM Wiki 那段可以搭配我寫的 LLM Wiki 那篇 一起看。

參考資料

• Obsidian 官方說明：Web Clipper（obsidian.md/help/web-clipper）
• Obsidian 官方說明：Templates、Filters（同一份說明的子頁）