NuxtJS Content 初探心得
3 min readJun 2, 2020
介紹
在你的 NuxtJs 專案底下安裝 @nuxtjs/content 套件，並且將你的內容放在 content/ 資料夾底下，那麼套件將會自動將資料夾底下的 Markdown，JSON，YAML，CSV 檔案轉成 MongoDB 形式的 API，這樣你的專案將會如同擁有一個內容的資料庫。
特色
- 開發時快速 hot reload
- 可以在 markdown 裡面用 vue compoents
- 全文搜索
- 支援靜態網站生成 `nuxt generate`
- 強大的 QueryBuilder API (MongoDB like)
- code block 內建用 PrismJS 的語法高亮
安裝
將 @nuxt/content 裝入你的專案
yarn add @nuxt/content然後設定 nuxt.config.js
內容
在專案底下，創個 content 資料夾，結構如下：
content/ articles/ article-1.md article-2.md home.md
會自動將裡面的 ```.md```，```.yaml```，```.csv```，```.json```，檔案轉換並生成以下額外的屬性：
- dir
- path
- slug
- extension
- createdAt
- updatedAt
Fetching & Displaying Content
有了內容以後，再來要將它讀出來並放到頁面上， @nuxtjs/content 會在你的 vue 上面掛載 $content 接口，接著用各種 mongoDB 的方式來 query 內容，再用它的呈現專用 component 來呈現內容。
結論
因為現在 JAMSTACK 越來越盛行了，以前端製作一個外皮然後搭上內容就是一個網站，而 @nuxtjs/content 這個 module 提供了一個幫你把 markdown file 轉換成 API 的接口，讓前端靜態網站blog 系統的製作越來越省心，另外這個 github repo 才剛創一個月，目前只能說是一個概念的展示，或是說 mvp 吧，很多應該要可以 custom 的地方，都不見得有提供 config 給你修改，所以就目前來說想用到完全客製化的話，可能還需要再等等。
