Nuxt Content 初探心得
2020-06-01
Engineering
4 MIN

介紹

在你的 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/conent 裝入你的專案

yarn add @nuxt/content

然後設定 nuxt.config.js 的 modules

{
  modules: [
    '@nuxt/content'
  ],
  content: {
    // options
  }
}

內容

在專案底下,創個 content 資料夾,結構如下:

content/
  articles/
    article-1.md
    article-2.md
  home.md

會自動將裡面的 .md.yaml.csv.json,檔案轉換並生成以下額外的屬性:

  • dir
  • path
  • slug
  • extension
  • createdAt
  • updatedAt
[
  {
    "toc": [
      {
        "id": "這是測試副標",
        "depth": 2,
        "text": "這是測試副標"
      }
    ],
    "body": {
      "type": "root",
      "children": [
        {
          "type": "element",
          "tag": "h1",
          "props": {
            "id": "這是測試標題"
          },
          "children": [
            {
              "type": "element",
              "tag": "a",
              "props": {
                "ariaHidden": "true",
                "href": "#%E9%80%99%E6%98%AF%E6%B8%AC%E8%A9%A6%E6%A8%99%E9%A1%8C",
                "tabIndex": -1
              },
              "children": [
                {
                  "type": "element",
                  "tag": "span",
                  "props": {
                    "className": [
                      "icon",
                      "icon-link"
                    ]
                  },
                  "children": []
                }
              ]
            },
            {
              "type": "text",
              "value": "這是測試標題"
            }
          ]
        },
        {
          "type": "element",
          "tag": "h2",
          "props": {
            "id": "這是測試副標"
          },
          "children": [
            {
              "type": "element",
              "tag": "a",
              "props": {
                "ariaHidden": "true",
                "href": "#%E9%80%99%E6%98%AF%E6%B8%AC%E8%A9%A6%E5%89%AF%E6%A8%99",
                "tabIndex": -1
              },
              "children": [
                {
                  "type": "element",
                  "tag": "span",
                  "props": {
                    "className": [
                      "icon",
                      "icon-link"
                    ]
                  },
                  "children": []
                }
              ]
            },
            {
              "type": "text",
              "value": "這是測試副標"
            }
          ]
        },
        {
          "type": "element",
          "tag": "p",
          "props": {},
          "children": [
            {
              "type": "text",
              "value": "這是測試內文"
            }
          ]
        }
      ]
    },
    "dir": "/",
    "path": "/test",
    "extension": ".md",
    "slug": "test",
    "createdAt": "2020-06-01T06:26:44.150Z",
    "updatedAt": "2020-06-01T06:55:23.703Z"
  }
]

Fetching & Displaying Content

有了內容以後,再來要將它讀出來並放到頁面上, @nuxtjs/content 會在你的 vue 上面掛載 $content 接口,接著用各種 mongoDB 的方式來 query 內容,再用它的呈現專用 component 來呈現內容。

<template>
  <article>
    <h1>{{ page.title }}</h1>
    <nuxt-content :document="page" />
  </article>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const page = await this.$content('articles').sortBy('desc').limit(5).fetch()

    return {
      page
    }
  }
}
</script>

結論

因為現在 JAMSTACK 越來越盛行了,以前端製作一個外皮然後搭上內容就是一個網站,而@nuxtjs/content 這個 module 提供了一個幫你把 markdown file 轉換成 API 的接口,讓前端靜態網站blog 系統的製作越來越省心,另外這個 github repo 才剛創一個月,目前只能說是一個概念的展示,或是說 mvp 吧,很多應該要可以 custom 的地方,都不見得有提供 config 給你修改,所以就目前來說想用到完全客製化的話,可能還需要再等等。

Copyright © 2020-2023 | Design by Waiting7777