到至今的程式碼，會看到許多以 TailwindCSS 去修飾的 HTML 標籤。在編寫時，我總想著這樣的方式，很容易會重複性的程式碼，尤其是 pages 可能都會用同一種標題、編排方式。

或許可以用 Nest Layout 的方式去解決，但畢竟彈性相對差。後來在參考其他 Digital Garden 的做法，我才得到解答。他們是將每個元件幾乎都做成一個 component，比如說頁面的標題、標頭、內容、註腳、標籤、頁尾都是一個 component。

但這樣 @/components 目錄下不就會一堆 components 難以瀏覽嗎？這時候就可以利用 Nuxt 基於目錄結構的 Component Names 特性，以官網的例子來說：

| components/
--| base/
----| foo/
------| Button.vue

在這樣的目錄結構下，要使用 @/components/base/foo/Button.vue 可以直接用 <BaseFooButton /> 即可。

利用這個特性，在 Digital Garden 的 components 目錄下可能就會有個 page 目錄，下方有 Title.vue、Header.vue、Content.vue、FootNote.vue、Tags.vue、Footer.vue 等檔案。

若用過 Notion 的讀者，就知道上面顯示的每個東西都是一種元件。在這個情境下也可以大概這樣類比，想像每一個顯示的物件，都是一個元件，而我們就只需要將這些會複用到物件都給元件化即可。

元件化後，我要新增不同的頁面時，就可以更簡單，維護起來更方便許多，在檢視上也較不會因為太多 class 而增加閱讀成本。