頁面配置
在 Nextra 中，網站和頁面結構可以通過位於同一目錄下的 _meta.js 檔案進行配置。在文件主題中，還有一些額外的選項可用於進一步自定義。
這些配置會影響主題的整體佈局，尤其是導覽列和側邊欄。
頁面
在側邊欄中顯示的頁面標題和順序應在 _meta.js 檔案中以鍵值對的形式進行配置。例如，如果您有以下檔案結構
- _meta.js
- about.mdx
- contact.mdx
- index.mdx
您可以通過 _meta.js 檔案定義頁面在側邊欄中的顯示方式
export default {
index: 'My Homepage',
contact: 'Contact Us',
about: 'About Us'
}如果任何路由未列在 _meta.js 檔案中，它們將被附加到側邊欄的末尾並按字母順序排序，標題將根據檔名使用 Title 格式化。
資料夾
資料夾可以與頁面相同的方式進行配置。例如
- _meta.js
- apple.mdx
- banana.mdx
- _meta.js
- about.mdx
- contact.mdx
- index.mdx
頂層 _meta.js 檔案包含頂層頁面和資料夾的後設資料
export default {
index: 'My Homepage',
contact: 'Contact Us',
fruits: 'Delicious Fruits',
about: 'About Us'
}巢狀的 _meta.js 檔案包含同一資料夾中頁面的後設資料
export default {
apple: 'Apple',
banana: 'Banana'
}這樣，頁面資訊就會按目錄分組在一起。您可以移動目錄而無需更改 _meta.js 檔案。
包含索引頁的資料夾
如果我想擁有一個帶有索引頁的資料夾怎麼辦？我們可以在與資料夾相同的名稱和目錄中添加一個 MDX 頁面。假設我們想在上面的示例中添加 /fruits 路由，我們可以在 pages 中創建一個 fruits.mdx 檔案
- _meta.js
- apple.mdx
- banana.mdx
- _meta.js
- about.mdx
- contact.mdx
- fruits.mdx
- index.mdx
然後 Nextra 就知道 _meta.js 中的 fruits 鍵定義了一個帶有索引頁的資料夾。如果您在側邊欄中點擊該資料夾，它將打開資料夾並同時顯示 fruits.mdx 頁面。
外部連結
您可以通過在 _meta.js 中添加帶有 href 的項目，將外部連結添加到側邊欄
export default {
index: 'My Homepage',
contact: 'Contact Us',
fruits: 'Delicious Fruits',
about: 'About Us',
github_link: {
title: 'Nextra',
href: 'https://github.com/shuding/nextra'
}
}要始終在新分頁中打開連結，請啟用 "newWindow": true 選項
export default {
index: 'My Homepage',
contact: 'Contact Us',
fruits: 'Delicious Fruits',
about: 'About Us',
github_link: {
title: 'Nextra',
href: 'https://github.com/shuding/nextra',
newWindow: true
}
}您也可以使用此選項連結到相對內部連結。
隱藏路由
預設情況下，檔案系統中的所有 MDX 路由都將顯示在側邊欄上。但您可以使用 "display": "hidden" 配置隱藏特定頁面或資料夾
export default {
index: 'My Homepage',
contact: {
display: 'hidden'
},
about: 'About Us'
}仍然可以通過 /contact URL 訪問該頁面，但它不會顯示在側邊欄中。
導覽列項目
子文件
通過將頂層頁面或資料夾定義為 "type": "page"，它將在導覽列上顯示為特殊頁面，而不是側邊欄。借助此功能，您可以擁有多個「子文件」，以及始終可見的特殊頁面或連結，例如「聯絡我們」。
例如，您的專案中可以有 2 個文件資料夾 frameworks 和 fruits
- react.mdx
- svelte.mdx
- vue.mdx
- apple.mdx
- banana.mdx
- _meta.js
- about.mdx
- index.mdx
在您的頂層 _meta.js 檔案中，您可以將所有內容設定為頁面，而不是普通的側邊欄項目
export default {
index: {
title: 'Home',
type: 'page'
},
frameworks: {
title: 'Frameworks',
type: 'page'
},
fruits: {
title: 'Fruits',
type: 'page'
},
about: {
title: 'About',
type: 'page'
}
}它看起來像這樣
您也可以使用 "display": "hidden" 選項從導覽列中隱藏連結，例如 首頁。
選單
您也可以使用 "type": "menu" 和 "items" 選項將選單添加到導覽列
export default {
company: {
title: 'Company',
type: 'menu',
items: {
about: {
title: 'About',
href: '/about'
},
contact: {
title: 'Contact Us',
href: 'mailto:hi@example.com'
}
}
}
}連結
與外部連結選項相同，您也可以在導覽列中使用外部連結
export default {
index: {
title: 'Home',
type: 'page'
},
about: {
title: 'About',
type: 'page'
},
contact: {
title: 'Contact Us',
type: 'page',
href: 'https://example.com/contact',
newWindow: true
}
}備援
在上面的子文件示例中，我們必須為每個頁面定義 "type": "page" 選項。為了更簡便，您可以使用 "*" 鍵為此資料夾中的所有項目定義備援配置
export default {
'*': {
type: 'page'
},
index: 'Home',
frameworks: 'Frameworks',
fruits: 'Fruits',
about: 'About'
}它們是等效的，其中所有項目都設定了 "type": "page"。
分隔線
您可以使用 "type": "separator" 的「佔位符」項目在側邊欄中的項目之間創建分隔線
export default {
index: 'My Homepage',
'---': {
type: 'separator'
},
contact: 'Contact Us'
}使用 JSX 元素更改側邊欄中標題和分隔線的外觀。
進階
主題組件
您可以使用 "theme" 選項為每個頁面配置主題。例如，您可以為特定頁面停用或啟用特定組件
export default {
index: {
title: 'Home',
theme: {
breadcrumb: false,
footer: true,
sidebar: false,
toc: true,
pagination: false
}
}
}如果設定為資料夾，此選項將由所有子頁面繼承。
佈局
預設情況下，每個頁面的主題配置中都有 "layout": "default"，這是預設行為。
原始佈局
預設情況下，Nextra 使用主題組件在內容容器內渲染 MDX 內容（例如 h1、h2、h3 等）。您可以使用 "raw" 佈局讓 Nextra 不向內容注入任何樣式
export default {
index: {
title: 'Home',
theme: {
layout: 'raw'
}
}
}完整佈局
您可能希望以完整的容器寬度和高度渲染某些頁面，但保留所有其他樣式。您可以使用 "full" 佈局來做到這一點
export default {
index: {
title: 'Home',
theme: {
layout: 'full'
}
}
}排版
"typesetting" 選項控制排版細節，例如字體功能、標題樣式和組件，例如 li 和 code。文件主題中有 "default" 和 "article" 兩種排版樣式。
預設樣式適用於大多數情況，例如文件，但您可以使用 "article" 排版樣式使其看起來像一篇精美的文章頁面
export default {
about: {
title: 'About Us',
theme: {
typesetting: 'article'
}
}
}