使用Notion製作Matters文章索引及成果觀察
會想寫這篇文章是因為被 @Sunline 的 用google協作平台做matters分類目錄 給啟發。
也很感謝大神同意讓我引用他的idea,延伸使用Notion來做索引。
之前我使用 JSFiddle建立文章索引
JSFiddle 的好處是用手機瀏覽可以清晰閱讀,滑動也方便,且能讓編輯者適時手動更新。
但若用筆電、桌機的Chrome網頁瀏覽含 JSFiddle 的文章,便會發現 JSFiddle區域 在整體頁面上佔據挺大的空間,閱讀者還得自行調整滑鼠的瞄準區域來操控是要滑動整篇文章,抑或是只滑動 JSFiddle區。
有在做SEO的人應該都知道
只要對瀏覽者增加一絲絲的 閱讀阻力,就有可能讓閱讀者 立馬關閉 或 跳出 該頁面
![](https://assets.matters.news/embed/bb4fac09-6e30-4a14-9e2b-51cc50eb1467.png)
由於Matters只能設定一篇文章為『置頂』,如果可以把文章索引用其他方式來曝光,就能把這個『置頂』的位置給其他想要專心推廣的某篇文章了。
選擇使用Notion來做文章索引的理由
免費
編輯簡易
不會佔據Matters文章頁面空間
可以利用索引來『主動』推介某些文章
可以嵌入Likecoin讚賞鍵
文章數量多時也能做成不同分頁來管理
成果觀察
自從我將Notion的文章索引放入每篇文章底下之後,發現許多新認識的版友選擇拍手的文章都是我『自己』列入『熱門』的文章。
可見Notion連結是有人點選的,而且也能間接使人多閱讀幾篇自己的文章。
如果你也想要嘗試看看Notion的效果,那就按照底下六步驟來創建自己的Notion索引吧!
原本就有Notion帳號的人,可以直接跳過步驟2的註冊細節
沒耐心的人也可以完成步驟2的註冊之後,直接拉到頁面最底下,直接用步驟5中提供的模板去修改玩玩看。
使用Notion製作文章索引的六大步驟
步驟1. 撈出自己的Matters的全部文章
步驟2. 註冊Notion帳號
步驟3. 建立Matters文章索引頁面
步驟4. 開始進行編輯
✅ 移動
✅ 平行拖曳
✅ 併排拖曳
✅ 製作文章分類標題
✅ 添加底色
✅ 添加符號
✅ 折疊內容
✅ bullet排列或是數列
步驟1. 撈出自己的Matters的全部文章
使用 @豆腐 的 Matalogue 工具 撈出自己Matters的全部文章並複製
步驟2. 註冊Notion帳號
![](https://assets.matters.news/embed/0170a2e2-0426-4579-8ed5-093f95367138.png)
✅ 點選右上角的 "Sign up" 便可以選用Google 或是Apple帳號無痛完成註冊
![](https://assets.matters.news/embed/24c7d7ce-8156-4acc-8703-4f39ee115797.png)
✅ 選擇『自用』(Myself)
Team 跟 Myself 的差別是在於後者 只能自己使用,不能讓不同的帳戶一起連線協作文件。但免費版的 Myself 也可以分享自己製作的模板給其他人使用。
所以針對一般使用上 Myself 就已經很足夠了。
![](https://assets.matters.news/embed/ec7baff1-bc9f-47d1-9c69-fc79cd2deaa9.png)
✅ 按OK即可完成帳號設置
![](https://assets.matters.news/embed/20ae4140-69de-4929-9c76-042d82a96019.png)
Notion這個工具可以想像成英文版的office,他裡面有許多現成的模板可以讓你套用。將來我也會再找時間跟大家主題性的分享運用。
步驟3. 建立Matters文章索引頁面
✅ 選擇新增一個全新的頁面
![](https://assets.matters.news/embed/55b0a286-11e7-4425-b0d2-a341a3c5048f.png)
![](https://assets.matters.news/embed/fd2d1756-c7ab-4dc3-94e8-fb4e8a2ac884.png)
![](https://assets.matters.news/embed/53c1899a-f1e9-4d83-bd5a-31732ca7061a.png)
✅ 將步驟1中抓取的文章複製並貼入Notion頁面中
選擇【拷貝】
![](https://assets.matters.news/embed/7b039c24-827b-484e-be2b-164475268b58.png)
✅ 在Notion頁面上使用【Ctrl (或是Command) + V 】便能完成貼上
![](https://assets.matters.news/embed/e51ea180-af83-451e-a4c6-37c3146bdd20.png)
步驟4. 開始進行編輯
✅ 移動
每一條列的前方都有6個黑點,用滑鼠便可以完成拖曳
![](https://assets.matters.news/embed/42f43017-e32b-43f9-b38a-f2af9a95fe49.png)
✅ 平行拖曳
維持平行的上下拖曳,可以改變前後順序。文字底下會出現等長的藍線
![](https://assets.matters.news/embed/8e219fc3-0ee9-4862-bd2a-681a1f8e1db3.png)
✅ 併排拖曳
拖曳到該段文字前方會出現藍色短槓
![](https://assets.matters.news/embed/58240942-be8e-41c0-8e07-bea6861e95fb.png)
![](https://assets.matters.news/embed/e4a5e72a-254e-4e2a-b6c0-84ddadb51c69.png)
Notion還有一個最棒的一個優點
不論你做了多少列的並排,用手機瀏覽的時候,她都會 自行調整 成最佳的呈現方式!
就跟響應式RWD網頁做的一樣棒!
✅ 製作文章分類標題
點選文字前方的+號,選擇標題 Heading1
![](https://assets.matters.news/embed/de96ef93-6087-4fbd-9551-87144901d72a.png)
![](https://assets.matters.news/embed/3dd1b198-ac1d-467e-ad2b-7d76f7b4939e.png)
*熟悉Markdown語法的人可以簡單打入「/H」便可以跳過選取的動作
![](https://assets.matters.news/embed/93c5105f-6d46-4145-8062-7d4018518d27.png)
![](https://assets.matters.news/embed/88d5fc0b-b0ab-4e34-a123-dbd85bf61f4d.png)
✅ 添加底色
點選文字前方的6個黑點,便可以選擇Color,變更背景顏色
![](https://assets.matters.news/embed/28cd4036-2380-4207-b62b-ec565e9cdef9.png)
![](https://assets.matters.news/embed/3d7c3eeb-54f9-49f6-a968-429b3d0f993e.png)
✅ 添加符號
在文字前面使用「/emoji」便可以加入自己想用的分類icon
![](https://assets.matters.news/embed/57b10bb8-8528-42e2-bee5-98d42c7e44e9.png)
![](https://assets.matters.news/embed/cb4d1865-1da6-4cd8-879f-2a49bf608b23.png)
✅ 折疊內容
在選好的分類前方點選6黑點,選擇「Turn into」=> 「Toggle list」
![](https://assets.matters.news/embed/dd10a7d9-c481-4fe5-9680-08f10810c4cc.png)
![](https://assets.matters.news/embed/93414419-b62e-4648-8f70-f9860450782f.png)
✅ 點開三角形,把想要的文章給貼進去
![](https://assets.matters.news/embed/aba8f80b-4773-4d76-9470-600b1ec1e311.png)
✅ 當然每列細節也可以點選前方的6黑點,選擇bullet呈現方式或是數列
![](https://assets.matters.news/embed/87b21607-b456-423b-99c2-33fce8fec56c.png)
![](https://assets.matters.news/embed/481f24e8-4e49-4cab-9cff-7dd82b9b3cff.png)
✅ 編輯頁面
![](https://assets.matters.news/embed/998acf78-d2e6-4ba6-ba1c-39d07edc2843.png)
在頁面標題上方可以加入想要的符號(icon),封面(Cover)
步驟5. 獲得分享的連結
點右上角的「Share」及打開「Share to web」
![](https://assets.matters.news/embed/2d37182a-0eca-4b17-bdf2-786574ac04cd.png)
![](https://assets.matters.news/embed/ec52b424-fcf6-409a-8b9e-cbdb903aee29.png)
底下的分享選項建議都關閉
步驟6 內嵌Likecoin button
在Notion頁面底下貼下列網址即可安裝Likecoin讚賞鍵
https://button.like.co/in/embed/Likecoin ID/button?referrer=Notion share link
=> 上述網址中的粗體代入 『自己的ID』 還有 『Notion索引的分享連結 』
即可嵌入Likecoin button
寫在最後
歡迎註冊Notion帳號之後,用我這個試做的頁面自己玩玩看https://www.notion.so/Matters-771c2154f6f749fb9f9c36048858292e
只要按右上方的 Duplication,即可複製此頁面到自己的Notion帳號底下去玩
![](https://assets.matters.news/embed/c4957534-cd0b-4934-82cc-5a5e9746d8ec.png)
如果有任何操作上的問題,也歡迎留言給我!
【作者簡介】Hi,你好,我是【漫閱讀】的站長,小蔓。想要買書不踩雷,收集更多書單,歡迎來到我的閱讀天地看更多! 👉 漫閱讀Matters文章索引
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/0a2ded8a-d52d-4218-bed7-aa08c67fd724.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/0a2ded8a-d52d-4218-bed7-aa08c67fd724.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/a49165e9-6308-4148-8dda-bfe2b25a2d84.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/a49165e9-6308-4148-8dda-bfe2b25a2d84.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/6325acd0-8be9-4c08-9f12-417d77e6ff96.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/6325acd0-8be9-4c08-9f12-417d77e6ff96.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/e679fab9-ade6-41c0-8dce-e1390843cf90.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/e679fab9-ade6-41c0-8dce-e1390843cf90.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/imgCached/_X4hXelMPcjGHFU2wqDjyyAKiImYVmVCA-u1f8pUAp1F7FzQyhpiBLPJJe2WP07ahZ2-3yWPqJdF71LKP3X7XYdx6ndhZUpq3A8sTQ=s250.png/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/imgCached/_X4hXelMPcjGHFU2wqDjyyAKiImYVmVCA-u1f8pUAp1F7FzQyhpiBLPJJe2WP07ahZ2-3yWPqJdF71LKP3X7XYdx6ndhZUpq3A8sTQ=s250.png/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/7670ed57-fbc8-4b95-a71c-282472e951f4.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/7670ed57-fbc8-4b95-a71c-282472e951f4.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)
- 来自作者
- 相关推荐