在 Day 19 我們聊到麵包屑 (breadcrumb) 的概念，在 Day 10 我們也聊到筆記頁面該顯示哪些資訊。今天來特別探究文章頁面又該顯示哪些資訊或是有哪些功能吧。

首先，進到一篇文章能夠幫助讀者快速暸解這篇文章的有兩個元素：

1. TL;DR
2. 文章目錄

TL;DR 是 Too Long; Don't Read 的縮寫，當我們將它放在文章的開頭時，會有「長話短說」的意思。所以我會希望有一個有顏色的區塊，裡面只用兩到三句話，將這篇文章的重點講完，讓有興趣的讀者再往下看。我也在思考，是不是在裡面用 HQ&A 的方式去濃縮，附上一個問句以及 2-3 句話的短答，也讓我自己檢視我這邊文章是不是太多意圖。這部分我預估可以建立某個 component 搭配 MDX 去使用。

另外就是文章目錄，系統可以自動幫我將 <h1> 到 <h3> 的標題生成一個目錄放在 TL;DR 下方，或是在側邊，可能會隨著畫面移動，可能不會，幫助讀者可以知道整體文章架構，最好是可以知道現在位在哪裡，並且能夠過點連結快速移動。

在快速聊解本篇文章後，另一個訴求是詳細理解本篇文章，那就會用到另一個功能——註解，或是註腳。在過往的作法，我是會在關鍵的詞後面附上一個 [^1]，然後在底部在附上 [1]: xxx 的方式去寫上註解，那系統就會幫我建立對應的號碼與其連結，並在文章底部附上這些註解。但事實上是，真的在閱讀文章，想多了解細節時，是不太喜歡這樣切換位置的。我看到一個不錯的作法是，在桌面版介面，會將註解放在文章兩側，如果是在行動裝置介面，就是點開那個註解，會在該行下方展開。