index.html

<!doctype html>
<html lang="en-US" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="generator" content="VuePress 2.0.0-rc.23" />
    <meta name="theme" content="VuePress Theme Hope 2.0.0-rc.92" />
    <style>
      :root {
        --vp-c-bg: #fff;
      }

      [data-theme="dark"] {
        --vp-c-bg: #1b1b1f;
      }

      html,
      body {
        background: var(--vp-c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
      const systemDarkMode =
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches;

      if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    </script>
    <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"Project home","description":"This is an example of a project homepage. You can place your main content here. To use this layout, you need to set home: true in the page front matter. For related descriptions..."}</script><meta property="og:url" content="https://vuepress-theme-hope.github.io/docs-demo/"><meta property="og:site_name" content="Docs Demo"><meta property="og:title" content="Project home"><meta property="og:description" content="This is an example of a project homepage. You can place your main content here. To use this layout, you need to set home: true in the page front matter. For related descriptions..."><meta property="og:type" content="website"><meta property="og:locale" content="en-US"><meta property="og:locale:alternate" content="zh-CN"><meta property="og:updated_time" content="2025-06-10T15:45:09.000Z"><meta property="article:modified_time" content="2025-06-10T15:45:09.000Z"><link rel="canonical" href="https://theme-hope-docs-demo.vuejs.press/"><link rel="alternate" hreflang="zh-cn" href="https://vuepress-theme-hope.github.io/docs-demo/zh/"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#46bd87"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/docs-demo/favicon.ico"><link rel="manifest" href="/docs-demo/manifest.webmanifest" crossorigin="use-credentials"><link rel="icon" href="/docs-demo/assets/icon/chrome-mask-512.png" type="image/png" sizes="512x512"><link rel="icon" href="/docs-demo/assets/icon/chrome-mask-192.png" type="image/png" sizes="192x192"><link rel="icon" href="/docs-demo/assets/icon/chrome-512.png" type="image/png" sizes="512x512"><link rel="icon" href="/docs-demo/assets/icon/chrome-192.png" type="image/png" sizes="192x192"><link rel="apple-touch-icon" href="/docs-demo/assets/icon/apple-icon-152.png"><title>Project home | Docs Demo</title><meta name="description" content="This is an example of a project homepage. You can place your main content here. To use this layout, you need to set home: true in the page front matter. For related descriptions...">
    <link rel="preload" href="/docs-demo/assets/style-BNupRojP.css" as="style"><link rel="stylesheet" href="/docs-demo/assets/style-BNupRojP.css">
    <link rel="modulepreload" href="/docs-demo/assets/app-zUPB0ujD.js"><link rel="modulepreload" href="/docs-demo/assets/index.html-BvkFRd1X.js"><link rel="modulepreload" href="/docs-demo/assets/plugin-vue_export-helper-DlAUqK2U.js">
    
  </head>
  <body>
    <div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="vp-skip-link sr-only">Skip to main content</a><!--]--><div class="theme-container no-sidebar external-link-icon" vp-container><!--[--><header id="navbar" class="vp-navbar" vp-navbar><div class="vp-navbar-start"><button type="button" class="vp-toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!--[--><a class="route-link vp-brand" href="/docs-demo/" aria-label="Take me home"><img class="vp-nav-logo" src="https://theme-hope-assets.vuejs.press/logo.svg" alt><!----><span class="vp-site-name hide-in-pad">Docs Demo</span></a><!--]--></div><div class="vp-navbar-center"><!--[--><nav class="vp-nav-links"><div class="vp-nav-item hide-in-mobile"><a class="route-link route-link-active auto-link" href="/docs-demo/" aria-label="Project home"><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:house" sizing="height" height="1em"></iconify-icon><!--]-->Project home<!----></a></div><div class="vp-nav-item hide-in-mobile"><a class="route-link auto-link" href="/docs-demo/portfolio.html" aria-label="Portfolio Home"><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:house" sizing="height" height="1em"></iconify-icon><!--]-->Portfolio Home<!----></a></div><div class="vp-nav-item hide-in-mobile"><a class="route-link auto-link" href="/docs-demo/demo/" aria-label="Features demo"><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:laptop-code" sizing="height" height="1em"></iconify-icon><!--]-->Features demo<!----></a></div><div class="vp-nav-item hide-in-mobile"><div class="vp-dropdown-wrapper"><button type="button" class="vp-dropdown-title" aria-label="Guide"><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:lightbulb" sizing="height" height="1em"></iconify-icon>Guide<!--]--><span class="arrow"></span><ul class="vp-dropdown"><li class="vp-dropdown-item"><h4 class="vp-dropdown-subtitle">Bar</h4><ul class="vp-dropdown-subitems"><li class="vp-dropdown-subitem"><a class="route-link auto-link" href="/docs-demo/guide/bar/baz.html" aria-label="Baz"><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:circle-info" sizing="both" width="1em" height="1em"></iconify-icon><!--]-->Baz<!----></a></li><li class="vp-dropdown-subitem"><a class="route-link auto-link" href="/docs-demo/guide/bar/#" aria-label="..."><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:ellipsis" sizing="both" width="1em" height="1em"></iconify-icon><!--]-->...<!----></a></li></ul></li><li class="vp-dropdown-item"><h4 class="vp-dropdown-subtitle">Foo</h4><ul class="vp-dropdown-subitems"><li class="vp-dropdown-subitem"><a class="route-link auto-link" href="/docs-demo/guide/foo/ray.html" aria-label="Ray"><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:circle-info" sizing="both" width="1em" height="1em"></iconify-icon><!--]-->Ray<!----></a></li><li class="vp-dropdown-subitem"><a class="route-link auto-link" href="/docs-demo/guide/foo/#" aria-label="..."><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:ellipsis" sizing="both" width="1em" height="1em"></iconify-icon><!--]-->...<!----></a></li></ul></li></ul></button></div></div><div class="vp-nav-item hide-in-mobile"><div class="vp-dropdown-wrapper"><button type="button" class="vp-dropdown-title" aria-label="2.0.0-rc.92"><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:book" sizing="height" height="1em"></iconify-icon>2.0.0-rc.92<!--]--><span class="arrow"></span><ul class="vp-dropdown"><li class="vp-dropdown-item"><a class="auto-link external-link" href="https://theme-hope.vuejs.press/" aria-label="V2 Docs" rel="noopener noreferrer" target="_blank"><!---->V2 Docs<!----></a></li><li class="vp-dropdown-item"><a class="auto-link external-link" href="https://theme-hope-blog-demo.vuejs.press/" aria-label="V2 Blog Demo" rel="noopener noreferrer" target="_blank"><!---->V2 Blog Demo<!----></a></li></ul></button></div></div></nav><!--]--></div><div class="vp-navbar-end"><!--[--><div class="vp-nav-item"><div class="vp-dropdown-wrapper"><button type="button" class="vp-dropdown-title" aria-label="Select language"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon i18n-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="i18n icon" name="i18n" style="width:1rem;height:1rem;vertical-align:middle;"><path d="M379.392 460.8 494.08 575.488l-42.496 102.4L307.2 532.48 138.24 701.44l-71.68-72.704L234.496 460.8l-45.056-45.056c-27.136-27.136-51.2-66.56-66.56-108.544h112.64c7.68 14.336 16.896 27.136 26.112 35.84l45.568 46.08 45.056-45.056C382.976 312.32 409.6 247.808 409.6 204.8H0V102.4h256V0h102.4v102.4h256v102.4H512c0 70.144-37.888 161.28-87.04 210.944L378.88 460.8zM576 870.4 512 1024H409.6l256-614.4H768l256 614.4H921.6l-64-153.6H576zM618.496 768h196.608L716.8 532.48 618.496 768z"></path></svg><!--]--><span class="arrow"></span><ul class="vp-dropdown"><li class="vp-dropdown-item"><a class="route-link route-link-active auto-link" href="/docs-demo/" aria-label="English"><!---->English<!----></a></li><li class="vp-dropdown-item"><a class="route-link auto-link" href="/docs-demo/zh/" aria-label="简体中文"><!---->简体中文<!----></a></li></ul></button></div></div><div class="vp-nav-item vp-action"><a class="vp-action-link" href="https://github.com/vuepress-theme-hope/vuepress-theme-hope" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="github icon" name="github" style="width:1.25rem;height:1.25rem;vertical-align:middle;"><path d="M511.957 21.333C241.024 21.333 21.333 240.981 21.333 512c0 216.832 140.544 400.725 335.574 465.664 24.49 4.395 32.256-10.07 32.256-23.083 0-11.69.256-44.245 0-85.205-136.448 29.61-164.736-64.64-164.736-64.64-22.315-56.704-54.4-71.765-54.4-71.765-44.587-30.464 3.285-29.824 3.285-29.824 49.195 3.413 75.179 50.517 75.179 50.517 43.776 75.008 114.816 53.333 142.762 40.79 4.523-31.66 17.152-53.377 31.19-65.537-108.971-12.458-223.488-54.485-223.488-242.602 0-53.547 19.114-97.323 50.517-131.67-5.035-12.33-21.93-62.293 4.779-129.834 0 0 41.258-13.184 134.912 50.346a469.803 469.803 0 0 1 122.88-16.554c41.642.213 83.626 5.632 122.88 16.554 93.653-63.488 134.784-50.346 134.784-50.346 26.752 67.541 9.898 117.504 4.864 129.834 31.402 34.347 50.474 78.123 50.474 131.67 0 188.586-114.73 230.016-224.042 242.09 17.578 15.232 33.578 44.672 33.578 90.454v135.85c0 13.142 7.936 27.606 32.854 22.87C862.25 912.597 1002.667 728.747 1002.667 512c0-271.019-219.648-490.667-490.71-490.667z"></path></svg></a></div><div class="vp-nav-item hide-in-mobile"><button type="button" class="vp-color-mode-switch" id="color-mode-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" name="auto" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" name="dark" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon" name="light" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button></div><!----><!--]--><button type="button" class="vp-toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span><span class="vp-top"></span><span class="vp-middle"></span><span class="vp-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow start"></span></div><aside id="sidebar" class="vp-sidebar" vp-sidebar><!----><ul class="vp-sidebar-links"></ul><!----></aside><!--[--><main id="main-content" class="vp-page vp-project-home" aria-labelledby="main-title"><!----><header class="vp-hero-info-wrapper" style=""><!--[--><div class="vp-hero-mask light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/6-light.svg);background-attachment:fixed;"></div><div class="vp-hero-mask dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/6-dark.svg);background-attachment:fixed;"></div><!--]--><div class="vp-hero-info"><!--[--><img class="vp-hero-image" style="" src="https://theme-hope-assets.vuejs.press/logo.svg" alt><!--]--><div class="vp-hero-infos"><h1 id="main-title" class="vp-hero-title">Project name</h1><div id="main-description">You can place the description of the project here.</div><p class="vp-hero-actions"><a class="route-link auto-link vp-hero-action primary no-external-link-icon" href="/docs-demo/demo/" aria-label="How to Use"><!--[--><iconify-icon class="vp-icon" icon="fa6-solid:lightbulb" sizing="both" width="1em" height="1em"></iconify-icon><!--]-->How to Use<!----></a><a class="route-link auto-link vp-hero-action default no-external-link-icon" href="/docs-demo/guide/" aria-label="Docs"><!---->Docs<!----></a></p></div></div><!----></header><!----><!--[--><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/3-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/3-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/docs-demo/assets/image/box.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Easy to install</h2><!----><ul class="vp-highlights"><li class="vp-highlight-item-wrapper"><div class="vp-highlight-item"><h3 class="vp-highlight-title"><!----><span>Run <code>pnpm create vuepress-theme-hope hope-project</code> to create a new project with this theme.</span></h3><!----></div></li><li class="vp-highlight-item-wrapper"><div class="vp-highlight-item"><h3 class="vp-highlight-title"><!----><span>Run <code>pnpm create vuepress-theme-hope add .</code> in your project root to create a new project with this theme.</span></h3><!----></div></li></ul></div></div><!--]--></div></div><div class="vp-feature-wrapper"><div class="vp-feature-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/2-light.svg);background-repeat:repeat;background-size:initial;"></div><div class="vp-feature-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/2-dark.svg);background-repeat:repeat;background-size:initial;"></div><div class="vp-feature" style=""><!--[--><img class="vp-feature-image" src="/docs-demo/assets/image/markdown.svg" alt><!----><!--]--><!--[--><h2 class="vp-feature-header">Add things you want in markdown</h2><div class="vp-feature-description">We extended the standard commonMark specification and added tons of new features for you.</div><!--]--><div class="vp-features"><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/others.html#link-check" aria-label="Links Check" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:clipboard-check" sizing="height" height="1em"></iconify-icon><span>Links Check</span></h3><div class="vp-feature-details">Check markdown links</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/stylize/hint.html" aria-label="Hint box" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:box-archive" sizing="height" height="1em"></iconify-icon><span>Hint box</span></h3><div class="vp-feature-details">Decorate Markdown content with styles</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/stylize/alert.html" aria-label="GFM alerts" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:bell" sizing="height" height="1em"></iconify-icon><span>GFM alerts</span></h3><div class="vp-feature-details">GFM alert box</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/content/tabs.html" aria-label="Tabs" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:table-columns" sizing="height" height="1em"></iconify-icon><span>Tabs</span></h3><div class="vp-feature-details">Group similar content with tabs and switch them together</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/code/code-tabs.html" aria-label="Code Tabs" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:code" sizing="height" height="1em"></iconify-icon><span>Code Tabs</span></h3><div class="vp-feature-details">Group similar codes with tabs</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/stylize/align.html" aria-label="Custom Align" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:align-center" sizing="height" height="1em"></iconify-icon><span>Custom Align</span></h3><div class="vp-feature-details">Let you decide to align paragraphs in the way you like</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/stylize/attrs.html" aria-label="Attrs" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:code" sizing="height" height="1em"></iconify-icon><span>Attrs</span></h3><div class="vp-feature-details">Allow you to add attributes for Markdown content</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/stylize/sup-sub.html" aria-label="Superscript and subscript" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:superscript" sizing="height" height="1em"></iconify-icon><span>Superscript and subscript</span></h3><div class="vp-feature-details">Inserting superscript and subscript</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/content/footnote.html" aria-label="Footnote" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:quote-left" sizing="height" height="1em"></iconify-icon><span>Footnote</span></h3><div class="vp-feature-details">Your Markdown now support footnotes</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/stylize/mark.html" aria-label="Mark" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:highlighter" sizing="height" height="1em"></iconify-icon><span>Mark</span></h3><div class="vp-feature-details">Mark and highlight contents</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/stylize/spoiler.html" aria-label="Spoiler" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:eraser" sizing="height" height="1em"></iconify-icon><span>Spoiler</span></h3><div class="vp-feature-details">Mark spoiler contents</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/grammar/tasklist.html" aria-label="Tasklist" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:square-check" sizing="height" height="1em"></iconify-icon><span>Tasklist</span></h3><div class="vp-feature-details">Use tasklist in Markdown</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/grammar/image.html" aria-label="Image syntax" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:image" sizing="height" height="1em"></iconify-icon><span>Image syntax</span></h3><div class="vp-feature-details">improve syntax to specify size and color scheme</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/component/grammar.html" aria-label="Component Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:puzzle-piece" sizing="height" height="1em"></iconify-icon><span>Component Support</span></h3><div class="vp-feature-details">Easily insert components in Markdown</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/component/built-in.html" aria-label="Components" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:puzzle-piece" sizing="height" height="1em"></iconify-icon><span>Components</span></h3><div class="vp-feature-details">Common components out fo box</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/chart/chartjs.html" aria-label="Chart Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:chart-simple" sizing="height" height="1em"></iconify-icon><span>Chart Support</span></h3><div class="vp-feature-details">Display charts in Markdown</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/chart/flowchart.html" aria-label="Flowchart Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:route" sizing="height" height="1em"></iconify-icon><span>Flowchart Support</span></h3><div class="vp-feature-details">Create your flowchart in Markdown</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/chart/mermaid.html" aria-label="Mermaid Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:chart-pie" sizing="height" height="1em"></iconify-icon><span>Mermaid Support</span></h3><div class="vp-feature-details">Add mermaid diagram in Markdown</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/chart/plantuml.html" aria-label="Plantuml Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:diagram-project" sizing="height" height="1em"></iconify-icon><span>Plantuml Support</span></h3><div class="vp-feature-details">Add plantuml in Markdown</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/grammar/math.html" aria-label="Tex Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:square-root-variable" sizing="height" height="1em"></iconify-icon><span>Tex Support</span></h3><div class="vp-feature-details">Markdown now have Tex Support so you can write your formula</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/content/include.html" aria-label="Include snippet Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-brands:markdown" sizing="height" height="1em"></iconify-icon><span>Include snippet Support</span></h3><div class="vp-feature-details">split your docs with different parts and import them in Markdown</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/code/playground.html" aria-label="Playground Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:code" sizing="height" height="1em"></iconify-icon><span>Playground Support</span></h3><div class="vp-feature-details">You can add playground in Markdown files</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/code/kotlin-playground.html" aria-label="Kotlin playground Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-brands:kickstarter" sizing="height" height="1em"></iconify-icon><span>Kotlin playground Support</span></h3><div class="vp-feature-details">Reactive kotlin playground</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/code/vue-playground.html" aria-label="Vue playground Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-brands:vuejs" sizing="height" height="1em"></iconify-icon><span>Vue playground Support</span></h3><div class="vp-feature-details">Show living vue component in playground</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/code/sandpack.html" aria-label="Sandpack playground Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:code" sizing="height" height="1em"></iconify-icon><span>Sandpack playground Support</span></h3><div class="vp-feature-details">A live coding environment driven by Sandpack.</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/code/demo.html" aria-label="Code Demo Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:laptop-code" sizing="height" height="1em"></iconify-icon><span>Code Demo Support</span></h3><div class="vp-feature-details">You can insert code demo easily</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/content/revealjs.html" aria-label="Presentation Support" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:person-chalkboard" sizing="height" height="1em"></iconify-icon><span>Presentation Support</span></h3><div class="vp-feature-details">Insert presentation in Markdown files via Reveal.js</div></a></div></div></div><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/9-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/9-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/docs-demo/assets/image/ui.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Customizable UI</h2><div class="vp-highlight-description">Customizable outlook with full a11y support.</div><ul class="vp-highlights"><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/interface/darkmode.html" aria-label="Dark Mode" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:circle-half-stroke" sizing="height" height="1em"></iconify-icon><span>Dark Mode</span></h3><div class="vp-highlight-details">Switch between light and dark modes freely</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/interface/theme-color.html" aria-label="Customizable Theme Color" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:palette" sizing="height" height="1em"></iconify-icon><span>Customizable Theme Color</span></h3><div class="vp-highlight-details">Set theme color with the brand color and even a picker</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/interface/others.html" aria-label="More" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:ellipsis" sizing="height" height="1em"></iconify-icon><span>More</span></h3><div class="vp-highlight-details">RTL layout, print support, fullscreen button, etc.</div></a></li></ul></div></div><!--]--></div></div><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/5-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/5-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/docs-demo/assets/image/layout.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Improved layouts</h2><div class="vp-highlight-description">An awesome responsive layout</div><ul class="vp-highlights"><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/layout/navbar.html" aria-label="Navbar" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:window-maximize" sizing="height" height="1em"></iconify-icon><span>Navbar</span></h3><div class="vp-highlight-details">Fully customizable navbar with improved mobile support</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/layout/sidebar.html" aria-label="Sidebar" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:fas fa-window-maximize fa-rotate-270" sizing="height" height="1em"></iconify-icon><span>Sidebar</span></h3><div class="vp-highlight-details">Generate sidebar based on page headings and file structure</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/layout/slides.html" aria-label="Slide Page" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:person-chalkboard" sizing="height" height="1em"></iconify-icon><span>Slide Page</span></h3><div class="vp-highlight-details">Adding slide pages to display things you like</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/layout/" aria-label="Other Layout Improvement" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:object-group" sizing="height" height="1em"></iconify-icon><span>Other Layout Improvement</span></h3><div class="vp-highlight-details">Improved page nav and new breadcrumb, footer and toc. We also bring you a brand new homepage.</div></a></li></ul></div></div><!--]--></div></div><div class="vp-feature-wrapper"><div class="vp-feature-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/1-light.svg);"></div><div class="vp-feature-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/1-dark.svg);"></div><div class="vp-feature" style=""><!--[--><img class="vp-feature-image" src="/docs-demo/assets/image/features.svg" alt><!----><!--]--><!--[--><h2 class="vp-feature-header">New features</h2><!----><!--]--><div class="vp-features"><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/feature/catalog.html" aria-label="Catalog Page" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:network-wired" sizing="height" height="1em"></iconify-icon><span>Catalog Page</span></h3><div class="vp-feature-details">Auto generating catalog page and out of box catalog component</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/feature/comment.html" aria-label="Pageviews and Comments" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:comment-dots" sizing="height" height="1em"></iconify-icon><span>Pageviews and Comments</span></h3><div class="vp-feature-details">Pageview statistics and comment support with 4 comment service</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/feature/page-info.html" aria-label="Article Information" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:circle-info" sizing="height" height="1em"></iconify-icon><span>Article Information</span></h3><div class="vp-feature-details">Add author, writing date, reading time, word count and other information to your article</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/feature/encrypt.html" aria-label="Article Encryption" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:lock" sizing="height" height="1em"></iconify-icon><span>Article Encryption</span></h3><div class="vp-feature-details">Encrypt you articles based on page links, so that only the one you want could see them</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/feature/search.html" aria-label="Search" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:search" sizing="height" height="1em"></iconify-icon><span>Search</span></h3><div class="vp-feature-details">Support docsearch and client search</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/markdown/code/fence.html" aria-label="Code Block" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:code" sizing="height" height="1em"></iconify-icon><span>Code Block</span></h3><div class="vp-feature-details">Customize code block themes, line number, highlight lines, copy button, etc.</div></a><a class="vp-feature-item link" href="https://theme-hope.vuejs.press/guide/feature/photo-swipe.html" aria-label="Image Preview" target="_blank"><h3 class="vp-feature-title"><iconify-icon class="vp-icon" icon="fa6-solid:image" sizing="height" height="1em"></iconify-icon><span>Image Preview</span></h3><div class="vp-feature-details">Support viewing, zooming, sharing your page images like a gallery</div></a></div></div></div><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/5-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/5-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/docs-demo/assets/image/blog.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Blogging</h2><div class="vp-highlight-description">Create personal blog with theme</div><ul class="vp-highlights"><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/blog/intro.html" aria-label="Blog features" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:blog" sizing="height" height="1em"></iconify-icon><span>Blog features</span></h3><div class="vp-highlight-details">Listing your articles with their dates, tags and categories</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/blog/home.html" aria-label="Blog homepage" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:blog" sizing="height" height="1em"></iconify-icon><span>Blog homepage</span></h3><div class="vp-highlight-details">New blog homepage</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/blog/blogger.html" aria-label="Blogger info" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:circle-info" sizing="height" height="1em"></iconify-icon><span>Blogger info</span></h3><div class="vp-highlight-details">Customize avatar, name, slogan, introduction and social links</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/blog/timeline.html" aria-label="Timeline" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:clock" sizing="height" height="1em"></iconify-icon><span>Timeline</span></h3><div class="vp-highlight-details">Read through blog posts in a timeline</div></a></li></ul></div></div><!--]--></div></div><div class="vp-highlight-wrapper" style=""><div class="vp-highlight-bg light" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/4-light.svg);"></div><div class="vp-highlight-bg dark" style="background-image:url(https://theme-hope-assets.vuejs.press/bg/4-dark.svg);"></div><div class="vp-highlight"><!--[--><img class="vp-highlight-image" src="/docs-demo/assets/image/advanced.svg" alt><!----><!--]--><!--[--><div class="vp-highlight-info-wrapper"><div class="vp-highlight-info"><h2 class="vp-highlight-header">Advanced</h2><div class="vp-highlight-description">Advanced features to improve site SEO and user experience</div><ul class="vp-highlights"><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/advanced/seo.html" aria-label="SEO Enhancement" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:dumbbell" sizing="height" height="1em"></iconify-icon><span>SEO Enhancement</span></h3><div class="vp-highlight-details">Optimize pages for search engines</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/advanced/sitemap.html" aria-label="Sitemap" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:sitemap" sizing="height" height="1em"></iconify-icon><span>Sitemap</span></h3><div class="vp-highlight-details">Generate a Sitemap for your site</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/advanced/feed.html" aria-label="Feed" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:rss" sizing="height" height="1em"></iconify-icon><span>Feed</span></h3><div class="vp-highlight-details">Generate feed to allow users to subscribe it</div></a></li><li class="vp-highlight-item-wrapper link"><a class="vp-highlight-item link" href="https://theme-hope.vuejs.press/guide/advanced/pwa.html" aria-label="PWA" target="_blank"><h3 class="vp-highlight-title"><iconify-icon class="vp-icon vp-highlight-icon" icon="fa6-solid:mobile-screen" sizing="height" height="1em"></iconify-icon><span>PWA</span></h3><div class="vp-highlight-details">Make your site more like an APP</div></a></li></ul></div></div><!--]--></div></div><!--]--><div class="" vp-content><!----><div id="markdown-content"><p>This is an example of a project homepage. You can place your main content here.</p><p>To use this layout, you need to set <code>home: true</code> in the page front matter.</p><p>For related descriptions of configuration items, please see <a href="https://theme-hope.vuejs.press/guide/layout/home.html" target="_blank" rel="noopener noreferrer">Project HomePage Layout Config</a>.</p></div><!----><!----><!----></div></main><!--]--><footer class="vp-footer-wrapper" vp-footer><div class="vp-footer">Theme by <a href="https://theme-hope.vuejs.press/" target="_blank">VuePress Theme Hope</a> | MIT Licensed, Copyright © 2019-present Mr.Hope</div><!----></footer></div><!--]--><!--[--><!----><!----><!--[--><!--]--><!--]--><!--]--></div>
    <script type="module" src="/docs-demo/assets/app-zUPB0ujD.js" defer></script>
  </body>
</html>