今天來補充前面幾天沒提到的一些用法

檔案名稱的運用

加上順序編號

前面介紹的 navigation 可以用來生成導覽列，但是沒辦法控制順序，可以透過編號命名的方式來調整順序，只要在檔案名稱前方加上 數字. 即可，以下是官方提供的目錄結構範例：

content/
  1.frameworks/
    1.vue.md
    2.nuxt.md
  2.examples/
    1.vercel.md
    2.netlify.md
    3.heroku.md
    index.md

忽略

如果檔案或資料夾要被忽略，在名稱前方額外加上一個 . 就可以了，範例： .1.vue.md。

局部檔案(partial)

檔案或資料夾的名稱前方加上_後，就不會被加入 navigation 中，但是這個「部分」還是能夠被存取使用，範例：_2.nuxt.md。

MDC

MDC(https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc)是 VScode 的延伸套件，全名是 Markdown Components，專門提供 Nuxt 中 Markdown 的高亮辨識。

Code Highlight

程式類型 Blog 經常會用到程式碼片段，Content 中採用的是 Shiki提供的樣式，修改程式碼區塊樣式的方式是在 nuxt.config 中調整：

export default defineNuxtConfig({
  content: {
    highlight: {
      // 以下是單一樣式的設定方式
      theme: 'github-light'
      // 以下是多重樣式的設定方式，建議要加上預設值
      theme: {
        // Default theme (same as single string)
        default: 'github-light',
        // Theme used if `html.dark`
        dark: 'github-dark',
        // Theme used if `html.sepia`
        sepia: 'monokai'
      }
    }
  }
})

學習資源分享

如果想要更完整的教學，推薦以下這個影片
Blog & Store Website made w/ Nuxt 3 + Content v2 + TailwindCSS，同時他也有提供 Demo Code 和 Demo Page，是相當不錯的資源。

這個教學中使用了熱門的 TailwindCSS，最後的幾天會分享如何使用 UnoCSS，設定起來更簡單、靈活，而且對習慣 TailwindCSS 的使用者來說可以非常快速上手。