跳至主要內容
版本：3.5.2

📦 plugin-content-pages

Docusaurus 的預設頁面外掛。此外掛中的經典佈景主題附帶預設組態。此外掛提供 建立頁面 功能。

安裝​

npm install --save @docusaurus/plugin-content-pages
提示

如果您使用預設值 @docusaurus/preset-classic，則不需要將此外掛安裝為依賴項。

您可以透過 預設值選項 來組態此外掛。

組態​

可接受的欄位

名稱類型預設值說明
path字串'src/pages'相對於網站目錄在檔案系統上放置資料的路徑。此目錄中的元件將自動轉換為頁面。
editUrl字串 | EditUrlFn未定義僅適用於 Markdown 頁面。編輯網站的基本網址。最終網址是透過 editUrl + relativePostPath 計算而得。使用函數可針對每個檔案進行更細緻的控制。完全略過此變數將禁用編輯連結。
editLocalizedFiles布林值false僅適用於 Markdown 頁面。編輯網址將指向在地化檔案，而不是原始的非在地化檔案。在 editUrl 為函數時會忽略此設定。
routeBasePath字串'/'網站的頁面部分的網址路由。請勿包含尾斜線。
include字串陣列['**/*.{js,jsx,ts,tsx,md,mdx}']相符的檔案將包含並處理。
exclude字串陣列請參閱範例設定將不為相符的檔案建立路由。
mdxPageComponent字串'@theme/MDXPage'每個 MDX 頁面使用的元件。
remarkPlugins[]任意陣列傳遞至 MDX 的 Remark 外掛程式。
rehypePlugins[]任意陣列傳遞至 MDX 的 Rehype 外掛程式。
rehypePlugins任意陣列[]Recma 外掛程式傳遞至 MDX。
beforeDefaultRemarkPlugins任意陣列[]在傳遞至 MDX 的預設 Docusaurus Remark 外掛程式前，自訂的 Remark 外掛程式。
beforeDefaultRehypePlugins任意陣列[]在傳遞至 MDX 的預設 Docusaurus Rehype 外掛程式前，自訂的 Rehype 外掛程式。
showLastUpdateAuthor布林值false僅適用於 Markdown 頁面。是否顯示最後更新頁面的作者。
showLastUpdateTime布林值false僅適用於 Markdown 頁面。是否顯示頁面文章最後更新的日期。這需要在建置期間存取 git 歷史記錄，因此對於淺層複製（CI 系統的常見預設設定）將無法正確運作。使用 GitHub actions/checkout 應使用 fetch-depth: 0。

類型​

EditUrlFn​

type EditUrlFunction = (params: {
  blogDirPath: string;
  blogPath: string;
  permalink: string;
  locale: string;
}) => string | undefined;

範例設定​

您可透過預設選項或外掛程式選項設定此外掛程式。

提示

大多數 Docusaurus 使用者會透過預設選項設定此外掛程式。

如果您使用預設，請透過預設選項設定此外掛程式

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        pages: {
          path: 'src/pages',
          routeBasePath: '',
          include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
          exclude: [
            '**/_*.{js,jsx,ts,tsx,md,mdx}',
            '**/_*/**',
            '**/*.test.{js,jsx,ts,tsx}',
            '**/__tests__/**',
          ],
          mdxPageComponent: '@theme/MDXPage',
          remarkPlugins: [require('./my-remark-plugin')],
          rehypePlugins: [],
          beforeDefaultRemarkPlugins: [],
          beforeDefaultRehypePlugins: [],
        },
      },
    ],
  ],
};

Markdown 前置資訊​

Markdown 頁面可以使用以下 Markdown 前置資訊，附註資料欄位，在兩側用一行 --- 括起來。

可接受的欄位

名稱類型預設值說明
標題字串Markdown 標題部落格文章的標題。
描述字串Markdown 內容的第一行您頁面的說明，會成為 <meta name="description" content="..."/> 和 <meta property="og:description" content="..."/>，放置在 <head> 中，由搜尋引擎使用。
關鍵字字串陣列未定義關鍵字標籤，會變成 <meta name="keywords" content="keyword1,keyword2,..."/>，放在 <head> 中，由搜尋引擎使用。
圖片字串未定義封面或縮圖圖片作為 <meta property="og:image" content="..."/> 會放在 <head> 中，增強社群媒體和訊息平台的連結預覽效果。
包裝器類別名稱字串類別名稱新增到包裝器元素，以允許定位特定頁面內容。
hide_table_of_contents布林值false是否要隱藏右方的目錄內容。
草稿布林值false草稿頁面僅在開發期間可用。
未列出布林值false未列出頁面在開發和製作期間都可用。它們會在製作期間被「隱藏」，不建立索引、排除在網站地圖之外，而且只有有直接連結的使用者才能存取。

範例

---
title: Markdown Page
description: Markdown page SEO description
wrapperClassName: markdown-page
hide_table_of_contents: false
draft: true
---

Markdown page content

多國語言​

請先閱讀 多國語言簡介。

翻譯檔案位置​

  • 基本路徑：website/i18n/[locale]/docusaurus-plugin-content-pages
  • 多執行個體路徑：website/i18n/[locale]/docusaurus-plugin-content-pages-[pluginId]
  • JSON 檔案：利用 docusaurus write-translations 萃取
  • Markdown 檔案：website/i18n/[locale]/docusaurus-plugin-content-pages

範例檔案系統結構​

website/i18n/[locale]/docusaurus-plugin-content-pages
│
│ # translations for website/src/pages
├── first-markdown-page.md
└── second-markdown-page.md