Runtime API 範例

此頁面示範了 VitePress 提供的一些 Runtime API 的用法。

主要的 useData() API 可用於存取目前頁面的網站、主題和頁面資料。它同時適用於 .md 和 .vue 檔案：

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## 結果

### 主題資料
<pre>{{ theme }}</pre>

### 頁面資料
<pre>{{ page }}</pre>

### 頁面 Frontmatter
<pre>{{ frontmatter }}</pre>

結果

主題資料

{
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "Examples",
      "link": "/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown 使用範例",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API 使用範例",
          "link": "/api-examples"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/aisp-fhsh/vitepress-templating"
    },
    {
      "icon": {
        "svg": "<img src='New%20AISP%20Logo%20Icon.svg' alt='AISP Logo' width='80%' height='80%' />"
      },
      "link": "https://security-program.fhsh.taipei"
    }
  ]
}

頁面資料

{
  "title": "Runtime API 範例",
  "description": "",
  "frontmatter": {
    "outline": "deep",
    "sidebar": [
      {
        "text": "EEEEE",
        "items": [
          {
            "text": "測試一",
            "link": "/nav-config/"
          }
        ]
      }
    ]
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md"
}

頁面 Frontmatter

{
  "outline": "deep",
  "sidebar": [
    {
      "text": "EEEEE",
      "items": [
        {
          "text": "測試一",
          "link": "/nav-config/"
        }
      ]
    }
  ]
}

更多

請查看完整 Runtime API 列表的說明文件。