使用Notion製作圖庫型的作品集展示頁
之前分享『使用Notion製作Matters文章索引及成果觀察』之後,看到好多版友按圖索驥創建出自己專屬的文章索引,並且美編效果遠比我的初始版來得豐富許多!讓我看得驚喜連連。(文後有做關聯,歡迎一起去逛逛)
有鑒於 Matters 平台上有許多圖像創作者,因此,我想再多介紹 Notion 裡面的 Gallery範本 功能,讓擁有圖像作品的版友們可以使用 Notion 來創建自己的作品集頁面。
(由於我沒有任何圖像作品,所以就拿我自己的閱讀心得文章來做示範頁,文後有附上此模版連結,有興趣的版友可以複製到自己的 Notion 帳號底下玩玩看。)
![](https://assets.matters.news/embed/abffa198-13fe-4a70-8d69-ed69620e4e41.png)
其他應用
Gallery範本除了可以用來展示自己的圖像作品之外,也可用來建立自己的 書單管理表 等。
作法跟這篇文章的步驟一模一樣,只需將書封照片貼入頁面當中,即可以製作一份自己專屬的圖書館書冊頁!
我是一個一本書會不小心買好幾次的金魚腦,現在買書之前都會先打開自己的管理表,掃一眼書封照片就可以確認我是否已經買入它了(嘆)。
我也會先把閱讀時的一些簡短心得先紀錄在該頁面中。等要產出正式閱讀心得時,再挖出來編輯即可。
如果你也對這個主題有興趣,那就跟著這篇文章開始走起吧!
【內容摘要】
1. 使用【Gallery】模板
✅ 頁面屬性Property設定
✅ 增加【網站連結】的屬性欄位
✅ 變更屬性欄位名稱
✅ 變更日期
✅ 插入圖片
2. 設定作品集頁面超連結
3. 變更作品集顯示尺寸 (Card size)
4. 將作品集依照日期排序 (Sort)
5. 結語
1. 使用Gallery模板
📌 新增一個全新的頁面
![](https://assets.matters.news/embed/8f6e8bd8-418c-4d99-9092-222ce4d1a4de.png)
📌 選擇【Gallery】畫廊範本
![](https://assets.matters.news/embed/bad351ee-702c-445f-ad4b-d8968d52d3be.png)
今天就以【閱讀心得】來作為操作示範
![](https://assets.matters.news/embed/5522c5ea-c0f0-4e28-aff0-61feb64dbbdd.png)
模版內多餘的頁面可以點擊右上角『。。。』符號,選擇 刪除
![](https://assets.matters.news/embed/eeddd577-25fa-4bd9-8a19-a6c6b857507b.png)
![](https://assets.matters.news/embed/578900fb-dabe-42a5-93a7-8cc00920f839.png)
✅ 頁面屬性Property設定
📌 增加【網站連結】的屬性欄位
![](https://assets.matters.news/embed/10d20b08-0240-4914-ae01-1421fc93c484.png)
📌 滑鼠游標移至Text,便可以看到下一層的功能鍵,選擇【URL】(網址)
![](https://assets.matters.news/embed/c0fabe0a-4ce7-4a75-98a9-84e75d6d31d7.png)
📌 貼入網址
![](https://assets.matters.news/embed/a0734b7e-a651-4672-8613-7cf1b2d1c7fc.png)
✅ 變更屬性欄位名稱
![](https://assets.matters.news/embed/09c7f045-3ae2-42ac-8994-9c4294654944.png)
✅ 變更日期
在Gallery範本裡面預設的日期資料是此頁面的創建日期。我們可以變更為文章發表日期
![](https://assets.matters.news/embed/1bdc6bcf-21b0-4569-80ba-2cb18ca74abf.png)
日期可以直接在日曆上做切換,亦或是直接Key in
![](https://assets.matters.news/embed/7616ad87-9086-4580-94c6-517415fa1d5f.png)
✅ 在頁面內輸入『/image』,便可以插入圖片
![](https://assets.matters.news/embed/939192c2-7ded-4d79-bcee-e84055388b81.png)
📌 上傳圖片
![](https://assets.matters.news/embed/56f6ac85-5bb8-4e32-a6c8-6d0bb048f049.png)
圖片顯示成功,此頁即完成
![](https://assets.matters.news/embed/49b83904-07ac-48c3-b322-9825d023b64f.png)
頁面屬性Property一但新增屬性,或是修改屬性名稱,之後所新增的頁面都會直接默認該設定,不用重複做修改。
但這也代表著頁面屬性變更之後,同屬於相同作品集頁面底下的『每個』頁面都會進行 同步修改 喔!連同之前已經存好檔的頁面,都會自動帶入最新的設定。
依序建立好各頁面資料之後,接下來,便要進入第二階段,開始設定作品集頁面的呈現細節囉!
2.設定作品集頁面超連結
✅ 打開網址,完成超連結
![](https://assets.matters.news/embed/56ab5b56-7caa-4ca8-a89b-ec7505e371de.png)
![](https://assets.matters.news/embed/fd7e4e73-ae7a-40e6-8466-80182d819d70.png)
3. 變更作品集顯示尺寸 (Card size)
✅ 圖片顯示有三種尺寸可以選擇
此示範圖為 Medium 尺寸
![](https://assets.matters.news/embed/1e971b44-8713-4c2d-b03a-b67842ac3be8.png)
此示範圖為 Small 尺寸
![](https://assets.matters.news/embed/bb50e1a9-3ebe-463f-bd24-5be95600e478.png)
4. 將作品集依照日期排序 (Sort)
✅ 點選sort, 選擇Add a sort
![](https://assets.matters.news/embed/1e4e9dde-fb3d-48dc-88e9-16d3005c283d.png)
![](https://assets.matters.news/embed/4a427aa6-d61f-48b6-a726-616c86731df8.png)
✅ 依照發表日期遞減排列的成品
![](https://assets.matters.news/embed/0b325ac9-8faa-431b-83b6-1b952a272110.png)
結語:
文章的最後當然要附上模板來讓大家動手玩玩
https://www.notion.so/ca3252162bf840948e45ad1f71b259fd?v=faab1de1cfa64e45a1ef623c816cbf32
點選右上角的Duplication即可複製此模板到你的帳號隨便玩耍喔!
![](https://assets.matters.news/embed/66584077-f1a2-4793-8122-3bbeea7ea96d.png)
如有任何操作上的問題,也可以在此留言給我!
✅ 延伸閱讀
使用Notion製作Matters文章索引及成果觀察
Notion頁面內嵌Likecoin讚賞鍵的步驟流程介紹
【作者簡介】Hi,你好,我是【漫閱讀】的站長,小蔓。想要買書不踩雷,收集更多書單,歡迎來到我的閱讀天地看更多! 👉 漫閱讀Matters文章索引
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/690627a0-dae5-414f-959e-65b7bdc157b5.png/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/690627a0-dae5-414f-959e-65b7bdc157b5.png/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/4b0c850b-5a65-45b4-9822-17258d2d33d4.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/4b0c850b-5a65-45b4-9822-17258d2d33d4.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/600f8d4f-aba1-404f-8b69-16acaf38d3b5.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/600f8d4f-aba1-404f-8b69-16acaf38d3b5.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/d6b79609-f1f0-4528-8d85-f64542ea89bc.png/public)
![logbook icon](https://assets-next.mattersprotocol.io/_next/static/media/logbook.2cfac4f7.gif)
- 来自作者
- 相关推荐