上一篇我們介紹了為了顯示NuxtContent
的文章內容,我們需將路由設定捕獲所有路由的catch-all route
,讓我們能用文章名字當檔名,自動生成路由。
所以,接著我們需將NuxtContent嵌到我們的Page上。
在app/pages/blog/[...slug].vue
裡面我們將template
嵌入ContentDoc
來放我們的文章。
<template>
<main>
<article>
<ContentDoc />
</article>
</main>
</template>
接著我們到專案主目錄底下新增放我們文章的資料夾路徑content
,和我們的第一篇文章first-post.md
。
(注意不是app
目錄底下了)
my-blog/
├── app/
│ └── ...
├── content/
│ └── blog/
│ │ └── first-post.md
├── ...
接著我們打開我們的第一篇文章寫入
# Hello NuxtContent
執行應用程式後,去到/blog/first-post
,就會看到我們的文章了。
我們的部落格框架就有了!
以後寫文章就可以自己用資料夾分類,並用markdown
來寫文章,讓Nuxt
幫我們自動生成路由顯示了!