1+ <!DOCTYPE html>
2+ < html lang ="en-US " dir ="ltr ">
3+ < head >
4+ < meta charset ="utf-8 ">
5+ < meta name ="viewport " content ="width=device-width,initial-scale=1 ">
6+ < title > Runtime API Examples | 2110479</ title >
7+ < meta name ="description " content ="2110479 Computer Graphics ">
8+ < meta name ="generator " content ="VitePress v1.6.4 ">
9+ < link rel ="preload stylesheet " href ="/assets/style.C-Hj3odH.css " as ="style ">
10+ < link rel ="preload stylesheet " href ="/vp-icons.css " as ="style ">
11+
12+ < script type ="module " src ="/assets/app.BTiP7h1q.js "> </ script >
13+ < link rel ="preload " href ="/assets/inter-roman-latin.Di8DUHzh.woff2 " as ="font " type ="font/woff2 " crossorigin ="">
14+ < link rel ="modulepreload " href ="/assets/chunks/theme.DeifXrMt.js ">
15+ < link rel ="modulepreload " href ="/assets/chunks/framework.Cd-3tpCq.js ">
16+ < link rel ="modulepreload " href ="/assets/api-examples.md.CYS_VNgb.lean.js ">
17+ < script id ="check-dark-mode "> ( ( ) => { const e = localStorage . getItem ( "vitepress-theme-appearance" ) || "auto" , a = window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ; ( ! e || e === "auto" ?a :e === "dark" ) && document . documentElement . classList . add ( "dark" ) } ) ( ) ; </ script >
18+ < script id ="check-mac-os "> document . documentElement . classList . toggle ( "mac" , / M a c | i P h o n e | i P o d | i P a d / i. test ( navigator . platform ) ) ; </ script >
19+ </ head >
20+ < body >
21+ < div id ="app "> < div class ="Layout " data-v-af5c9320 > <!--[--> <!--]--> <!--[--> < span tabindex ="-1 " data-v-a7a50a60 > </ span > < a href ="#VPContent " class ="VPSkipLink visually-hidden " data-v-a7a50a60 > Skip to content</ a > <!--]--> <!----> < header class ="VPNav " data-v-af5c9320 data-v-9d5779c0 > < div class ="VPNavBar " data-v-9d5779c0 data-v-fe247393 > < div class ="wrapper " data-v-fe247393 > < div class ="container " data-v-fe247393 > < div class ="title " data-v-fe247393 > < div class ="VPNavBarTitle has-sidebar " data-v-fe247393 data-v-86466cc3 > < a class ="title " href ="/ " data-v-86466cc3 > <!--[--> <!--]--> <!----> < span data-v-86466cc3 > 2110479</ span > <!--[--> <!--]--> </ a > </ div > </ div > < div class ="content " data-v-fe247393 > < div class ="content-body " data-v-fe247393 > <!--[--> <!--]--> < div class ="VPNavBarSearch search " data-v-fe247393 > <!----> </ div > < nav aria-labelledby ="main-nav-aria-label " class ="VPNavBarMenu menu " data-v-fe247393 data-v-aa482bc8 > < span id ="main-nav-aria-label " class ="visually-hidden " data-v-aa482bc8 > Main Navigation </ span > <!--[--> <!--[--> < a class ="VPLink link VPNavBarMenuLink " href ="/ " tabindex ="0 " data-v-aa482bc8 data-v-75eb38b4 > <!--[--> < span data-v-75eb38b4 > Home</ span > <!--]--> </ a > <!--]--> <!--[--> < a class ="VPLink link VPNavBarMenuLink " href ="/markdown-examples.html " tabindex ="0 " data-v-aa482bc8 data-v-75eb38b4 > <!--[--> < span data-v-75eb38b4 > Examples</ span > <!--]--> </ a > <!--]--> <!--]--> </ nav > <!----> < div class ="VPNavBarAppearance appearance " data-v-fe247393 data-v-b5574a13 > < button class ="VPSwitch VPSwitchAppearance " type ="button " role ="switch " title aria-checked ="false " data-v-b5574a13 data-v-2dd2614a data-v-36095609 > < span class ="check " data-v-36095609 > < span class ="icon " data-v-36095609 > <!--[--> < span class ="vpi-sun sun " data-v-2dd2614a > </ span > < span class ="vpi-moon moon " data-v-2dd2614a > </ span > <!--]--> </ span > </ span > </ button > </ div > < div class ="VPSocialLinks VPNavBarSocialLinks social-links " data-v-fe247393 data-v-07f32deb data-v-68510a59 > <!--[--> < a class ="VPSocialLink no-icon " href ="https://github.com/vuejs/vitepress " aria-label ="github " target ="_blank " rel ="noopener " data-v-68510a59 data-v-7593d7b8 > < span class ="vpi-social-github "> </ span > </ a > <!--]--> </ div > < div class ="VPFlyout VPNavBarExtra extra " data-v-fe247393 data-v-653e1262 data-v-4b749a66 > < button type ="button " class ="button " aria-haspopup ="true " aria-expanded ="false " aria-label ="extra navigation " data-v-4b749a66 > < span class ="vpi-more-horizontal icon " data-v-4b749a66 > </ span > </ button > < div class ="menu " data-v-4b749a66 > < div class ="VPMenu " data-v-4b749a66 data-v-0817d99c > <!----> <!--[--> <!--[--> <!----> < div class ="group " data-v-653e1262 > < div class ="item appearance " data-v-653e1262 > < p class ="label " data-v-653e1262 > Appearance</ p > < div class ="appearance-action " data-v-653e1262 > < button class ="VPSwitch VPSwitchAppearance " type ="button " role ="switch " title aria-checked ="false " data-v-653e1262 data-v-2dd2614a data-v-36095609 > < span class ="check " data-v-36095609 > < span class ="icon " data-v-36095609 > <!--[--> < span class ="vpi-sun sun " data-v-2dd2614a > </ span > < span class ="vpi-moon moon " data-v-2dd2614a > </ span > <!--]--> </ span > </ span > </ button > </ div > </ div > </ div > < div class ="group " data-v-653e1262 > < div class ="item social-links " data-v-653e1262 > < div class ="VPSocialLinks social-links-list " data-v-653e1262 data-v-68510a59 > <!--[--> < a class ="VPSocialLink no-icon " href ="https://github.com/vuejs/vitepress " aria-label ="github " target ="_blank " rel ="noopener " data-v-68510a59 data-v-7593d7b8 > < span class ="vpi-social-github "> </ span > </ a > <!--]--> </ div > </ div > </ div > <!--]--> <!--]--> </ div > </ div > </ div > <!--[--> <!--]--> < button type ="button " class ="VPNavBarHamburger hamburger " aria-label ="mobile navigation " aria-expanded ="false " aria-controls ="VPNavScreen " data-v-fe247393 data-v-64e58c20 > < span class ="container " data-v-64e58c20 > < span class ="top " data-v-64e58c20 > </ span > < span class ="middle " data-v-64e58c20 > </ span > < span class ="bottom " data-v-64e58c20 > </ span > </ span > </ button > </ div > </ div > </ div > </ div > < div class ="divider " data-v-fe247393 > < div class ="divider-line " data-v-fe247393 > </ div > </ div > </ div > <!----> </ header > < div class ="VPLocalNav has-sidebar empty " data-v-af5c9320 data-v-030148e4 > < div class ="container " data-v-030148e4 > < button class ="menu " aria-expanded ="false " aria-controls ="VPSidebarNav " data-v-030148e4 > < span class ="vpi-align-left menu-icon " data-v-030148e4 > </ span > < span class ="menu-text " data-v-030148e4 > Menu</ span > </ button > < div class ="VPLocalNavOutlineDropdown " style ="--vp-vh:0px; " data-v-030148e4 data-v-c639d53e > < button data-v-c639d53e > Return to top</ button > <!----> </ div > </ div > </ div > < aside class ="VPSidebar " data-v-af5c9320 data-v-5faad4ea > < div class ="curtain " data-v-5faad4ea > </ div > < nav class ="nav " id ="VPSidebarNav " aria-labelledby ="sidebar-aria-label " tabindex ="-1 " data-v-5faad4ea > < span class ="visually-hidden " id ="sidebar-aria-label " data-v-5faad4ea > Sidebar Navigation </ span > <!--[--> <!--]--> <!--[--> < div class ="no-transition group " data-v-825d898e > < section class ="VPSidebarItem level-0 has-active " data-v-825d898e data-v-54a642d5 > < div class ="item " role ="button " tabindex ="0 " data-v-54a642d5 > < div class ="indicator " data-v-54a642d5 > </ div > < h2 class ="text " data-v-54a642d5 > Examples</ h2 > <!----> </ div > < div class ="items " data-v-54a642d5 > <!--[--> < div class ="VPSidebarItem level-1 is-link " data-v-54a642d5 data-v-54a642d5 > < div class ="item " data-v-54a642d5 > < div class ="indicator " data-v-54a642d5 > </ div > < a class ="VPLink link link " href ="/markdown-examples.html " data-v-54a642d5 > <!--[--> < p class ="text " data-v-54a642d5 > Markdown Examples</ p > <!--]--> </ a > <!----> </ div > <!----> </ div > < div class ="VPSidebarItem level-1 is-link " data-v-54a642d5 data-v-54a642d5 > < div class ="item " data-v-54a642d5 > < div class ="indicator " data-v-54a642d5 > </ div > < a class ="VPLink link link " href ="/api-examples.html " data-v-54a642d5 > <!--[--> < p class ="text " data-v-54a642d5 > Runtime API Examples</ p > <!--]--> </ a > <!----> </ div > <!----> </ div > <!--]--> </ div > </ section > </ div > <!--]--> <!--[--> <!--]--> </ nav > </ aside > < div class ="VPContent has-sidebar " id ="VPContent " data-v-af5c9320 data-v-fef4a0ad > < div class ="VPDoc has-sidebar has-aside " data-v-fef4a0ad data-v-0ef1a231 > <!--[--> <!--]--> < div class ="container " data-v-0ef1a231 > < div class ="aside " data-v-0ef1a231 > < div class ="aside-curtain " data-v-0ef1a231 > </ div > < div class ="aside-container " data-v-0ef1a231 > < div class ="aside-content " data-v-0ef1a231 > < div class ="VPDocAside " data-v-0ef1a231 data-v-c2ffdd75 > <!--[--> <!--]--> <!--[--> <!--]--> < nav aria-labelledby ="doc-outline-aria-label " class ="VPDocAsideOutline " data-v-c2ffdd75 data-v-032dfa25 > < div class ="content " data-v-032dfa25 > < div class ="outline-marker " data-v-032dfa25 > </ div > < div aria-level ="2 " class ="outline-title " id ="doc-outline-aria-label " role ="heading " data-v-032dfa25 > On this page</ div > < ul class ="VPDocOutlineItem root " data-v-032dfa25 data-v-31634461 > <!--[--> <!--]--> </ ul > </ div > </ nav > <!--[--> <!--]--> < div class ="spacer " data-v-c2ffdd75 > </ div > <!--[--> <!--]--> <!----> <!--[--> <!--]--> <!--[--> <!--]--> </ div > </ div > </ div > </ div > < div class ="content " data-v-0ef1a231 > < div class ="content-container " data-v-0ef1a231 > <!--[--> <!--]--> < main class ="main " data-v-0ef1a231 > < div style ="position:relative; " class ="vp-doc _api-examples " data-v-0ef1a231 > < div > < h1 id ="runtime-api-examples " tabindex ="-1 "> Runtime API Examples < a class ="header-anchor " href ="#runtime-api-examples " aria-label ="Permalink to "Runtime API Examples" "> </ a > </ h1 > < p > This page demonstrates usage of some of the runtime APIs provided by VitePress.</ p > < p > The main < code > useData()</ code > API can be used to access site, theme, and page data for the current page. It works in both < code > .md</ code > and < code > .vue</ code > files:</ p > < div class ="language-md vp-adaptive-theme "> < button title ="Copy Code " class ="copy "> </ button > < span class ="lang "> md</ span > < pre class ="shiki shiki-themes github-light github-dark vp-code " tabindex ="0 "> < code > < span class ="line "> < span style ="--shiki-light:#24292E;--shiki-dark:#E1E4E8; "> <script setup></ span > </ span >
22+ < span class ="line "> < span style ="--shiki-light:#24292E;--shiki-dark:#E1E4E8; "> import { useData } from 'vitepress'</ span > </ span >
23+ < span class ="line "> </ span >
24+ < span class ="line "> < span style ="--shiki-light:#24292E;--shiki-dark:#E1E4E8; "> const { theme, page, frontmatter } = useData()</ span > </ span >
25+ < span class ="line "> < span style ="--shiki-light:#24292E;--shiki-dark:#E1E4E8; "> </script></ span > </ span >
26+ < span class ="line "> </ span >
27+ < span class ="line "> < span style ="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold; "> ## Results</ span > </ span >
28+ < span class ="line "> </ span >
29+ < span class ="line "> < span style ="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold; "> ### Theme Data</ span > </ span >
30+ < span class ="line "> < span style ="--shiki-light:#24292E;--shiki-dark:#E1E4E8; "> <pre>{{ theme }}</pre></ span > </ span >
31+ < span class ="line "> </ span >
32+ < span class ="line "> < span style ="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold; "> ### Page Data</ span > </ span >
33+ < span class ="line "> < span style ="--shiki-light:#24292E;--shiki-dark:#E1E4E8; "> <pre>{{ page }}</pre></ span > </ span >
34+ < span class ="line "> </ span >
35+ < span class ="line "> < span style ="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold; "> ### Page Frontmatter</ span > </ span >
36+ < span class ="line "> < span style ="--shiki-light:#24292E;--shiki-dark:#E1E4E8; "> <pre>{{ frontmatter }}</pre></ span > </ span > </ code > </ pre > </ div > < h2 id ="results " tabindex ="-1 "> Results < a class ="header-anchor " href ="#results " aria-label ="Permalink to "Results" "> </ a > </ h2 > < h3 id ="theme-data " tabindex ="-1 "> Theme Data < a class ="header-anchor " href ="#theme-data " aria-label ="Permalink to "Theme Data" "> </ a > </ h3 > < pre > {
37+ "nav": [
38+ {
39+ "text": "Home",
40+ "link": "/"
41+ },
42+ {
43+ "text": "Examples",
44+ "link": "/markdown-examples"
45+ }
46+ ],
47+ "sidebar": [
48+ {
49+ "text": "Examples",
50+ "items": [
51+ {
52+ "text": "Markdown Examples",
53+ "link": "/markdown-examples"
54+ },
55+ {
56+ "text": "Runtime API Examples",
57+ "link": "/api-examples"
58+ }
59+ ]
60+ }
61+ ],
62+ "socialLinks": [
63+ {
64+ "icon": "github",
65+ "link": "https://github.com/vuejs/vitepress"
66+ }
67+ ]
68+ }</ pre > < h3 id ="page-data " tabindex ="-1 "> Page Data < a class ="header-anchor " href ="#page-data " aria-label ="Permalink to "Page Data" "> </ a > </ h3 > < pre > {
69+ "title": "Runtime API Examples",
70+ "description": "",
71+ "frontmatter": {
72+ "outline": "deep"
73+ },
74+ "headers": [],
75+ "relativePath": "api-examples.md",
76+ "filePath": "api-examples.md"
77+ }</ pre > < h3 id ="page-frontmatter " tabindex ="-1 "> Page Frontmatter < a class ="header-anchor " href ="#page-frontmatter " aria-label ="Permalink to "Page Frontmatter" "> </ a > </ h3 > < pre > {
78+ "outline": "deep"
79+ }</ pre > < h2 id ="more " tabindex ="-1 "> More < a class ="header-anchor " href ="#more " aria-label ="Permalink to "More" "> </ a > </ h2 > < p > Check out the documentation for the < a href ="https://vitepress.dev/reference/runtime-api#usedata " target ="_blank " rel ="noreferrer "> full list of runtime APIs</ a > .</ p > </ div > </ div > </ main > < footer class ="VPDocFooter " data-v-0ef1a231 data-v-f41c484b > <!--[--> <!--]--> <!----> < nav class ="prev-next " aria-labelledby ="doc-footer-aria-label " data-v-f41c484b > < span class ="visually-hidden " id ="doc-footer-aria-label " data-v-f41c484b > Pager</ span > < div class ="pager " data-v-f41c484b > < a class ="VPLink link pager-link prev " href ="/markdown-examples.html " data-v-f41c484b > <!--[--> < span class ="desc " data-v-f41c484b > Previous page</ span > < span class ="title " data-v-f41c484b > Markdown Examples</ span > <!--]--> </ a > </ div > < div class ="pager " data-v-f41c484b > <!----> </ div > </ nav > </ footer > <!--[--> <!--]--> </ div > </ div > </ div > <!--[--> <!--]--> </ div > </ div > <!----> <!--[--> <!--]--> </ div > </ div >
80+ < script > window . __VP_HASH_MAP__ = JSON . parse ( "{\"api-examples.md\":\"CYS_VNgb\",\"index.md\":\"CefMHQvi\",\"markdown-examples.md\":\"DCPkfmmc\"}" ) ; window . __VP_SITE_DATA__ = JSON . parse ( "{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"2110479\",\"description\":\"2110479 Computer Graphics\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Examples\",\"link\":\"/markdown-examples\"}],\"sidebar\":[{\"text\":\"Examples\",\"items\":[{\"text\":\"Markdown Examples\",\"link\":\"/markdown-examples\"},{\"text\":\"Runtime API Examples\",\"link\":\"/api-examples\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/vuejs/vitepress\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}" ) ; </ script >
81+
82+ </ body >
83+ </ html >
0 commit comments