iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0

上一篇我們介紹了為了顯示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,就會看到我們的文章了。
https://ithelp.ithome.com.tw/upload/images/20240928/20130413vi7RQDbNyT.png

我們的部落格框架就有了!
以後寫文章就可以自己用資料夾分類,並用markdown來寫文章,讓Nuxt幫我們自動生成路由顯示了!


上一篇
[Day13] 捕獲全部路由 (Catch-all Route)
系列文
[Nuxt]做中學,用Nuxt打造專屬自己的部落格14
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言