106 lines
8.1 KiB
Markdown
106 lines
8.1 KiB
Markdown
---
|
||
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) |