工具 | 教你用Notion製作3種網頁「剪貼本」

更新於 發佈於 閱讀時間約 9 分鐘

Notion是免費的雲端筆記服務,提供多元的模板,使用者能用豐富的排版呈現自己的筆記。可以用網頁瀏覽、也有電腦、手機的軟體可使用。

Notion的功能拿來蒐集網頁、建立自己的網頁剪貼本/收集冊,是非常方便的工具!
今天就介紹如何利用Notion提供的「web clipper(網頁剪取)」工具,建立3種不同的剪報格式:

左:圖片型剪貼本。右:列表型剪貼本。

左:圖片型剪貼本。右:列表型剪貼本。

  1. 圖片型剪貼本:
    上方左圖是圖片型的模版,很適合拿來蒐集、比較大量商品。
  2. 列表型剪貼本:
    上方右圖則是列表型的模版,可以一眼看到所有網頁的標題、網址,還能加上分類標籤、文字附註,非常適合用來建立屬於自己的網路文章資料庫。
  3. 合併多本剪貼本:
    除了上述兩種呈現方式,Notion還能將不同類型的模版合併在同一頁同時呈現,適合建立超大型的資料庫。

今天的文章會分成4個段落:

  • 事前準備
  • 圖片型剪貼本
  • 列表型剪貼本
  • 合併顯示剪貼本

那就直接進入第一段吧!


0. 事前準備

步驟1:
在「剪報」前,需要安裝剪取工具在你的網頁瀏覽器上。
Notion支援剪取網頁的瀏覽器有ChromeFirefox,點選連結即可下載安裝。
手機則是安裝Notion App - AndroidiOS就可以使用。

步驟2:瀏覽器登入
安裝剪取工具後,你會在瀏覽器的右上角看到Notion的圖示,
點擊圖示後,註冊新帳號、或用自己的帳號登入,事前準備就完成囉!

安裝後點選圖示、登入帳號

安裝後點選圖示、登入帳號

附註:如果是手機App,下載完點開App註冊或登入後,就完成準備了。


1. 圖片型剪貼本

這個形式的剪貼本,可以同時看到每個網頁上的圖片,又保留了原本的網址。
我喜歡用這個樣式,蒐集比較我想要買的商品。方便一目了然看到所有圖片。

圖片剪貼本適合蒐集想買的商品

圖片剪貼本適合蒐集想買的商品

1-1. 建立剪貼本(頁面)

步驟1:
如果你首次使用Notion,左方的「頁面清單」會有很多教學頁。
這邊不多作介紹,直接點擊頁面清單下的「add a page」選項,新增一個頁面。

步驟1:選擇左手邊的「Add a page」來新增頁面

步驟1:選擇左手邊的「Add a page」來新增頁面

步驟2:
新增頁面以後,在頁面上方命名後,點擊下方的「Gallery」,就會形成圖片範本。

步驟2:命名後,選擇「Gallery」這個圖片範本

步驟2:命名後,選擇「Gallery」這個圖片範本

步驟3:
Gallery範本建立後,預設會有3個子頁面作為範例。
點擊每個頁面的右上角「...」→選擇「delete」,即可刪除範例頁面。
將3個範例頁面清空後,作為剪貼本的頁面就準備好啦!

步驟3:選「...」後,再按下「Delete」就可以刪除不要的頁面

步驟3:選「...」後,再按下「Delete」就可以刪除不要的頁面

1-2. 剪貼網站

開始逛網站尋找靈感囉。

電腦瀏覽器:
看到喜歡的網站,就點右上角的Notion圖示。
點圖示以後,最上方會是網頁的名稱,可以將它改成方便辨識的標題。
「Add To」是要把這個網頁剪到哪,要選擇剪貼本的頁面「01.盆栽剪貼本」

剪貼網站:點選圖示後、修改名稱、選擇剪貼本,再存檔就完成囉

剪貼網站:點選圖示後、修改名稱、選擇剪貼本,再存檔就完成囉

附註:剛在Notion新增剪貼本,清單內可能會找不到這頁,重開瀏覽器就好囉!

手機瀏覽器:
在手機看到適合的網頁後,先找到瀏覽器的「分享」選項。
接著選「Notion」,再來修改標題、選擇剪貼本以後,送出或存檔就完成了!

手機剪貼的方式,則是從分享裡面找到Notion,就可以剪貼網頁囉

手機剪貼的方式,則是從分享裡面找到Notion,就可以剪貼網頁囉

1-3. 整理剪貼本

剪了幾頁後,回到Notion就可以看到剛剛剪取的網站圖片。
如果是剪完立刻回Notion看,可能還是空白,等一下就有圖了!

剪貼網站再回到Notion,剪貼就完成了

剪貼網站再回到Notion,剪貼就完成了

想調整順序的話,拖曳圖片就可以了。

如果想要瀏覽原本的網站,點擊圖片,在跳出的彈窗內就能看到網址囉!

要瀏覽網站,點擊圖片後就可以看到網址

要瀏覽網站,點擊圖片後就可以看到網址


2. 列表型剪貼本

列表型的剪貼本,我是拿來蒐集網路文章用的。
我的使用方法是:看到好文章先存起來,這時候只有文章名稱網址
等我看完文章後,不喜歡的會刪除,喜歡的則會加上標籤跟附註,所以列表中還沒有加上標籤的,就是我還沒看的文章。

列表型剪貼本適合蒐集網路文章

列表型剪貼本適合蒐集網路文章

2-1. 建立剪貼本(頁面)

步驟1:
一樣是去左方頁面清單選取「add a page」來新增一個介面。

步驟2:
這次新增介面後,要選擇的是下方「Table」的選項。

步驟1、步驟2:「Add a page」後,命名,再選擇「Table」

步驟1、步驟2:「Add a page」後,命名,再選擇「Table」

步驟3:
一開始也會有3頁空白範本,選前方的點點選單後,按下「Delete」就可以刪除囉!

步驟3:按下點點以後,選「Delete」就能刪除

步驟3:按下點點以後,選「Delete」就能刪除

2-2. 剪貼網站

剪貼網站的步驟跟1-2.一樣,但要記得選取這次的剪貼本「02.網路文章剪貼本」

剪貼網站的方法都一樣,但要記得選對剪貼簿

剪貼網站的方法都一樣,但要記得選對剪貼簿

2-3. 整理剪貼本

剪貼完文章後,回到Notion。可以看到第一欄是文章標題,最後一欄是文章網址。
接著,我想幫表格修改標題加上標籤以及寫附註

步驟1:修改表格標題
這個表格的每個欄位都可以改名,只需要點名字就能修改囉。

步驟1:點欄位標題就可以改名字了

步驟1:點欄位標題就可以改名字了

步驟2:加上文章標籤
第二欄是標籤欄位,點選標籤的格子就可以用打字的方式幫文章增加標籤。

步驟2:點選格子以後直接輸入,就可以新增標籤了

步驟2:點選格子以後直接輸入,就可以新增標籤了

步驟3:增加附註
表格第三欄,本來是Files,增加附件的欄位,我想將他改成寫附註的欄位
所以先點選Files這欄、將滑鼠移到「Files & media」、最後選取「Text」。
這樣就把附檔的欄位改為可寫文字的欄位了。

步驟3:點Files的欄位以後,滑鼠移到Files,再選Text,就改成文字欄了

步驟3:點Files的欄位以後,滑鼠移到Files,再選Text,就改成文字欄了

最後,如果要新增其他欄位,移到表格最右邊,選擇「+」就可以新增囉。

在表格的最右邊,按下「+」就能新增更多欄位

在表格的最右邊,按下「+」就能新增更多欄位


3. 合併顯示兩本剪貼本

前兩段示範了2種我很喜歡的剪貼方式。
但如果我有N本剪貼本,又懶得一個一個點開看呢?
在Notion是可以把他們合併顯示在同一頁,但又保留各別樣式的!
用前2個範例繼續介紹吧。

剪貼本太多,也可以合併顯示在同一頁

剪貼本太多,也可以合併顯示在同一頁

3-1. 移入盆栽剪貼本

步驟1:建立合併頁面
首先一樣是「Add a page」、幫頁面命名。

步驟1:先「Add a page」,再命名

步驟1:先「Add a page」,再命名

步驟2:將盆栽剪貼本移入
接著,將左邊的「01.盆栽剪貼本」拖曳進這個頁面。

步驟2:從左邊拖曳頁面進來

步驟2:從左邊拖曳頁面進來

步驟3:將盆栽剪貼本叫出來
對盆栽剪貼本按右鍵,選「Turn into inline」。

步驟3:對著這個頁面按右鍵,再選「Turn into inline」

步驟3:對著這個頁面按右鍵,再選「Turn into inline」

噹啷!我們就把盆栽剪貼本變成這頁的一小部分了。

盆栽剪貼本變成一個子頁面了

盆栽剪貼本變成一個子頁面了

3-2. 移入網路文章剪貼本

接下來移入第二本的方式就都一樣囉!
先拖曳頁面進來、在頁面上按右鍵、選「Turn into inline」就好囉。

先拖曳頁面、再對著這一頁按下右鍵、最後選「Turn into inline」就可以了

先拖曳頁面、再對著這一頁按下右鍵、最後選「Turn into inline」就可以了

這樣一來,兩個頁面就都成功的合併在同一頁啦!
未來剪貼網頁時,只要記得「Add to」的選項有選對剪貼本,就會歸類到各別不一樣的剪貼本囉!

合併完的剪貼本

合併完的剪貼本

3-3. 進階技巧:把圖片剪貼本換成表格

盆栽剪貼本也可以換成表格顯示

盆栽剪貼本也可以換成表格顯示

圖片剪貼本蒐集越來越長,看膩了圖片的話,也可以直接轉換成表格。
步驟是,先選剪貼本標題旁的「Add a view」,接著勾選「Table」的選項,最後按下「Create」就可以了。

選擇標題旁的「Add a view」,接著勾選「Table」,再按下「Create」就行囉

選擇標題旁的「Add a view」,接著勾選「Table」,再按下「Create」就行囉

這樣一來,圖片剪貼本就會變成表格形式了。
如果想要切換回來,一樣點選剪貼本標題旁的「Untitled view」,再選擇「Gallery view」就可以變回來囉!

選擇標題旁的「Untitled view」,就可以切換了

選擇標題旁的「Untitled view」,就可以切換了


不知道這篇教學有沒有讓你對Notion比較感興趣呢?
如果有看不懂的地方,歡迎留言給我,讓我有機會改進這篇文章。

又如果,你想用Notion作其他的筆記用途、卻不知道要如何建立,也歡迎告訴我,我很樂意再寫其他主題介紹Notion:)

附註:如果你想知道Notion的基本操作,我非常推薦Mr.K寫的Notion教學喔!

留言
avatar-img
留言分享你的想法!
Robin Chen-avatar-img
2020/12/27
請問合併為03之後, 未來clipper如何放入table中而不是變成最下方的一個連結而已
Elisa-avatar-img
發文者
2020/12/27
未來的clipper在選擇剪貼本時,不能選擇03本身的大剪貼本,要選擇03裡面的子剪貼本。 假設我的03頁面叫做「大合併」。 裡面有2個子剪貼頁面叫「網頁剪貼」、「圖片剪貼」 那新增clipper時,「add to」的選項需要選到「網頁剪貼」這個頁面就行了!
avatar-img
Elisa的角落
43會員
22內容數
有些事情,不想大聲地在社群媒體上推送給朋友。 找個小角落,寫給有緣人看
Elisa的角落的其他內容
2022/07/30
《生時間》顧名思義是一本時間管理的書籍。 書中不只提供時間管理技巧,也分享許多作者們實驗的失敗故事或心路歷程。 讓這本不單是生硬的工具書,也是征服時間的辛酸血淚史。讀來相當有趣! 今天想介紹的,則是書中兩個對待辦清單斷捨離的建議。
Thumbnail
2022/07/30
《生時間》顧名思義是一本時間管理的書籍。 書中不只提供時間管理技巧,也分享許多作者們實驗的失敗故事或心路歷程。 讓這本不單是生硬的工具書,也是征服時間的辛酸血淚史。讀來相當有趣! 今天想介紹的,則是書中兩個對待辦清單斷捨離的建議。
Thumbnail
2021/07/30
作者寫道: 「事先想像會議『整體樣貌』,並以此『掌握開會的主導權』,就能大幅減少受人擺佈的機會。」 為了達到「掌握開會的主導權」這件事, 在會議前,要在筆記上寫下3行標題:會議目標、下一步、截止日。 這3行標題,想得簡單一點,就是表面看到的意思。 但如果想得複雜一些...
Thumbnail
2021/07/30
作者寫道: 「事先想像會議『整體樣貌』,並以此『掌握開會的主導權』,就能大幅減少受人擺佈的機會。」 為了達到「掌握開會的主導權」這件事, 在會議前,要在筆記上寫下3行標題:會議目標、下一步、截止日。 這3行標題,想得簡單一點,就是表面看到的意思。 但如果想得複雜一些...
Thumbnail
2021/03/14
你是否有這樣的經驗:看到一本書時,記得自己曾經看過,但卻什麼也想不起來? 本書的誕生,就是作者為了解決這個問題,而提出的閱讀整理術。 我認為這本書最大的優點,就是簡單、易執行,讓「寫讀書心得」變得容易許多!
Thumbnail
2021/03/14
你是否有這樣的經驗:看到一本書時,記得自己曾經看過,但卻什麼也想不起來? 本書的誕生,就是作者為了解決這個問題,而提出的閱讀整理術。 我認為這本書最大的優點,就是簡單、易執行,讓「寫讀書心得」變得容易許多!
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
如果你想要建立自己專屬的知識庫,或者是建立自己的待辦清單,這些零星的教學課程絕對夠你使用。 不過這裡想要介紹三大 Notion 必知道的功能,如果你跟筆者一樣都是金魚腦,很難記得很多東西,基本上掌握了這三大功能,Notion 可以快快上手喔!
Thumbnail
如果你想要建立自己專屬的知識庫,或者是建立自己的待辦清單,這些零星的教學課程絕對夠你使用。 不過這裡想要介紹三大 Notion 必知道的功能,如果你跟筆者一樣都是金魚腦,很難記得很多東西,基本上掌握了這三大功能,Notion 可以快快上手喔!
Thumbnail
現今數位世代,資訊匯流如潮水般湧入,如何有效地整理、保存網頁上有用內容成為許多人的挑戰。如果你像我喜歡使用 Notion 來管理你的工作和生活,那麼 Notion Web Clipper 將會是你無法或缺的強大工具。它能夠將任何網頁內容輕鬆儲存至 Notion,讓你能更便捷地閱讀、註記、保存和分享。
Thumbnail
現今數位世代,資訊匯流如潮水般湧入,如何有效地整理、保存網頁上有用內容成為許多人的挑戰。如果你像我喜歡使用 Notion 來管理你的工作和生活,那麼 Notion Web Clipper 將會是你無法或缺的強大工具。它能夠將任何網頁內容輕鬆儲存至 Notion,讓你能更便捷地閱讀、註記、保存和分享。
Thumbnail
在先前的文章中,我們分享了如何讓你能在頁面中建構出類紙膠帶 or 重點註記的文字樣式,提升內容的視覺吸引力。接下來,在這篇文章中,我們將繼續探索 Notion 的功能,教你如何在資料庫中使用公式 ( equation ),打造多樣化的文字風格,並使你的資料庫更加獨特和個性化。讓我們看下去!
Thumbnail
在先前的文章中,我們分享了如何讓你能在頁面中建構出類紙膠帶 or 重點註記的文字樣式,提升內容的視覺吸引力。接下來,在這篇文章中,我們將繼續探索 Notion 的功能,教你如何在資料庫中使用公式 ( equation ),打造多樣化的文字風格,並使你的資料庫更加獨特和個性化。讓我們看下去!
Thumbnail
現今這個信息爆炸的時代,我們需要一個好的筆記工具來幫助我們管理和整理資訊,而Notion 就是一個非常好用的筆記工具。不過,單調的黑白文字,總讓人覺得索然無味,那麼我們該如何讓Notion更加生動呢?快一起看下去,只要兩個步驟就可以讓你在 Notion 打造出類紙膠帶 or 重點註記的文字樣式!!!
Thumbnail
現今這個信息爆炸的時代,我們需要一個好的筆記工具來幫助我們管理和整理資訊,而Notion 就是一個非常好用的筆記工具。不過,單調的黑白文字,總讓人覺得索然無味,那麼我們該如何讓Notion更加生動呢?快一起看下去,只要兩個步驟就可以讓你在 Notion 打造出類紙膠帶 or 重點註記的文字樣式!!!
Thumbnail
我尋找有沒有可以自動將Kobo畫線內容導入到Notion的方法,找到了某個網站也有跟我同樣的困擾,原本以為按照他的步驟一步一步就可以完成了,但卻還是在途中遇到困難,再經歷一次次將問題丟掉GPT尋求解答後,我想可以將更多這個網站可能比較沒有提到的部份以及我遇到的問題分享給大家。
Thumbnail
我尋找有沒有可以自動將Kobo畫線內容導入到Notion的方法,找到了某個網站也有跟我同樣的困擾,原本以為按照他的步驟一步一步就可以完成了,但卻還是在途中遇到困難,再經歷一次次將問題丟掉GPT尋求解答後,我想可以將更多這個網站可能比較沒有提到的部份以及我遇到的問題分享給大家。
Thumbnail
Hello!你是初次使用 Notion 的朋友嗎?剛開始使用時是不是不知道從何處著手,那怕有很大的自由能客製化。這個心聲我們聽到了,本篇將會讓你知道,你只要學會 Notion 的六個基本功能,就能輕鬆地進行文書處理了。別再因為學習成本而來卻步,讓我們開始探索 Notion 的基本功能吧!走囉!!!!
Thumbnail
Hello!你是初次使用 Notion 的朋友嗎?剛開始使用時是不是不知道從何處著手,那怕有很大的自由能客製化。這個心聲我們聽到了,本篇將會讓你知道,你只要學會 Notion 的六個基本功能,就能輕鬆地進行文書處理了。別再因為學習成本而來卻步,讓我們開始探索 Notion 的基本功能吧!走囉!!!!
Thumbnail
不懂寫程式該如何架設網站?在上一篇文章介紹了多款 No Code 架設網站的工具,我想你已對架站的 No Code 工具有一定了解。如果你還未曾試過建立網站,今天就試試由零開始利用 Notion 架設一個簡單的個人網站。 Notion 網站架設準備工作 將 Notion Page 轉為一頁式網頁
Thumbnail
不懂寫程式該如何架設網站?在上一篇文章介紹了多款 No Code 架設網站的工具,我想你已對架站的 No Code 工具有一定了解。如果你還未曾試過建立網站,今天就試試由零開始利用 Notion 架設一個簡單的個人網站。 Notion 網站架設準備工作 將 Notion Page 轉為一頁式網頁
Thumbnail
話說我這個小懶鬼當初沒有搞懂專題分頁是什麼,所以 Tag 亂下,搞得我的專題分頁看起來很不明確。再加上最近在臉書分享的 Notion 貼文又開始有人在按讚(神奇的演算法),為了感謝大家的這一年來的支持,想要在年末的時候教大家一些我常用的小技巧!
Thumbnail
話說我這個小懶鬼當初沒有搞懂專題分頁是什麼,所以 Tag 亂下,搞得我的專題分頁看起來很不明確。再加上最近在臉書分享的 Notion 貼文又開始有人在按讚(神奇的演算法),為了感謝大家的這一年來的支持,想要在年末的時候教大家一些我常用的小技巧!
Thumbnail
申請Notion帳號之後,看著空空的頁面卻不知道怎麼開始? 這篇方格子是要一步步地教Notion新手們,怎麼蓋自己的書櫃~ (21/03/27追記)書櫃詳細設定
Thumbnail
申請Notion帳號之後,看著空空的頁面卻不知道怎麼開始? 這篇方格子是要一步步地教Notion新手們,怎麼蓋自己的書櫃~ (21/03/27追記)書櫃詳細設定
Thumbnail
Notion是免費的雲端筆記服務,提供多元的模板,用來蒐集網頁、製作網頁剪貼本,是非常方便的工具! 今天就介紹如何利用Notion提供的「web clipper」製作3種不同的剪貼本格式!
Thumbnail
Notion是免費的雲端筆記服務,提供多元的模板,用來蒐集網頁、製作網頁剪貼本,是非常方便的工具! 今天就介紹如何利用Notion提供的「web clipper」製作3種不同的剪貼本格式!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News