@@ -1,106 +0,0 @@
---
title: "Obs170| Obsidian的官方網頁擷取工具: Obsidian Web Clipper; 設定與使用 – 簡睿隨筆"
author:
tags:
- "clippings"
date: "2025-01-06T15:10:41+08:00"
time: "2025-01-06T15:10:41+08:00"
description:
source: "https://jdev.tw/blog/8611/obsidian-web-clipper-for-browser-extension"
published: 2024-11-24
---
==Obsidian官方的Web Clipper(網頁擷取/网页剪藏)越來越成熟了,今天來簡單介紹它的設定與使用。==
==到對應的下載位置安裝後,再將之顯示在工具列,就能隨時點擊圖示來擷取網頁內容了。==
==Obsidian Web Clipper提供了模板功能, 可依需求設定好模板, 讓擷取內容以模板樣式來產生。預設的模板 Default 已經能符合一般的操作了, 但如果你有不同的需求的話, 可以在擴充的選項設定裡用【New template】建立新的模板。==
## 1\. 安裝
==到官方網站的clipper網頁[Obsidian Web Clipper ](https://obsidian.md/clipper )就能找到不同瀏覽器的下載網址,安裝後再將它顯示在工具列上就能開始使用了。==
==在正式使用之前先來做它的模板設定。==
## 2\. 模板設定
==擷取的內容可以指定套用需要的模板。預設的Default模板主要設置了 6 個Property, 本體內容(Note content)是`{{content}}` 。
筆記存放位置在模板的【Note location】欄位設定。==
========================================================
==因為我的筆記都是用Heading 1當做標題和檔名, 因此我自訂了新的模板, 修改了Note content:==

## 3\. 模板變數
==點擊擴充右上角的 【•••】 就能查看所有模板變數, 這些變數能使用在YAML的特性與筆記本體內容。==
> ==參考: [https://help.obsidian.md/web-clipper/variables](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 ](https://help.obsidian.md/web-clipper/variables )==
==變數裡能再使用過濾器( filters) , 格式是`{{variable|filter}}` ,請參考 [web-clipper filters ](https://help.obsidian.md/web-clipper/filters )。==

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


## 5\. 💡 相關鏈接
==💡 解說文章:
✅ GitHub: [https://github.com/obsidianmd/obsidian-clipper ](https://github.com/obsidianmd/obsidian-clipper )
✅ Obsidian Web Clipper: [https://obsidian.md/clipper ](https://obsidian.md/clipper )
✅Chrome 線上應用程式商店 Obsidian Web Clipper: [https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf ](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/ ](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 ](https://apps.apple.com/us/app/obsidian-web-clipper/id6720708363 ) (for macOS, iOS, and iPad)==
## 6\. 教學影片
==[https://youtu.be/wA5UQ0lnGYA ](https://youtu.be/wA5UQ0lnGYA )==

==# # ==
#### 您可能也會有興趣的類似文章
- [Beastnotes: 線上教學專用筆記工具 ](https://jdev.tw/blog/6171/beastnotes-introduction "Beastnotes: 線上教學專用筆記工具" ) (0則留言, 2020/03/22)
- [Burning Vocabulary: 學習語言的瀏覽器擴充 ](https://jdev.tw/blog/7072/burning-vocabulary-chrome-extension "Burning Vocabulary: 學習語言的瀏覽器擴充" ) (0則留言, 2022/04/17)
- [SingleFile瀏覽器擴充: 萬物歸一! ](https://jdev.tw/blog/6498/browsers-extensions-singlefile-save-html "SingleFile瀏覽器擴充: 萬物歸一! " ) (0則留言, 2020/12/05)
- [\[Obs# 49\] 快速準確的擷取網頁生成Markdown備忘: Obsidian Clipper瀏覽器擴充](https://jdev.tw/blog/6804/obsidian-clipper-chrome-extension "[Obs# 49] 快速準確的擷取網頁生成Markdown備忘: Obsidian Clipper瀏覽器擴充") (8則留言, 2021/09/05)
- [\[Anki# 6\] 日文學習: 瀏覽器擴充Yomichan](https://jdev.tw/blog/6568/yomichan-japanese-anki "[Anki# 6] 日文學習: 瀏覽器擴充Yomichan") (2則留言, 2021/02/21)
- [RSS閱讀器: 瀏覽器擴充 Feedbro ](https://jdev.tw/blog/7842/rss-reader-feedbro "RSS閱讀器: 瀏覽器擴充 Feedbro" ) (2則留言, 2022/11/18)
- [YiNote: YouTube教學的必備筆記利器 ](https://jdev.tw/blog/6493/yinote-youtube-note-taking-extension "YiNote: YouTube教學的必備筆記利器" ) (0則留言, 2020/11/29)
- [摸蛤兼洗褲○○○🐡🐟🐠○○○上網衝浪順便學英文: BlueSea瀏覽器擴充 ](https://jdev.tw/blog/6525/chrome-extension-bluesea-learning-english "摸蛤兼洗褲○○○🐡🐟🐠○○○上網衝浪順便學英文: BlueSea瀏覽器擴充" ) (0則留言, 2020/12/27)
- [\[Anki# 1\] 用在線詞典助手(瀏覽器擴充)學會Anki的基本觀念](https://jdev.tw/blog/6516/learn-anki-with-online-dictionary-helper "[Anki# 1] 用在線詞典助手(瀏覽器擴充)學會Anki的基本觀念") (2則留言, 2020/12/19)
- [沙拉查詢:超方便的多字典整合翻譯擴充,滑鼠選字後顯示十多個字典的翻譯 ](https://jdev.tw/blog/6500/saladict-aggregation-translation-extension "沙拉查詢:超方便的多字典整合翻譯擴充,滑鼠選字後顯示十多個字典的翻譯" ) (0則留言, 2020/12/06)
- [\[Obs# 105\] Obsidian外掛 Local REST API 提供外部整合服務](https://jdev.tw/blog/7785/obsidian-plugin-local-rest_api "[Obs# 105] Obsidian外掛 Local REST API 提供外部整合服務") (0則留言, 2022/11/06)
- [Obs166| 捲土重來的Obsidian Note From Template終於修正小瑕疪而能正確運行了! 推薦使用! ](https://jdev.tw/blog/8492/from-template-new-release "Obs166| 捲土重來的Obsidian Note From Template終於修正小瑕疪而能正確運行了! 推薦使用! " ) (0則留言, 2024/08/25)
- [Obs126| Obsidian 2023/04 7個新外掛介紹與評析 ](https://jdev.tw/blog/8107/obsidian-7-new-plugins-introduction "Obs126| Obsidian 2023/04 7個新外掛介紹與評析" ) (0則留言, 2023/04/29)
- [Obs# 117 | Obsidian表格攻略與表格就地編輯外掛: Table Enhancer ](https://jdev.tw/blog/8049/obsidian-making-markdsown-tables-effectively "Obs# 117 | Obsidian表格攻略與表格就地編輯外掛: Table Enhancer" ) (0則留言, 2023/03/19)
- [Obs160| Obsidian試算表外掛2024年新選擇: Univer、Sheet Plus ](https://jdev.tw/blog/8462/obsidian-spreadsheet-plugins-univer-sheet-plus%e8%a9%a6%e7%ae%97%e8%a1%a8%e5%a4%96%e6%8e%9b2024%e5%b9%b4%e6%96%b0%e9%81%b8%e6%93%87%ef%bc%9auniver%e3%80%81sheet-plus "Obs160| Obsidian試算表外掛2024年新選擇: Univer、Sheet Plus" ) (2則留言, 2024/06/30)
# 參考來源
- [Obs170| Obsidian的官方網頁擷取工具: Obsidian Web Clipper; 設定與使用 – 簡睿隨筆 ](https://jdev.tw/blog/8611/obsidian-web-clipper-for-browser-extension )