🌰 Medium Tips|內文導引
IPFS
為 Medium 文章製作目錄,提升長篇文章的閱讀體驗!點擊目錄中的章節項目,可直接到達文章的指定章節。
舉個栗子 🌰 系列文章
讀者建議將 Medium 教學系列分段,比較好吸收與入口 🥣 以下心得以我的帳號示範,若有誤的地方觀迎提醒。
如想看完整的內文導引(目錄)請見本篇的 Medium 原文。
觀念說明
在製作目錄前,需要先了解基本的連結觀念。
錨點(anchor)
錨點是超連結的一種,為特殊的超連結。
- 超連結|跳轉至不同頁面:A頁面→B頁面
- 錨點|同頁面的不同位置間跳轉:A頁面任何段落→A頁面任何段落
兩者皆使用填入連結的作法,超連結填入頁面的連結網址即可,不過錨點要如何找到它的連結呢?(文章內會說明如何找尋)
目錄的優點
- 減少使用者負擔:隨心所欲地到達特定章節,不須過度滑動頁面
- 引導使用者:指引使用者此段落的補充位於何處
- 文章架構:能讓使用者在閱讀正文前,知道此文章的架構
第一步:製作目錄
🎃 重點提醒 🎃
製作目錄通常為「文章內文完成後」進行!也就是內容皆就定位之後才製作目錄。
正式名稱為「程式碼區塊」由淺灰底及較小的字體組成,詳細可見〈🌰 Medium Tips|句中代碼&程式碼區塊輸入方法〉內有詳細說明。
1. 將文字排列好,並反白文字
2. 使用快捷鍵
- Mac:⌘ + option + 6
- Win:Ctrl + alt + 6
- 取消:反白文字,再使用快捷鍵,即可回復
第二步:製作返回目錄
製作「返回目錄」區塊,可讓使用者瀏覽文章時,隨時返回目錄,再從目錄進到想去的章節中!若少了這區塊,使用者必須要上滑至頁面的最上方才會看到目錄,還不如自己滾動頁面尋找想看的章節…?
合適的目錄導引,在不影響閱讀體驗的前提下,須讓使用者能輕鬆找到。
通常我的返回目錄區塊,習慣有兩個部份:
- 繼續閱讀:告訴使用者,想繼續閱讀的話可不理會此區塊
- 返回目錄:點我可以返回目錄
製作方式與上一步相同,並放置在每一個章節結束的最後一行;可從以下的示意動圖看他們兩個發揮無間的模樣。
第三步:找尋段落標籤
1. 開啟頁面檢查
在編輯文章頁面中:
- 使用 Chrome 瀏覽器,將段落標題文字反白
- 右鍵點選檢查
2. 找到文字段落的標籤
在畫面中找到一段由英文、數字組合而成的編號,通常它的前面會是 name="編號",請將這段編號記下來!
紀錄好之後,關掉檢查視窗,重複「1. 開啟頁面檢查」到這步的步驟。
有幾個導引的段落位置,就會有幾個編號需要紀錄,例如: 一個目錄、四個章節,總共有五組編號需紀錄。
第四步:填入段落標籤連結
1. 在「目錄」填入標籤連結
- 將目錄對應的文字反白,點擊加入連結
- 填入「#編號」記得編號前要加上#字號,完畢後即可在發布文章後見效
2. 在「返回目錄」填入標籤連結
別忘了「返回目錄」也必須填入標籤連結,它所對應的標籤為目錄,方法與「目錄」的填入方式相同。
發布文章後,可目錄連結是否都正確無誤 🎉🎉🎉🎉
文章首次發布於 Medium,目前閱讀的版本為修剪版。
感謝你的閱讀及支持,任何問題都歡迎來信交流|imjhanemi@gmail.com
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
- 来自作者
- 相关推荐