init commit.

2025-03-11 02:14:00 +08:00
commit 5f36281b6b
59 changed files with 6562 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,5 @@
+
+node_modules/
+src/.vuepress/.cache/
+src/.vuepress/.temp/
+src/.vuepress/dist/
--- a/package.json
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "my-docs",
+  "description": "A project of vuepress-theme-hope",
+  "version": "2.0.0",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "docs:build": "vuepress-vite build src",
+    "docs:clean-dev": "vuepress-vite dev src --clean-cache",
+    "docs:dev": "vuepress-vite dev src",
+    "docs:update-package": "pnpm dlx vp-update"
+  },
+  "devDependencies": {
+    "@vuepress/bundler-vite": "2.0.0-rc.20",
+    "sass-embedded": "^1.85.1",
+    "vue": "^3.5.13",
+    "vuepress": "2.0.0-rc.20",
+    "vuepress-theme-hope": "2.0.0-rc.74"
+  },
+  "packageManager": "pnpm@10.6.1+sha512.40ee09af407fa9fbb5fbfb8e1cb40fbb74c0af0c3e10e9224d7b53c7658528615b2c92450e74cfad91e3a2dcafe3ce4050d80bda71d757756d2ce2b66213e9a3"
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/.vuepress/config.ts
+++ b/src/.vuepress/config.ts
@@ -0,0 +1,25 @@
+import { defineUserConfig } from "vuepress";
+
+import theme from "./theme.js";
+
+export default defineUserConfig({
+  base: "/",
+
+  locales: {
+    "/": {
+      lang: "en-US",
+      title: "Docs Demo",
+      description: "A docs demo for vuepress-theme-hope",
+    },
+    "/zh/": {
+      lang: "zh-CN",
+      title: "文档演示",
+      description: "vuepress-theme-hope 的文档演示",
+    },
+  },
+
+  theme,
+
+  // Enable it with pwa
+  // shouldPrefetch: false,
+});
--- a/src/.vuepress/navbar/en.ts
+++ b/src/.vuepress/navbar/en.ts
@@ -0,0 +1,31 @@
+import { navbar } from "vuepress-theme-hope";
+
+export const enNavbar = navbar([
+  "/",
+  "/portfolio",
+  "/demo/",
+  {
+    text: "Guide",
+    icon: "lightbulb",
+    prefix: "/guide/",
+    children: [
+      {
+        text: "Bar",
+        icon: "lightbulb",
+        prefix: "bar/",
+        children: ["baz", { text: "...", icon: "ellipsis", link: "#" }],
+      },
+      {
+        text: "Foo",
+        icon: "lightbulb",
+        prefix: "foo/",
+        children: ["ray", { text: "...", icon: "ellipsis", link: "#" }],
+      },
+    ],
+  },
+  {
+    text: "V2 Docs",
+    icon: "book",
+    link: "https://theme-hope.vuejs.press/",
+  },
+]);
--- a/src/.vuepress/navbar/index.ts
+++ b/src/.vuepress/navbar/index.ts
@@ -0,0 +1,2 @@
+export * from "./en.js";
+export * from "./zh.js";
--- a/src/.vuepress/navbar/zh.ts
+++ b/src/.vuepress/navbar/zh.ts
@@ -0,0 +1,31 @@
+import { navbar } from "vuepress-theme-hope";
+
+export const zhNavbar = navbar([
+  "/zh/",
+  "/zh/portfolio",
+  "/zh/demo/",
+  {
+    text: "指南",
+    icon: "lightbulb",
+    prefix: "/zh/guide/",
+    children: [
+      {
+        text: "Bar",
+        icon: "lightbulb",
+        prefix: "bar/",
+        children: ["baz", { text: "...", icon: "ellipsis", link: "" }],
+      },
+      {
+        text: "Foo",
+        icon: "lightbulb",
+        prefix: "foo/",
+        children: ["ray", { text: "...", icon: "ellipsis", link: "" }],
+      },
+    ],
+  },
+  {
+    text: "V2 文档",
+    icon: "book",
+    link: "https://theme-hope.vuejs.press/zh/",
+  },
+]);
--- a/src/.vuepress/public/assets/icon/apple-icon-152.png
+++ b/src/.vuepress/public/assets/icon/apple-icon-152.png
--- a/src/.vuepress/public/assets/icon/chrome-192.png
+++ b/src/.vuepress/public/assets/icon/chrome-192.png
--- a/src/.vuepress/public/assets/icon/chrome-512.png
+++ b/src/.vuepress/public/assets/icon/chrome-512.png
--- a/src/.vuepress/public/assets/icon/chrome-mask-192.png
+++ b/src/.vuepress/public/assets/icon/chrome-mask-192.png
--- a/src/.vuepress/public/assets/icon/chrome-mask-512.png
+++ b/src/.vuepress/public/assets/icon/chrome-mask-512.png
--- a/src/.vuepress/public/assets/icon/guide-maskable.png
+++ b/src/.vuepress/public/assets/icon/guide-maskable.png
--- a/src/.vuepress/public/assets/icon/ms-icon-144.png
+++ b/src/.vuepress/public/assets/icon/ms-icon-144.png
--- a/src/.vuepress/public/assets/image/advanced.svg
+++ b/src/.vuepress/public/assets/image/advanced.svg
--- a/src/.vuepress/public/assets/image/blog.svg
+++ b/src/.vuepress/public/assets/image/blog.svg
--- a/src/.vuepress/public/assets/image/box.svg
+++ b/src/.vuepress/public/assets/image/box.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path fill="#FDD7AD" d="M512 0 335.448 88.272l-70.616 35.312-70.624 35.312-176.552 88.28v529.648L512 1024l494.344-247.176V247.176z"/><path fill="#CBB292" d="m759.176 370.76-70.624 35.304-494.344-247.168 70.624-35.312zM512 494.344V1024L17.656 776.824V247.176z"/><path fill="#7F6E5D" d="M1006.344 247.168v529.656L512 1024V494.344l176.552-88.28v70.624l141.24-70.624v-70.616z"/><path fill="#7F5B53" d="M829.792 335.448v70.624L688.56 476.68v-70.624z"/><path fill="#CBB292" d="m829.792 335.448-70.624 35.312-494.344-247.176 70.624-35.312z"/><path fill="#2C3E50" d="m682.52 550.32 157.032-78.512a17.656 17.656 0 0 1 25.552 15.792v9.32a52.96 52.96 0 0 1-29.28 47.376L678.8 622.8a17.656 17.656 0 0 1-25.552-15.792v-9.312a52.96 52.96 0 0 1 29.28-47.376z"/></svg>
--- a/src/.vuepress/public/assets/image/features.svg
+++ b/src/.vuepress/public/assets/image/features.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024"><defs><linearGradient id="a" x1="522.593" x2="522.593" y1="-70.302" y2="-335.937" gradientUnits="userSpaceOnUse" spreadMethod="pad"><stop offset="0" stop-color="#fe5d5a" stop-opacity=".1"/><stop offset=".908" stop-color="#ef1220" stop-opacity=".5"/></linearGradient><linearGradient id="b" x1="107.12" x2="935.038" y1="-373.67" y2="-373.67" gradientUnits="userSpaceOnUse" spreadMethod="pad"><stop offset="0" stop-color="#ff5e59"/><stop offset="1" stop-color="#f01422"/></linearGradient><linearGradient id="c" x1="519.405" x2="519.405" y1="-195.547" y2="-726.816" gradientUnits="userSpaceOnUse" spreadMethod="pad"><stop offset="0" stop-color="#ffe2e2"/><stop offset=".888" stop-color="#ff8e8e"/></linearGradient><linearGradient id="d" x1="191.5" x2="483.9" y1="-564.9" y2="-564.9" gradientUnits="userSpaceOnUse" spreadMethod="pad"><stop offset="0" stop-color="#e92700" stop-opacity=".3"/><stop offset=".013" stop-color="#ef1220" stop-opacity=".2"/></linearGradient><linearGradient id="e" x1="403.502" x2="253.121" y1="-847.32" y2="-586.853" gradientUnits="userSpaceOnUse" spreadMethod="pad"><stop offset="0" stop-color="#ff5e59"/><stop offset=".201" stop-color="#f01422"/></linearGradient><linearGradient id="f" x1="330.485" x2="330.485" y1="-801.787" y2="-625.789" gradientUnits="userSpaceOnUse" spreadMethod="pad"><stop offset="0" stop-color="#ff5e59"/><stop offset=".201" stop-color="#f01422"/></linearGradient><linearGradient id="g" x1="397.351" x2="256.845" y1="-647.231" y2="-890.596" gradientUnits="userSpaceOnUse" spreadMethod="pad"><stop offset="0" stop-color="#ffa6a6"/><stop offset=".908" stop-color="#ff6b5d"/></linearGradient></defs><path fill="url(#a)" d="M501.2 662.3 327.6 763.8c-13.9 8.1-14.2 28.1-.5 36.7l179.1 97.7c10.9 5.9 24.1 5.9 34.9-.1l177-97.9c13.6-8.5 13.4-28.3-.3-36.5l-168.4-101c-14.8-9-33.3-9.1-48.2-.4Z"/><path fill="#f63037" d="m110.2 525.7-3.1 77.6 57.5 18.5L184 519.4Z"/><path fill="url(#b)" d="m476.6 363.5-328 154.6c-21 42.7-55.4 65.4-35.5 103.5 4.2 8 9.4 14.4 15.4 18.1l358.2 195.5c21.8 11.9 48.1 11.8 69.8-.2l354-195.8c27.2-16.9 34.8-90.3 7.3-106.8L573 364.1c-29.7-17.8-66.6-18-96.4-.6Z"/><path fill="url(#c)" d="M476.6 298.7 129.4 501.6c-27.8 16.3-28.4 56.3-1 73.3l358.2 195.5c21.8 11.9 48.1 11.8 69.8-.2l354-195.8c27.2-16.9 26.9-56.6-.6-73.1L573 299.3c-29.7-17.8-66.6-18-96.4-.6Z"/><path fill="#ff8989" fill-opacity=".31" d="m481.2 387.8 39.4 123.4c1.1 3.4 4 6 7.6 6.6l173.4 30.4-33-118.3c-.9-3.3-3.6-5.8-7-6.5l-180.4-35.6ZM327 499.2l40.4 101.1L496.7 525c2.5-1.5 3.7-4.5 2.7-7.3l-36-106.8-127.6 65c-8.6 4.3-12.4 14.4-8.8 23.3ZM523.8 540.5l-140.3 77.2L567.2 659c3.2.7 6.6.1 9.3-1.6l134.6-85-174.7-33.8c-4.3-1-8.7-.3-12.6 1.9Z"/><path fill="url(#d)" d="M483.9 406.1c0 35.46-65.46 64.2-146.2 64.2s-146.2-28.74-146.2-64.2c0-35.46 65.46-64.2 146.2-64.2s146.2 28.74 146.2 64.2Z"/><path fill="url(#e)" d="m254.2 188.4-123 83.1c-1.8 1.3-2.6 3.6-1.8 5.7l39.1 110.6c.6 1.7 2 2.9 3.8 3.2l221.8 40.5c1.3.3 2.7-.1 3.7-.8l131.7-93.6c1.9-1.4 2.6-3.9 1.7-6.1l-49.4-107c-.6-1.5-2.1-2.6-3.7-2.8l-220.3-33.5c-1.3-.2-2.6.1-3.6.7Z"/><path fill="url(#f)" d="m528.6 274.5 3 59.1-205 65.6-177.2-72.7-20-49.2 1.9-54.1Z"/><path fill="url(#g)" d="m250.6 138-112.3 76c-6 4.1-8.5 11.7-6.1 18.5l34.2 96.6c1.9 5.4 6.6 9.3 12.1 10.4l211 38.5c4.3.7 8.6-.2 12.1-2.7l120.5-85.5c6.3-4.4 8.4-12.7 5.3-19.7l-43.1-93.5c-2.2-4.9-6.8-8.3-12.1-9.1L262 135.6c-4-.7-8 .2-11.4 2.4Z"/><path fill="#fff" d="m419.8 252.8-79-11-29-57.7c-3.8-7.6-13.2-10.7-20.8-6.9-7.6 3.8-10.7 13.2-6.9 20.8l26.6 52.9-61.8 42.2c-7.1 4.8-8.9 14.5-4.1 21.5 3 4.4 7.9 6.8 12.8 6.8 3 0 6-.9 8.7-2.7l68-46.4 81.1 11.2c.7.1 1.4.1 2.1.1 7.6 0 14.3-5.6 15.3-13.4 1.4-8.4-4.5-16.2-13-17.4Z"/></svg>
--- a/src/.vuepress/public/assets/image/github-dark.svg
+++ b/src/.vuepress/public/assets/image/github-dark.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
--- a/src/.vuepress/public/assets/image/github-light.svg
+++ b/src/.vuepress/public/assets/image/github-light.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
--- a/src/.vuepress/public/assets/image/layout.svg
+++ b/src/.vuepress/public/assets/image/layout.svg
--- a/src/.vuepress/public/assets/image/markdown.svg
+++ b/src/.vuepress/public/assets/image/markdown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1536 1024"><path fill="#1296db" d="M1425.067.256H110.933A110.933 110.933 0 0 0 0 110.848v723.627a110.933 110.933 0 0 0 110.933 110.933h1314.39c61.269 0 110.933-49.75 110.677-110.677V110.848A110.933 110.933 0 0 0 1425.067.256z" class="selected" data-spm-anchor-id="a313x.7781069.0.i4"/><path fill="#FFF" d="M664.747 723.797V435.883L517.12 620.373l-147.456-184.49v288l-148.053-67.158V221.781h147.626l147.627 184.576 147.541-184.576h147.627v565.76z"/><path d="M1024 0h426.667A85.333 85.333 0 0 1 1536 85.333v768a85.333 85.333 0 0 1-85.333 85.334H1024V0z" opacity=".1"/><path fill="#FFF" d="m1256.96 731.307-170.667-216.491h113.75V304.64h113.749v210.176h113.835z" opacity=".5"/></svg>
--- a/src/.vuepress/public/favicon.ico
+++ b/src/.vuepress/public/favicon.ico
--- a/src/.vuepress/public/logo.png
+++ b/src/.vuepress/public/logo.png
--- a/src/.vuepress/public/logo.svg
+++ b/src/.vuepress/public/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" class="icon" viewBox="0 0 3280.944 2800"><path fill="#41b883" d="M1645.332 601.004h375.675L1081.82 2238.478 142.636 601.004h718.477l220.708 379.704 216.013-379.704z"/><path fill="#41b883" d="M142.636 601.004l939.185 1637.474 939.186-1637.474h-375.675l-563.51 982.484-568.208-982.484z"/><path fill="#35495e" d="M513.188 601.004l568.207 987.23 563.511-987.23h-347.498l-216.013 379.704-220.708-379.704zM1607.792 1311.83l594.678 2.293 187.353-316.325-598.662 2.292zM2198.506 1909.57C2867.436 732.7 2939.502 605.426 2937.874 603.78c-.715-.723 45.303-1.314 102.262-1.314s103.562.428 103.562.951c0 .523-208.57 367.978-463.491 816.567L2216.715 2235.6l-102.1.596-102.102.596z"/><path fill="#41b883" d="M1680.563 2233.328c0-1.34 168.208-298.145 440.375-777.048a4135645.775 4135645.775 0 00337.619-594.19l146.13-257.25 170.746-.04 170.747-.04-5.536 9.741c-3.044 5.358-43.727 77.302-90.407 159.875-85.356 150.992-337.562 595.163-656.602 1156.373l-172 302.559-170.536.588c-93.795.322-170.536.069-170.536-.567z"/><path fill="#35495e" d="M1429.783 1625.351l594.679 2.292 187.353-316.324-598.662 2.292z"/><path fill="#41b883" d="M1524.207 1464.903l608.285 6.877 173.746-320.909h-619.072z"/></svg>
--- a/src/.vuepress/sidebar/en.ts
+++ b/src/.vuepress/sidebar/en.ts
@@ -0,0 +1,26 @@
+import { sidebar } from "vuepress-theme-hope";
+
+export const enSidebar = sidebar({
+  "/": [
+    "",
+    "portfolio",
+    {
+      text: "Demo",
+      icon: "laptop-code",
+      prefix: "demo/",
+      link: "demo/",
+      children: "structure",
+    },
+    {
+      text: "Docs",
+      icon: "book",
+      prefix: "guide/",
+      children: "structure",
+    },
+    {
+      text: "Slides",
+      icon: "person-chalkboard",
+      link: "https://ecosystem.vuejs.press/plugins/markdown/revealjs/demo.html",
+    },
+  ],
+});
--- a/src/.vuepress/sidebar/index.ts
+++ b/src/.vuepress/sidebar/index.ts
@@ -0,0 +1,2 @@
+export * from "./en.js";
+export * from "./zh.js";
--- a/src/.vuepress/sidebar/zh.ts
+++ b/src/.vuepress/sidebar/zh.ts
@@ -0,0 +1,26 @@
+import { sidebar } from "vuepress-theme-hope";
+
+export const zhSidebar = sidebar({
+  "/zh/": [
+    "",
+    "portfolio",
+    {
+      text: "案例",
+      icon: "laptop-code",
+      prefix: "demo/",
+      link: "demo/",
+      children: "structure",
+    },
+    {
+      text: "文档",
+      icon: "book",
+      prefix: "guide/",
+      children: "structure",
+    },
+    {
+      text: "幻灯片",
+      icon: "person-chalkboard",
+      link: "https://ecosystem.vuejs.press/zh/plugins/markdown/revealjs/demo.html",
+    },
+  ],
+});
--- a/src/.vuepress/styles/config.scss
+++ b/src/.vuepress/styles/config.scss
@@ -0,0 +1,2 @@
+// you can change config here
+$theme-color: #096dd9;
--- a/src/.vuepress/styles/index.scss
+++ b/src/.vuepress/styles/index.scss
@@ -0,0 +1 @@
+// place your custom styles here
--- a/src/.vuepress/styles/palette.scss
+++ b/src/.vuepress/styles/palette.scss
@@ -0,0 +1 @@
+// you can change colors here
--- a/src/.vuepress/theme.ts
+++ b/src/.vuepress/theme.ts
@@ -0,0 +1,217 @@
+import { hopeTheme } from "vuepress-theme-hope";
+
+import { enNavbar, zhNavbar } from "./navbar/index.js";
+import { enSidebar, zhSidebar } from "./sidebar/index.js";
+
+export default hopeTheme({
+  hostname: "https://vuepress-theme-hope-docs-demo.netlify.app",
+
+  author: {
+    name: "Mr.Hope",
+    url: "https://mister-hope.com",
+  },
+
+  logo: "https://theme-hope-assets.vuejs.press/logo.svg",
+
+  repo: "vuepress-theme-hope/vuepress-theme-hope",
+
+  docsDir: "src",
+
+  locales: {
+    "/": {
+      // navbar
+      navbar: enNavbar,
+
+      // sidebar
+      sidebar: enSidebar,
+
+      footer: "Default footer",
+
+      displayFooter: true,
+
+      metaLocales: {
+        editLink: "Edit this page on GitHub",
+      },
+    },
+
+    /**
+     * Chinese locale config
+     */
+    "/zh/": {
+      // navbar
+      navbar: zhNavbar,
+
+      // sidebar
+      sidebar: zhSidebar,
+
+      footer: "默认页脚",
+
+      displayFooter: true,
+
+      // page meta
+      metaLocales: {
+        editLink: "在 GitHub 上编辑此页",
+      },
+    },
+  },
+
+  encrypt: {
+    config: {
+      "/demo/encrypt.html": {
+        hint: "Password: 1234",
+        password: "1234",
+      },
+      "/zh/demo/encrypt.html": {
+        hint: "Password: 1234",
+        password: "1234",
+      },
+    },
+  },
+
+  // These features are enabled for demo, only preserve features you need here
+  markdown: {
+    align: true,
+    attrs: true,
+    codeTabs: true,
+    component: true,
+    demo: true,
+    figure: true,
+    gfm: true,
+    imgLazyload: true,
+    imgSize: true,
+    include: true,
+    mark: true,
+    plantuml: true,
+    spoiler: true,
+    stylize: [
+      {
+        matcher: "Recommended",
+        replacer: ({ tag }) => {
+          if (tag === "em")
+            return {
+              tag: "Badge",
+              attrs: { type: "tip" },
+              content: "Recommended",
+            };
+        },
+      },
+    ],
+    sub: true,
+    sup: true,
+    tabs: true,
+    tasklist: true,
+    vPre: true,
+
+    // uncomment these if you need TeX support
+    // math: {
+    //   // install katex before enabling it
+    //   type: "katex",
+    //   // or install mathjax-full before enabling it
+    //   type: "mathjax",
+    // },
+
+    // install chart.js before enabling it
+    // chartjs: true,
+
+    // install echarts before enabling it
+    // echarts: true,
+
+    // install flowchart.ts before enabling it
+    // flowchart: true,
+
+    // install mermaid before enabling it
+    // mermaid: true,
+
+    // playground: {
+    //   presets: ["ts", "vue"],
+    // },
+
+    // install @vue/repl before enabling it
+    // vuePlayground: true,
+
+    // install sandpack-vue3 before enabling it
+    // sandpack: true,
+
+    // install @vuepress/plugin-revealjs and uncomment these if you need slides
+    // revealjs: {
+    //   plugins: ["highlight", "math", "search", "notes", "zoom"],
+    // },
+  },
+
+  plugins: {
+    // Note: This is for testing ONLY!
+    // You MUST generate and use your own comment service in production.
+    comment: {
+      provider: "Giscus",
+      repo: "vuepress-theme-hope/giscus-discussions",
+      repoId: "R_kgDOG_Pt2A",
+      category: "Announcements",
+      categoryId: "DIC_kwDOG_Pt2M4COD69",
+    },
+
+    components: {
+      components: ["Badge", "VPCard"],
+    },
+
+    icon: {
+      prefix: "fa6-solid:",
+    },
+
+    // Install @vuepress/plugin-pwa and uncomment these if you want a PWA
+    // pwa: {
+    //   favicon: "/favicon.ico",
+    //   cacheHTML: true,
+    //   cacheImage: true,
+    //   appendBase: true,
+    //   apple: {
+    //     icon: "/assets/icon/apple-icon-152.png",
+    //     statusBarColor: "black",
+    //   },
+    //   msTile: {
+    //     image: "/assets/icon/ms-icon-144.png",
+    //     color: "#ffffff",
+    //   },
+    //   manifest: {
+    //     icons: [
+    //       {
+    //         src: "/assets/icon/chrome-mask-512.png",
+    //         sizes: "512x512",
+    //         purpose: "maskable",
+    //         type: "image/png",
+    //       },
+    //       {
+    //         src: "/assets/icon/chrome-mask-192.png",
+    //         sizes: "192x192",
+    //         purpose: "maskable",
+    //         type: "image/png",
+    //       },
+    //       {
+    //         src: "/assets/icon/chrome-512.png",
+    //         sizes: "512x512",
+    //         type: "image/png",
+    //       },
+    //       {
+    //         src: "/assets/icon/chrome-192.png",
+    //         sizes: "192x192",
+    //         type: "image/png",
+    //       },
+    //     ],
+    //     shortcuts: [
+    //       {
+    //         name: "Demo",
+    //         short_name: "Demo",
+    //         url: "/demo/",
+    //         icons: [
+    //           {
+    //             src: "/assets/icon/guide-maskable.png",
+    //             sizes: "192x192",
+    //             purpose: "maskable",
+    //             type: "image/png",
+    //           },
+    //         ],
+    //       },
+    //     ],
+    //   },
+    // },
+  },
+});
--- a/src/README.md
+++ b/src/README.md
@@ -0,0 +1,321 @@
+---
+home: true
+icon: house
+title: Project home
+heroImage: https://theme-hope-assets.vuejs.press/logo.svg
+bgImage: https://theme-hope-assets.vuejs.press/bg/6-light.svg
+bgImageDark: https://theme-hope-assets.vuejs.press/bg/6-dark.svg
+bgImageStyle:
+  background-attachment: fixed
+heroText: Project name
+tagline: You can place the description of the project here.
+actions:
+  - text: How to Use
+    icon: lightbulb
+    link: ./demo/
+    type: primary
+
+  - text: Docs
+    link: ./guide/
+
+highlights:
+  - header: Easy to install
+    image: /assets/image/box.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/3-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/3-dark.svg
+    highlights:
+      - title: Run <code>pnpm create vuepress-theme-hope hope-project</code> to create a new project with this theme.
+      - title: Run <code>pnpm create vuepress-theme-hope add .</code> in your project root to create a new project with this theme.
+
+  - header: Add things you want in markdown
+    description: We extended the standard commonMark specification and added tons of new features for you.
+    image: /assets/image/markdown.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
+    bgImageStyle:
+      background-repeat: repeat
+      background-size: initial
+    features:
+      - title: Links Check
+        icon: clipboard-check
+        details: Check markdown links
+        link: https://theme-hope.vuejs.press/guide/markdown/others.html#link-check
+
+      - title: Hint box
+        icon: box-archive
+        details: Decorate Markdown content with styles
+        link: https://theme-hope.vuejs.press/guide/markdown/stylize/hint.html
+
+      - title: GFM alerts
+        icon: bell
+        details: GFM alert box
+        link: https://theme-hope.vuejs.press/guide/markdown/stylize/alert.html
+
+      - title: Tabs
+        icon: table-columns
+        details: Group similar content with tabs and switch them together
+        link: https://theme-hope.vuejs.press/guide/markdown/content/tabs.html
+
+      - title: Code Tabs
+        icon: code
+        details: Group similar codes with tabs
+        link: https://theme-hope.vuejs.press/guide/markdown/code/code-tabs.html
+
+      - title: Custom Align
+        icon: align-center
+        details: Let you decide to align paragraphs in the way you like
+        link: https://theme-hope.vuejs.press/guide/markdown/stylize/align.html
+
+      - title: Attrs
+        icon: code
+        details: Allow you to add attributes for Markdown content
+        link: https://theme-hope.vuejs.press/guide/markdown/stylize/attrs.html
+
+      - title: Superscript and subscript
+        icon: superscript
+        details: Inserting superscript and subscript
+        link: https://theme-hope.vuejs.press/guide/markdown/stylize/sup-sub.html
+
+      - title: Footnote
+        icon: quote-left
+        details: Your Markdown now support footnotes
+        link: https://theme-hope.vuejs.press/guide/markdown/content/footnote.html
+
+      - title: Mark
+        icon: highlighter
+        details: Mark and highlight contents
+        link: https://theme-hope.vuejs.press/guide/markdown/stylize/mark.html
+
+      - title: Spoiler
+        icon: eraser
+        details: Mark spoiler contents
+        link: https://theme-hope.vuejs.press/guide/markdown/stylize/spoiler.html
+
+      - title: Tasklist
+        icon: square-check
+        details: Use tasklist in Markdown
+        link: https://theme-hope.vuejs.press/guide/markdown/grammar/tasklist.html
+
+      - title: Image syntax
+        icon: image
+        details: improve syntax to specify size and color scheme
+        link: https://theme-hope.vuejs.press/guide/markdown/grammar/image.html
+
+      - title: Component Support
+        icon: puzzle-piece
+        details: Easily insert components in Markdown
+        link: https://theme-hope.vuejs.press/guide/component/grammar.html
+
+      - title: Components
+        icon: puzzle-piece
+        details: Common components out fo box
+        link: https://theme-hope.vuejs.press/guide/component/built-in.html
+
+      - title: Chart Support
+        icon: chart-simple
+        details: Display charts in Markdown
+        link: https://theme-hope.vuejs.press/guide/markdown/chart/chartjs.html
+
+      - title: Flowchart Support
+        icon: route
+        details: Create your flowchart in Markdown
+        link: https://theme-hope.vuejs.press/guide/markdown/chart/flowchart.html
+
+      - title: Mermaid Support
+        icon: chart-pie
+        details: Add mermaid diagram in Markdown
+        link: https://theme-hope.vuejs.press/guide/markdown/chart/mermaid.html
+
+      - title: Plantuml Support
+        icon: diagram-project
+        details: Add plantuml in Markdown
+        link: https://theme-hope.vuejs.press/guide/markdown/chart/plantuml.html
+
+      - title: Tex Support
+        icon: square-root-variable
+        details: Markdown now have Tex Support so you can write your formula
+        link: https://theme-hope.vuejs.press/guide/markdown/grammar/math.html
+
+      - title: Include snippet Support
+        icon: fa6-brands:markdown
+        details: split your docs with different parts and import them in Markdown
+        link: https://theme-hope.vuejs.press/guide/markdown/content/include.html
+
+      - title: Playground Support
+        icon: code
+        details: You can add playground in Markdown files
+        link: https://theme-hope.vuejs.press/guide/markdown/code/playground.html
+
+      - title: Kotlin playground Support
+        icon: fa6-brands:kickstarter
+        details: Reactive kotlin playground
+        link: https://theme-hope.vuejs.press/guide/markdown/code/kotlin-playground.html
+
+      - title: Vue playground Support
+        icon: fa6-brands:vuejs
+        details: Show living vue component in playground
+        link: https://theme-hope.vuejs.press/guide/markdown/code/vue-playground.html
+
+      - title: Sandpack playground Support
+        icon: code
+        details: A live coding environment driven by Sandpack.
+        link: https://theme-hope.vuejs.press/guide/markdown/code/sandpack.html
+
+      - title: Code Demo Support
+        icon: laptop-code
+        details: You can insert code demo easily
+        link: https://theme-hope.vuejs.press/guide/markdown/code/demo.html
+
+      - title: Presentation Support
+        icon: person-chalkboard
+        details: Insert presentation in Markdown files via Reveal.js
+        link: https://theme-hope.vuejs.press/guide/markdown/content/revealjs.html
+
+  - header: Customizable UI
+    description: Customizable outlook with full a11y support.
+    image: /assets/image/ui.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/9-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/9-dark.svg
+    highlights:
+      - title: Dark Mode
+        icon: circle-half-stroke
+        details: Switch between light and dark modes freely
+        link: https://theme-hope.vuejs.press/guide/interface/darkmode.html
+
+      - title: Customizable Theme Color
+        icon: palette
+        details: Set theme color with the brand color and even a picker
+        link: https://theme-hope.vuejs.press/guide/interface/theme-color.html
+
+      - title: More
+        icon: ellipsis
+        details: RTL layout, print support, fullscreen button, etc.
+        link: https://theme-hope.vuejs.press/guide/interface/others.html
+
+  - header: Improved layouts
+    description: An awesome responsive layout
+    image: /assets/image/layout.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/5-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/5-dark.svg
+    highlights:
+      - title: Navbar
+        icon: window-maximize
+        details: Fully customizable navbar with improved mobile support
+        link: https://theme-hope.vuejs.press/guide/layout/navbar.html
+
+      - title: Sidebar
+        icon: fas fa-window-maximize fa-rotate-270
+        details: Generate sidebar based on page headings and file structure
+        link: https://theme-hope.vuejs.press/guide/layout/sidebar.html
+
+      - title: Slide Page
+        icon: person-chalkboard
+        details: Adding slide pages to display things you like
+        link: https://theme-hope.vuejs.press/guide/layout/slides.html
+
+      - title: Other Layout Improvement
+        icon: object-group
+        details: Improved page nav and new breadcrumb, footer and toc. We also bring you a brand new homepage.
+        link: https://theme-hope.vuejs.press/guide/layout/
+
+  - header: New features
+    image: /assets/image/features.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/1-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/1-dark.svg
+    features:
+      - title: Catalog Page
+        icon: network-wired
+        details: Auto generating catalog page and out of box catalog component
+        link: https://theme-hope.vuejs.press/guide/feature/catalog.html
+
+      - title: Pageviews and Comments
+        icon: comment-dots
+        details: Pageview statistics and comment support with 4 comment service
+        link: https://theme-hope.vuejs.press/guide/feature/comment.html
+
+      - title: Article Information
+        icon: circle-info
+        details: Add author, writing date, reading time, word count and other information to your article
+        link: https://theme-hope.vuejs.press/guide/feature/page-info.html
+
+      - title: Article Encryption
+        icon: lock
+        details: Encrypt you articles based on page links, so that only the one you want could see them
+        link: https://theme-hope.vuejs.press/guide/feature/encrypt.html
+
+      - title: Search
+        icon: search
+        details: Support docsearch and client search
+        link: https://theme-hope.vuejs.press/guide/feature/search.html
+
+      - title: Code Block
+        icon: code
+        details: Customize code block themes, line number, highlight lines, copy button, etc.
+        link: https://theme-hope.vuejs.press/guide/markdown/code/fence.html.html
+
+      - title: Image Preview
+        icon: image
+        details: Support viewing, zooming, sharing your page images like a gallery
+        link: https://theme-hope.vuejs.press/guide/feature/photo-swipe.html
+
+  - header: Blogging
+    description: Create personal blog with theme
+    image: /assets/image/blog.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/5-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/5-dark.svg
+    highlights:
+      - title: Blog features
+        icon: blog
+        details: Listing your articles with their dates, tags and categories
+        link: https://theme-hope.vuejs.press/guide/blog/intro.html
+
+      - title: Blog homepage
+        icon: blog
+        details: New blog homepage
+        link: https://theme-hope.vuejs.press/guide/blog/home.html
+
+      - title: Blogger info
+        icon: circle-info
+        details: Customize avatar, name, slogan, introduction and social links
+        link: https://theme-hope.vuejs.press/guide/blog/blogger.html
+
+      - title: Timeline
+        icon: clock
+        details: Read through blog posts in a timeline
+        link: https://theme-hope.vuejs.press/guide/blog/timeline.html
+
+  - header: Advanced
+    description: Advanced features to improve site SEO and user experience
+    image: /assets/image/advanced.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/4-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/4-dark.svg
+    highlights:
+      - title: SEO Enhancement
+        icon: dumbbell
+        details: Optimize pages for search engines
+        link: https://theme-hope.vuejs.press/guide/advanced/seo.html
+
+      - title: Sitemap
+        icon: sitemap
+        details: Generate a Sitemap for your site
+        link: https://theme-hope.vuejs.press/guide/advanced/sitemap.html
+
+      - title: Feed
+        icon: rss
+        details: Generate feed to allow users to subscribe it
+        link: https://theme-hope.vuejs.press/guide/advanced/feed.html
+
+      - title: PWA
+        icon: mobile-screen
+        details: Make your site more like an APP
+        link: https://theme-hope.vuejs.press/guide/advanced/pwa.html
+
+copyright: false
+footer: Theme by <a href="https://theme-hope.vuejs.press/" target="_blank">VuePress Theme Hope</a> | MIT Licensed, Copyright © 2019-present Mr.Hope
+---
+
+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 of configuration items, please see [Project HomePage Layout Config](https://theme-hope.vuejs.press/guide/layout/home/).
--- a/src/demo/README.md
+++ b/src/demo/README.md
@@ -0,0 +1,9 @@
+---
+title: Features demo
+index: false
+icon: laptop-code
+category:
+  - Guide
+---
+
+<Catalog />
--- a/src/demo/disable.md
+++ b/src/demo/disable.md
@@ -0,0 +1,42 @@
+---
+title: Disabling layout and features
+icon: gears
+order: 4
+category:
+  - Guide
+tag:
+  - disable
+
+navbar: false
+sidebar: false
+
+breadcrumb: false
+pageInfo: false
+contributors: false
+editLink: false
+lastUpdated: false
+prev: false
+next: false
+comment: false
+footer: false
+
+backtotop: false
+---
+
+You can disable some function and layout on the page by setting the Frontmatter of the page.
+
+<!-- more -->
+
+This page is an demo that disables the following features:
+
+- Navbar
+- Sidebar
+- Breadcrumb
+- Page information
+- Contributors
+- Edit link
+- Update time
+- Prev/Next link
+- Comment
+- Footer
+- Back to top button
--- a/src/demo/encrypt.md
+++ b/src/demo/encrypt.md
@@ -0,0 +1,15 @@
+---
+icon: lock
+category:
+  - Guide
+tag:
+  - encryption
+---
+
+# Encryption Article
+
+The actual article content.
+
+Paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text.
+
+Paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text.
--- a/src/demo/layout.md
+++ b/src/demo/layout.md
@@ -0,0 +1,31 @@
+---
+title: Layout
+icon: object-group
+order: 2
+category:
+  - Guide
+tag:
+  - Layout
+---
+
+The layout contains:
+
+- [Navbar](https://theme-hope.vuejs.press/guide/layout/navbar.html)
+- [Sidebar](https://theme-hope.vuejs.press/guide/layout/sidebar.html)
+- [Footer](https://theme-hope.vuejs.press/guide/layout/footer.html)
+
+Also each page can contain:
+
+- [BreadCrumb](https://theme-hope.vuejs.press/guide/layout/breadcrumb.html)
+- [Title and information](https://theme-hope.vuejs.press/guide/feature/page-info.html)
+- [TOC (Table of Contents)](https://theme-hope.vuejs.press/guide/layout/page.html#header-list)
+- [Meta information including update time and contributors](https://theme-hope.vuejs.press/guide/feature/meta.html)
+- [Comments](https://theme-hope.vuejs.press/guide/feature/comment.html)
+
+The theme also has the following elements:
+
+- [Dark mode button](https://theme-hope.vuejs.press/guide/interface/darkmode.html)
+- [Back to top button](https://theme-hope.vuejs.press/guide/interface/others.html#back-to-top-button)
+- [Print button](https://theme-hope.vuejs.press/guide/interface/others.html#print-button)
+
+You can customize them in theme options and page frontmatter.
--- a/src/demo/markdown.md
+++ b/src/demo/markdown.md
@@ -0,0 +1,323 @@
+---
+title: Markdown Enhance
+icon: fa6-brands:markdown
+order: 2
+category:
+  - Guide
+tag:
+  - Markdown
+---
+
+VuePress basically generate pages from Markdown files. So you can use it to generate documentation or blog sites easily.
+
+You should create and write Markdown files, so that VuePress can convert them to different pages according to file structure.
+
+<!-- more -->
+
+## Markdown Introduction
+
+If you are a new learner and don't know how to write Markdown, please read [Markdown Intro](https://theme-hope.vuejs.press/cookbook/markdown/) and [Markdown Demo](https://theme-hope.vuejs.press/cookbook/markdown/demo.html).
+
+## Markdown Config
+
+VuePress introduce configuration for each markdown page using Frontmatter.
+
+::: important Frontmatter
+
+Frontmatter is an important concept in VuePress. If you don't know it, you need to read [Frontmatter Introduction](https://theme-hope.vuejs.press/cookbook/vuepress/page.html#front-matter).
+
+:::
+
+## Markdown Extension
+
+The Markdown content in VuePress will be parsed by [markdown-it](https://github.com/markdown-it/markdown-it), which supports [syntax extensions](https://github.com/markdown-it/markdown-it#syntax-extensions) via markdown-it plugins.
+
+### VuePress Enhancement
+
+To enrich document writing, VuePress has extended Markdown syntax.
+
+For these extensions, please read [Markdown extensions in VuePress](https://theme-hope.vuejs.press/basic/vuepress/markdown.html).
+
+### Theme Enhancement
+
+By using VuePress plugins, the theme extends more Markdown syntax and provides richer writing functions.
+
+#### Code Tabs
+
+::: code-tabs#shell
+
+@tab pnpm
+
+```bash
+pnpm add -D vuepress-theme-hope
+```
+
+@tab yarn
+
+```bash
+yarn add -D vuepress-theme-hope
+```
+
+@tab:active npm
+
+```bash
+npm i -D vuepress-theme-hope
+```
+
+:::
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/code/code-tabs.html)
+
+#### Tabs
+
+::: tabs#fruit
+
+@tab apple
+
+Apple
+
+@tab banana
+
+Banana
+
+@tab orange
+
+Orange
+
+:::
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/content/tabs.html)
+
+#### Footnote
+
+This text has footnote[^first].
+
+[^first]: This is footnote content
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/content/footnote.html)
+
+#### Include files
+
+<!-- @include: ./README.md{11-17} -->
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/content/include.html)
+
+#### TeX
+
+$$
+\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
+= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}
+$$
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/grammar/math.html)
+
+#### Tasklist
+
+- [x] Plan A
+- [ ] Plan B
+
+[View Detail](https://theme-hope.vuejs.press/guide/markdown/grammar/tasklist.html)
+
+#### Image Enhancement
+
+Support setting color scheme and size.
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/grammar/image.html)
+
+#### Superscript and Subscript
+
+19^th^ H~2~O
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/stylize/sup-sub.html)
+
+#### Component
+
+```component VPCard
+title: Mr.Hope
+desc: Where there is light, there is hope
+logo: https://mister-hope.com/logo.svg
+link: https://mister-hope.com
+background: rgba(253, 230, 138, 0.15)
+```
+
+- [View Detail](https://theme-hope.vuejs.press/guide/component/grammar.html)
+
+#### Hint box and GFM alerts
+
+::: v-pre
+
+Safely use {{ variable }} in Markdown.
+
+:::
+
+::: info Custom Title
+
+A custom information container with `code`, [link](#markdown-extension).
+
+```js
+const a = 1;
+```
+
+:::
+
+::: tip Custom Title
+
+A custom tip container
+
+:::
+
+::: warning Custom Title
+
+A custom warning container
+
+:::
+
+::: caution Custom Title
+
+A custom caution container
+
+:::
+
+::: details Custom Title
+
+A custom details container
+
+:::
+
+- [GitHub Alert](https://theme-hope.vuejs.press/guide/markdown/stylize/alert.html)
+- [Hint boxes](https://theme-hope.vuejs.press/guide/markdown/stylize/hint.html)
+
+#### Align
+
+::: center
+
+I am center
+
+:::
+
+::: right
+
+I am right align
+
+:::
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/stylize/align.html)
+
+#### Attrs
+
+A **word**{#word} having id.
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/stylize/attrs.html)
+
+#### Mark
+
+You can mark ==important words== .
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/stylize/mark.html)
+
+#### Spoiler
+
+VuePress Theme Hope is !!powerful!!.
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/stylize/spoiler.html)
+
+#### Stylize
+
+Donate Mr.Hope a cup of coffee. _Recommended_
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/stylize/stylize.html)
+
+#### Reveal.js
+
+<iframe src="https://ecosystem.vuejs.press/plugins/markdown/revealjs/demo.html" width="100%" height="420"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/content/revealjs.html)
+
+#### Chart.js
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/chartjs.html" width="100%" height="450"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/chart/chartjs.html)
+
+#### ECharts
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/echarts.html" width="100%" height="800"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/chart/echarts.html)
+
+#### Flowchart
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/flowchart.html" width="100%" height="450"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/chart/flowchart.html)
+
+#### MarkMap
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/markmap.html" width="100%" height="380"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/chart/markmap.html)
+
+#### Mermaid
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/mermaid.html" width="100%" height="620"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/chart/mermaid.html)
+
+#### PlantUML
+
+@startuml
+Alice -> Bob: Authentication Request
+
+alt successful case
+
+    Bob -> Alice: Authentication Accepted
+
+else some kind of failure
+
+    Bob -> Alice: Authentication Failure
+    group My own label
+    Alice -> Log : Log attack start
+        loop 1000 times
+            Alice -> Bob: DNS Attack
+        end
+    Alice -> Log : Log attack end
+    end
+
+else Another type of failure
+
+Bob -> Alice: Please repeat
+
+end
+@enduml
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/chart/plantuml.html)
+
+#### Code Demo
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/code-demo.html" width="100%" height="450"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/code/demo.html)
+
+#### Playground
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/playground.html" width="100%" height="480"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/code/playground.html)
+
+#### Kotlin Playground
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/kotlin-playground.html" width="100%" height="220"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/code/kotlin-playground.html)
+
+#### Sandpack Playground
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/sandpack.html" width="100%" height="380"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/code/sandpack.html)
+
+#### Vue Playground
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/vue-playground.html" width="100%" height="380"/>
+
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/code/vue-playground.html)
--- a/src/demo/page.md
+++ b/src/demo/page.md
@@ -0,0 +1,121 @@
+---
+# This is the title of the article
+title: Page Config
+# This is the icon of the page
+icon: file
+# This control sidebar order
+order: 3
+# Set author
+author: Ms.Hope
+# Set writing time
+date: 2020-01-01
+# A page can have multiple categories
+category:
+  - Guide
+# A page can have multiple tags
+tag:
+  - Page config
+  - Guide
+# this page is sticky in article list
+sticky: true
+# this page will appear in starred articles
+star: true
+# You can customize footer content
+footer: Footer content for test
+# You can customize copyright content
+copyright: No Copyright
+---
+
+Content before `more` comment is regarded as page excerpt.
+
+<!-- more -->
+
+## Page Title
+
+The first H1 title in Markdown will be regarded as page title.
+
+You can also set title in Markdown's Frontmatter:
+
+```md
+---
+title: Page Title
+---
+```
+
+## Page Information
+
+You can set page information in Markdown's Frontmatter.
+
+- The author is Ms.Hope.
+- The writing date is January 1, 2020
+- Category is "Guide"
+- Tags are "Page Config" and "Guide"
+
+## Page Content
+
+You are free to write your Markdown here.
+
+::: tip Assets
+
+- You can place images besides your Markdown files nd use **relative links**.
+- For images in `.vuepress/public` directory, please use absolute links (i.e.: starting with `/`).
+
+:::
+
+## Components
+
+Each markdown page is converted into a Vue component, which means you can use Vue syntax in Markdown:
+
+{{ 1 + 1 }}
+
+<!-- markdownlint-disable MD033 -->
+
+<ul>
+  <li v-for="i in 3">{{ i }}</li>
+</ul>
+
+<!-- markdownlint-enable MD033 -->
+
+You can also create and import your own components.
+
+<MyComponent />
+
+<script setup>
+import { defineComponent, h, ref } from 'vue';
+
+const MyComponent = defineComponent({
+  setup() {
+    const input = ref('Hello world!');
+    const onInput = (e) => {
+      input.value = e.target.value;
+    };
+
+    return () => [
+      h('p', [
+        h('span','Input: '),
+        h('input', {
+          value: input.value,
+          onInput,
+        }),
+      ]),
+      h('p', [h('span','Output: '), input.value]),
+    ];
+  },
+});
+</script>
+
+---
+
+The theme contains some useful components. Here are some examples:
+
+- A dark blue badge text badge at the end of line. <Badge text="Badge text" color="#242378" />
+
+- A card:
+
+  ```component VPCard
+  title: Mr.Hope
+  desc: Where there is light, there is hope
+  logo: https://mister-hope.com/logo.svg
+  link: https://mister-hope.com
+  background: rgba(253, 230, 138, 0.15)
+  ```
--- a/src/guide/README.md
+++ b/src/guide/README.md
@@ -0,0 +1,16 @@
+---
+title: Guide
+icon: lightbulb
+---
+
+## Highlight Features
+
+### Bar
+
+- [baz](bar/baz.md)
+- ...
+
+### Foo
+
+- [ray](foo/ray.md)
+- ...
--- a/src/guide/bar/README.md
+++ b/src/guide/bar/README.md
@@ -0,0 +1,13 @@
+---
+title: Bar feature
+icon: lightbulb
+---
+
+## Introduction
+
+We support bar feature, ...
+
+## Details
+
+- [baz](baz.md)
+- ...
--- a/src/guide/bar/baz.md
+++ b/src/guide/bar/baz.md
@@ -0,0 +1,6 @@
+---
+title: Baz
+icon: circle-info
+---
+
+Feature details here.
--- a/src/guide/foo/README.md
+++ b/src/guide/foo/README.md
@@ -0,0 +1,13 @@
+---
+title: Foo feature
+icon: lightbulb
+---
+
+## Introduction
+
+We support foo feature, ...
+
+## Details
+
+- [ray](ray.md)
+- ...
--- a/src/guide/foo/ray.md
+++ b/src/guide/foo/ray.md
@@ -0,0 +1,6 @@
+---
+title: Ray
+icon: circle-info
+---
+
+Feature details here.
--- a/src/portfolio.md
+++ b/src/portfolio.md
@@ -0,0 +1,23 @@
+---
+home: true
+portfolio: true
+title: Portfolio Home
+icon: house
+name: Conan Edogawa
+avatar: https://theme-hope-assets.vuejs.press/hero/conan.png
+
+titles:
+  - Genius young detective
+  - Lan’s childhood sweetheart
+  - The biggest rival of the black organization
+
+footer: false
+---
+
+## Description
+
+This is a portfolio home page demo.
+
+To use this layout, you should set `home: true` and `portfolio: true` in the page front matter.
+
+For related configuration docs, please see [portfolio homepage](https://theme-hope.vuejs.press/guide/blog/home.html#portfolio-style-homepage).
--- a/src/zh/README.md
+++ b/src/zh/README.md
@@ -0,0 +1,326 @@
+---
+home: true
+icon: house
+title: 项目主页
+heroImage: https://theme-hope-assets.vuejs.press/logo.svg
+bgImage: https://theme-hope-assets.vuejs.press/bg/6-light.svg
+bgImageDark: https://theme-hope-assets.vuejs.press/bg/6-dark.svg
+bgImageStyle:
+  background-attachment: fixed
+heroText: 项目名称
+tagline: 你可以在这里放置或是整个项目的描述。
+actions:
+  - text: 使用指南
+    icon: lightbulb
+    link: ./demo/
+    type: primary
+
+  - text: 文档
+    link: ./guide/
+
+highlights:
+  - header: 易于安装
+    image: /assets/image/box.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/3-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/3-dark.svg
+    highlights:
+      - title: 运行 <code>pnpm create vuepress-theme-hope hope-project</code> 以创建一个新的主题项目。
+      - title: 在已有项目根目录下运行 <code>pnpm create vuepress-theme-hope add .</code> 以在项目中添加主题。
+
+  - header: 在 Markdown 中添加你想要的内容
+    description: 我们扩展了标准的 CommonMark 规范，为你添加了成吨功能。
+    image: /assets/image/markdown.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
+    bgImageStyle:
+      background-repeat: repeat
+      background-size: initial
+    features:
+      - title: 链接检查
+        icon: clipboard-check
+        details: 检查 Markdown 链接
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/others.html#link-check
+
+      - title: 提示容器
+        icon: box-archive
+        details: 用样式装饰 Markdown 内容
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/stylize/hint.html
+
+      - title: GFM 警告
+        icon: bell
+        details: GFM 风格的警告容器
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/stylize/alert.html
+
+      - title: 选项卡
+        icon: table-columns
+        details: 使用选项卡对相似内容进行分组
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/content/tabs.html
+
+      - title: 代码组
+        icon: code
+        details: 使用选项卡对相似代码进行分组
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/code/code-tabs.html
+
+      - title: 自定义对齐
+        icon: align-center
+        details: Markdown 中对内容进行自定义对齐
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/stylize/align.html
+
+      - title: 自定义属性
+        icon: code
+        details: 为 Markdown 元素添加属性
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/stylize/attrs.html
+
+      - title: 上下角标
+        icon: superscript
+        details: 轻松在 Markdown 中添加上下角标
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/stylize/sup-sub.html
+
+      - title: 脚注
+        icon: quote-left
+        details: 在内容中插入脚注
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/content/footnote.html
+
+      - title: 标记
+        icon: highlighter
+        details: 标记并高亮内容
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/stylize/mark.html
+
+      - title: 剧透
+        icon: eraser
+        details: 添加剧透标记支持
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/stylize/spoiler.html
+
+      - title: 任务列表
+        icon: square-check
+        details: 轻松插入任务列表
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/grammar/tasklist.html
+
+      - title: 图片语法
+        icon: image
+        details: 使用改进的语法指定图片大小与颜色模式
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/grammar/image.html
+
+      - title: 组件支持
+        icon: puzzle-piece
+        details: 在 Markdown 中轻松插入组件
+        link: https://theme-hope.vuejs.press/zh/guide/component/grammar.html
+
+      - title: 组件
+        icon: puzzle-piece
+        details: 开箱即用的常用组件
+        link: https://theme-hope.vuejs.press/zh/guide/component/built-in.html
+
+      - title: Chart.js 支持
+        icon: chart-simple
+        details: 在 Markdown 中展示 Chart.js 图表
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/chart/chartjs.html
+
+      - title: 流程图支持
+        icon: route
+        details: 在 Markdown 中直接写出流程图
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/chart/flowchart.html
+
+      - title: Mermaid 支持
+        icon: chart-pie
+        details: 在 Markdown 中添加 Mermaid 图例
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/chart/mermaid.html
+
+      - title: Plantuml 支持
+        icon: diagram-project
+        details: 在 Markdown 中添加 Plant UML 图表
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/chart/plantuml.html
+
+      - title: Tex 支持
+        icon: square-root-variable
+        details: Markdown 现在也可以支持 Tex 语法以显示公式
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/grammar/math.html
+
+      - title: 导入文件支持
+        icon: fa6-brands:markdown
+        details: 将你的文档分段，并在 Markdown 中导入
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/content/include.html
+
+      - title: 交互演示支持
+        icon: code
+        details: 你可以在 Markdown 中添加交互演示
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/code/playground.html
+
+      - title: Kotlin 交互演示支持
+        icon: fa6-brands:kickstarter
+        details: 响应式的 Kotlin 演示
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/code/kotlin-playground.html
+
+      - title: Vue 交互演示支持
+        icon: fa6-brands:vuejs
+        details: 在交互演示中展示 Vue 组件
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/code/vue-playground.html
+
+      - title: Sandpack 交互演示支持
+        icon: code
+        details: Sandpack 驱动的实时的编码环境
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/code/sandpack.html
+
+      - title: 代码案例支持
+        icon: laptop-code
+        details: 你可以很方便的插入代码案例
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/code/demo.html
+
+      - title: 幻灯片支持
+        icon: person-chalkboard
+        details: 通过 Reveal.js 在 Markdown 中插入幻灯片
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/content/revealjs.html
+
+  - header: 可定制的页面
+    description: 完整无障碍支持的可定制外观
+    image: /assets/image/ui.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/9-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/9-dark.svg
+    highlights:
+      - title: 深色模式
+        icon: circle-half-stroke
+        details: 可以自由切换浅色模式与深色模式
+        link: https://theme-hope.vuejs.press/zh/guide/interface/darkmode.html
+
+      - title: 主题色切换
+        icon: palette
+        details: 支持自定义主题色并允许用户在预设的主题颜色之间切换
+        link: https://theme-hope.vuejs.press/zh/guide/interface/theme-color.html
+
+      - title: 更多
+        icon: ellipsis
+        details: RTL 布局，打印支持，全局按钮等
+        link: https://theme-hope.vuejs.press/zh/guide/interface/others.html
+
+  - header: 布局
+    description: 一个完美的响应式布局。
+    image: /assets/image/layout.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/5-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/5-dark.svg
+    highlights:
+      - title: 导航栏
+        icon: window-maximize
+        details: 完全可定制的导航栏以及改进的移动端外观
+        link: https://theme-hope.vuejs.press/zh/guide/layout/navbar.html
+
+      - title: 侧边栏
+        icon: fas fa-window-maximize fa-rotate-270
+        details: 从文档标题或文件结构中自动生成侧边栏
+        link: https://theme-hope.vuejs.press/zh/guide/layout/sidebar.html
+
+      - title: 幻灯片页面
+        icon: person-chalkboard
+        details: 添加幻灯片页面以显示你喜欢的内容
+        link: https://theme-hope.vuejs.press/zh/guide/layout/slides.html
+
+      - title: 布局增强
+        icon: object-group
+        details: 添加路径导航、页脚、改进的导航栏、改进的页面导航等。
+        link: https://theme-hope.vuejs.press/zh/guide/layout/
+
+      - title: 更多
+        icon: ellipsis
+        details: RTL 布局，打印支持，全局按钮等
+        link: https://theme-hope.vuejs.press/zh/guide/interface/others.html
+
+  - header: 新功能
+    image: /assets/image/features.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/1-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/1-dark.svg
+    features:
+      - title: 目录页面
+        icon: network-wired
+        details: 自动生成目录页以及开箱即用的目录组件
+        link: https://theme-hope.vuejs.press/zh/guide/feature/catalog.html
+
+      - title: 浏览量与评论
+        icon: comment-dots
+        details: 配合 4 个评论服务开启阅读量统计与评论支持
+        link: https://theme-hope.vuejs.press/zh/guide/feature/comment.html
+
+      - title: 文章信息
+        icon: circle-info
+        details: 为你的文章添加作者、写作日期、预计阅读时间、字数统计等信息
+        link: https://theme-hope.vuejs.press/zh/guide/feature/page-info.html
+
+      - title: 文章加密
+        icon: lock
+        details: 你可以为你的特定页面或特定目录进行加密，以便陌生人不能随意访问它们
+        link: https://theme-hope.vuejs.press/zh/guide/feature/encrypt.html
+
+      - title: 搜索支持
+        icon: search
+        details: 支持 docsearch 和基于客户端的搜索
+        link: https://theme-hope.vuejs.press/zh/guide/feature/search.html
+
+      - title: 代码块
+        icon: code
+        details: 自定义代码块主题、行号、行高亮、复制按钮等
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/code/fence.html.html
+
+      - title: 图片预览
+        icon: image
+        details: 像相册一样允许你浏览、缩放并分享你的页面图片
+        link: https://theme-hope.vuejs.press/zh/guide/feature/photo-swipe.html
+
+  - header: 博客
+    description: 通过主题创建个人博客
+    image: /assets/image/blog.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/5-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/5-dark.svg
+    highlights:
+      - title: 博客功能
+        icon: blog
+        details: 通过文章的日期、标签和分类展示文章
+        link: https://theme-hope.vuejs.press/zh/guide/blog/intro.html
+
+      - title: 博客主页
+        icon: house
+        details: 全新博客主页
+        link: https://theme-hope.vuejs.press/zh/guide/blog/home.html
+
+      - title: 博主信息
+        icon: circle-info
+        details: 自定义名称、头像、座右铭和社交媒体链接
+        link: https://theme-hope.vuejs.press/zh/guide/blog/blogger.html
+
+      - title: 时间线
+        icon: clock
+        details: 在时间线中浏览和通读博文
+        link: https://theme-hope.vuejs.press/zh/guide/blog/timeline.html
+
+  - header: 高级
+    description: 增强站点与用户体验的高级功能
+    image: /assets/image/advanced.svg
+    bgImage: https://theme-hope-assets.vuejs.press/bg/4-light.svg
+    bgImageDark: https://theme-hope-assets.vuejs.press/bg/4-dark.svg
+    highlights:
+      - title: SEO 增强
+        icon: dumbbell
+        details: 将最终生成的网页针对搜索引擎进行优化。
+        link: https://theme-hope.vuejs.press/zh/guide/advanced/seo.html
+
+      - title: Sitemap
+        icon: sitemap
+        details: 自动为你的网站生成 Sitemap
+        link: https://theme-hope.vuejs.press/zh/guide/advanced/sitemap.html
+
+      - title: Feed 支持
+        icon: rss
+        details: 生成你的 Feed，并通知你的用户订阅它
+        link: https://theme-hope.vuejs.press/zh/guide/advanced/feed.html
+
+      - title: PWA 支持
+        icon: mobile-screen
+        details: 让你的网站更像一个 APP
+        link: https://theme-hope.vuejs.press/zh/guide/advanced/pwa.html
+
+copyright: false
+footer: 使用 <a href="https://theme-hope.vuejs.press/zh/" target="_blank">VuePress Theme Hope</a> 主题 | MIT 协议, 版权所有 © 2019-至今 Mr.Hope
+---
+
+这是项目主页的案例。你可以在这里放置你的主体内容。
+
+想要使用此布局，你需要在页面 front matter 中设置 `home: true`。
+
+配置项的相关说明详见 [项目主页配置](https://theme-hope.vuejs.press/zh/guide/layout/home/)。
--- a/src/zh/demo/README.md
+++ b/src/zh/demo/README.md
@@ -0,0 +1,9 @@
+---
+title: 主要功能与配置演示
+index: false
+icon: laptop-code
+category:
+  - 使用指南
+---
+
+<Catalog />
--- a/src/zh/demo/disable.md
+++ b/src/zh/demo/disable.md
@@ -0,0 +1,42 @@
+---
+title: 布局与功能禁用
+icon: gears
+order: 4
+category:
+  - 使用指南
+tag:
+  - 禁用
+
+navbar: false
+sidebar: false
+
+breadcrumb: false
+pageInfo: false
+contributors: false
+editLink: false
+lastUpdated: false
+prev: false
+next: false
+comment: false
+footer: false
+
+backtotop: false
+---
+
+你可以通过设置页面的 Frontmatter，在页面禁用功能与布局。
+
+<!-- more -->
+
+本页面就是一个示例，禁用了如下功能:
+
+- 导航栏
+- 侧边栏
+- 路径导航
+- 页面信息
+- 贡献者
+- 编辑此页链接
+- 更新时间
+- 上一篇/下一篇 链接
+- 评论
+- 页脚
+- 返回顶部按钮
--- a/src/zh/demo/encrypt.md
+++ b/src/zh/demo/encrypt.md
@@ -0,0 +1,15 @@
+---
+icon: lock
+category:
+  - 使用指南
+tag:
+  - 加密
+---
+
+# 密码加密的文章
+
+实际的文章内容。
+
+段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字。
+
+段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字。
--- a/src/zh/demo/layout.md
+++ b/src/zh/demo/layout.md
@@ -0,0 +1,31 @@
+---
+title: 布局
+icon: object-group
+order: 2
+category:
+  - 指南
+tag:
+  - 布局
+---
+
+布局包括:
+
+- [导航栏](https://theme-hope.vuejs.press/zh/guide/layout/navbar.html)
+- [侧边栏](https://theme-hope.vuejs.press/zh/guide/layout/sidebar.html)
+- [页脚](https://theme-hope.vuejs.press/zh/guide/layout/footer.html)
+
+同时每个页面包含:
+
+- [路径导航](https://theme-hope.vuejs.press/zh/guide/layout/breadcrumb.html)
+- [标题和页面信息](https://theme-hope.vuejs.press/zh/guide/feature/page-info.html)
+- [TOC (文章标题列表)](https://theme-hope.vuejs.press/zh/guide/layout/page.html#标题列表)
+- [贡献者、更新时间等页面元信息](https://theme-hope.vuejs.press/guide/feature/meta.html)
+- [评论](https://theme-hope.vuejs.press/zh/guide/feature/comment.html)
+
+主题也带有以下元素:
+
+- [夜间模式按钮](https://theme-hope.vuejs.press/zh/guide/interface/darkmode.html)
+- [返回顶部按钮](https://theme-hope.vuejs.press/guide/interface/others.html#返回顶部按钮)
+- [打印按钮](https://theme-hope.vuejs.press/guide/interface/others.html#打印按钮)
+
+你可以在主题选项和页面的 frontmatter 中自定义它们。
--- a/src/zh/demo/markdown.md
+++ b/src/zh/demo/markdown.md
@@ -0,0 +1,323 @@
+---
+title: Markdown 展示
+icon: fa6-brands:markdown
+order: 2
+category:
+  - 使用指南
+tag:
+  - Markdown
+---
+
+VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。
+
+你需要创建并编写 Markdown，以便 VuePress 可以根据文件结构将它们转换为不同的页面。
+
+<!-- more -->
+
+## Markdown 介绍
+
+如果你是一个新手，还不会编写 Markdown，请先阅读 [Markdown 介绍](https://theme-hope.vuejs.press/zh/cookbook/markdown/) 和 [Markdown 演示](https://theme-hope.vuejs.press/zh/cookbook/markdown/demo.html)。
+
+## Markdown 配置
+
+VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。
+
+::: important Frontmatter
+
+Frontmatter 是 VuePress 中很重要的一个概念，请阅读 [Frontmatter 介绍](https://theme-hope.vuejs.press/zh/cookbook/vuepress/page.html#front-matter) 了解详情。
+
+:::
+
+## Markdown 扩展
+
+VuePress 会使用 [markdown-it](https://github.com/markdown-it/markdown-it) 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 [语法扩展](https://github.com/markdown-it/markdown-it#syntax-extensions) 。
+
+### VuePress 扩展
+
+为了丰富文档写作，VuePress 对 Markdown 语法进行了扩展。
+
+关于这些扩展，请阅读 [VuePress 中的 Markdown 扩展](https://theme-hope.vuejs.press/zh/cookbook/vuepress/markdown.html)。
+
+### 主题扩展
+
+通过 VuePress 插件，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。
+
+#### 选项卡
+
+::: tabs#fruit
+
+@tab apple
+
+Apple
+
+@tab banana
+
+Banana
+
+@tab orange
+
+Orange
+
+:::
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/content/tabs.html)
+
+#### 脚注
+
+此文字有脚注[^first].
+
+[^first]: 这是脚注内容
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/content/footnote.html)
+
+#### 导入文件
+
+<!-- @include: ./README.md{11-17} -->
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/content/include.html)
+
+#### TeX 语法
+
+$$
+\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
+= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}
+$$
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/grammar/math.html)
+
+#### 任务列表
+
+- [x] 计划 1
+- [ ] 计划 2
+
+[查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/grammar/tasklist.html)
+
+### 图片增强
+
+支持为图片设置颜色模式和大小。
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/grammar/image.html)
+
+#### 上下角标
+
+19^th^ H~2~O
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize/sup-sub.html)
+
+#### 组件
+
+```component VPCard
+title: Mr.Hope
+desc: Where there is light, there is hope
+logo: https://mister-hope.com/logo.svg
+link: https://mister-hope.com
+background: rgba(253, 230, 138, 0.15)
+```
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/component/grammar.html)
+
+#### 提示容器
+
+::: v-pre
+
+安全的在 Markdown 中使用 {{ variable }}。
+
+:::
+
+::: info 自定义标题
+
+信息容器，包含 `代码` 与 [链接](#提示容器)。
+
+```js
+const a = 1;
+```
+
+:::
+
+::: tip 自定义标题
+
+提示容器
+
+:::
+
+::: warning 自定义标题
+
+警告容器
+
+:::
+
+::: caution 自定义标题
+
+危险容器
+
+:::
+
+::: details 自定义标题
+
+详情容器
+
+:::
+
+- [GitHub 警示](https://theme-hope.vuejs.press/zh/guide/markdown/stylize/alert.html)
+- [提示框](https://theme-hope.vuejs.press/zh/guide/markdown/stylize/hint.html)
+
+#### 自定义对齐
+
+::: center
+
+我是居中的
+
+:::
+
+::: right
+
+我在右对齐
+
+:::
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize/align.html)
+
+#### 属性支持
+
+一个拥有 ID 的 **单词**{#word}。
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize/attrs.html)
+
+#### 标记
+
+你可以标记 ==重要的内容== 。
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize/mark.html)
+
+#### 剧透
+
+VuePress Theme Hope !!十分强大!!.
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize/spoiler.html)
+
+#### 样式化
+
+向 Mr.Hope 捐赠一杯咖啡。 _Recommended_
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize/stylize.html)
+
+#### 图表
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/chartjs.html" width="100%" height="450"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/chart/chartjs.html)
+
+#### ECharts
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/echarts.html" width="100%" height="800"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/chart/echarts.html)
+
+#### 流程图
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/flowchart.html" width="100%" height="450"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/chart/flowchart.html)
+
+#### MarkMap
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/markmap.html" width="100%" height="380"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/chart/markmap.html)
+
+#### Mermaid
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/mermaid.html" width="100%" height="620"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/chart/mermaid.html)
+
+#### PlantUML
+
+@startuml
+Alice -> Bob: 认证请求
+
+alt 成功情况
+
+    Bob -> Alice: 认证接受
+
+else 某种失败情况
+
+    Bob -> Alice: 认证失败
+    group 我自己的标签
+    Alice -> Log : 开始记录攻击日志
+        loop 1000次
+            Alice -> Bob: DNS 攻击
+        end
+    Alice -> Log : 结束记录攻击日志
+    end
+
+else 另一种失败
+
+    Bob -> Alice: 请重复
+
+end
+@enduml
+
+- [View Detail](https://theme-hope.vuejs.press/zh/guide/markdown/chart/plantuml.html)
+
+#### 代码块
+
+::: code-tabs
+
+@tab pnpm
+
+```bash
+pnpm add -D vuepress-theme-hope
+```
+
+@tab yarn
+
+```bash
+yarn add -D vuepress-theme-hope
+```
+
+@tab:active npm
+
+```bash
+npm i -D vuepress-theme-hope
+```
+
+:::
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/code/code-tabs.html)
+
+#### 代码演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/code-demo.html" width="100%" height="450"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/code/demo.html)
+
+#### 交互演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/playground.html" width="100%" height="480"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/code/playground.html)
+
+#### Kotlin 交互演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/kotlin-playground.html" width="100%" height="220"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/code/kotlin-playground.html)
+
+#### Sandpack 交互演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/sandpack.html" width="100%" height="380"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/code/sandpack.html)
+
+#### Vue 交互演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/vue-playground.html" width="100%" height="380"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/code/vue-playground.html)
+
+#### 幻灯片
+
+<iframe src="https://ecosystem.vuejs.press/zh/plugins/markdown/revealjs/demo.html" width="100%" height="420"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/content/revealjs.html)
--- a/src/zh/demo/page.md
+++ b/src/zh/demo/page.md
@@ -0,0 +1,125 @@
+---
+# 这是文章的标题
+title: 页面配置
+# 你可以自定义封面图片
+cover: /assets/images/cover1.jpg
+# 这是页面的图标
+icon: file
+# 这是侧边栏的顺序
+order: 3
+# 设置作者
+author: Ms.Hope
+# 设置写作时间
+date: 2020-01-01
+# 一个页面可以有多个分类
+category:
+  - 使用指南
+# 一个页面可以有多个标签
+tag:
+  - 页面配置
+  - 使用指南
+# 此页面会在文章列表置顶
+sticky: true
+# 此页面会出现在星标文章中
+star: true
+# 你可以自定义页脚
+footer: 这是测试显示的页脚
+# 你可以自定义版权信息
+copyright: 无版权
+---
+
+`more` 注释之前的内容被视为文章摘要。
+
+<!-- more -->
+
+## 页面标题
+
+The first H1 title in Markdown will be regarded as page title.
+
+Markdown 中的第一个 H1 标题会被视为页面标题。
+
+你可以在 Markdown 的 Frontmatter 中设置页面标题。
+
+```md
+---
+title: 页面标题
+---
+```
+
+## 页面信息
+
+你可以在 Markdown 的 Frontmatter 中设置页面信息。
+
+- 作者设置为 Ms.Hope。
+- 写作日期为 2020 年 1 月 1 日
+- 分类为 “使用指南”
+- 标签为 “页面配置” 和 “使用指南”
+
+## 页面内容
+
+你可以自由在这里书写你的 Markdown。
+
+::: tip 图片引入
+
+- 你可以将图片和 Markdown 文件放置在一起使用相对路径进行引用。
+- 对于 `.vuepress/public` 文件夹的图片，请使用绝对链接 `/` 进行引用。
+
+:::
+
+## 组件
+
+每个 Markdown 页面都会被转换为一个 Vue 组件，这意味着你可以在 Markdown 中使用 Vue 语法：
+
+{{ 1 + 1 }}
+
+<!-- markdownlint-disable MD033 -->
+
+<ul>
+  <li v-for="i in 3">{{ i }}</li>
+</ul>
+
+<!-- markdownlint-enable MD033 -->
+
+你也可以创建并引入你自己的组件。
+
+<MyComponent />
+
+<script setup>
+import { defineComponent, h, ref } from 'vue';
+
+const MyComponent = defineComponent({
+  setup() {
+    const input = ref('Hello world!');
+    const onInput = (e) => {
+      input.value = e.target.value;
+    };
+
+    return () => [
+      h('p', [
+        h('span','输入: '),
+        h('input', {
+          value: input.value,
+          onInput,
+        }),
+      ]),
+      h('p', [h('span','输出: '), input.value]),
+    ];
+  },
+});
+</script>
+
+---
+
+主题包含一些有用的组件。这里是一些例子:
+
+- 文字结尾应该有深蓝色的 徽章文字 徽章。 <Badge text="徽章文字" color="#242378" />
+
+- 一个卡片:
+
+  ```component VPCard
+  title: Mr.Hope
+  desc: Where there is light, there is hope
+  logo: https://mister-hope.com/logo.svg
+  link: https://mister-hope.com
+  background: rgba(253, 230, 138, 0.15)
+  ```
--- a/src/zh/guide/README.md
+++ b/src/zh/guide/README.md
@@ -0,0 +1,16 @@
+---
+title: 指南
+icon: lightbulb
+---
+
+## 功能亮点
+
+### Bar
+
+- [baz](bar/baz.md)
+- ...
+
+### Foo
+
+- [ray](foo/ray.md)
+- ...
--- a/src/zh/guide/bar/README.md
+++ b/src/zh/guide/bar/README.md
@@ -0,0 +1,13 @@
+---
+title: Bar 功能
+icon: lightbulb
+---
+
+## 介绍
+
+我们支持 bar 功能，...
+
+## 详情
+
+- [baz](baz.md)
+- ...
--- a/src/zh/guide/bar/baz.md
+++ b/src/zh/guide/bar/baz.md
@@ -0,0 +1,6 @@
+---
+title: Baz
+icon: circle-info
+---
+
+功能详情...
--- a/src/zh/guide/foo/README.md
+++ b/src/zh/guide/foo/README.md
@@ -0,0 +1,13 @@
+---
+title: Foo 功能
+icon: lightbulb
+---
+
+## 介绍
+
+我们支持 foo 功能，...
+
+## 详情
+
+- [ray](ray.md)
+- ...
--- a/src/zh/guide/foo/ray.md
+++ b/src/zh/guide/foo/ray.md
@@ -0,0 +1,6 @@
+---
+title: Ray
+icon: circle-info
+---
+
+功能详情...
--- a/src/zh/portfolio.md
+++ b/src/zh/portfolio.md
@@ -0,0 +1,24 @@
+---
+home: true
+portfolio: true
+title: 档案主页
+icon: house
+welcome: 👋 你好，我是
+name: 江户川柯南
+avatar: https://theme-hope-assets.vuejs.press/hero/conan.png
+
+titles:
+  - 天才少年侦探
+  - 小兰的青梅竹马
+  - 黑衣组织的最大对手
+
+footer: false
+---
+
+## 介绍
+
+这是一个档案主页的案例。
+
+要使用此布局，你应该在页面 Frontmatter 中设置 `home: true` 和 `portfolio: true`。
+
+相关配置文档请见 [档案主页](https://theme-hope.vuejs.press/zh/guide/blog/home.html#档案类型主页)。
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "target": "ES2022"
+  },
+  "include": [
+    "src/.vuepress/**/*.ts",
+    "src/.vuepress/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path fill="#FDD7AD" d="M512 0 335.448 88.272l-70.616 35.312-70.624 35.312-176.552 88.28v529.648L512 1024l494.344-247.176V247.176z"/><path fill="#CBB292" d="m759.176 370.76-70.624 35.304-494.344-247.168 70.624-35.312zM512 494.344V1024L17.656 776.824V247.176z"/><path fill="#7F6E5D" d="M1006.344 247.168v529.656L512 1024V494.344l176.552-88.28v70.624l141.24-70.624v-70.616z"/><path fill="#7F5B53" d="M829.792 335.448v70.624L688.56 476.68v-70.624z"/><path fill="#CBB292" d="m829.792 335.448-70.624 35.312-494.344-247.176 70.624-35.312z"/><path fill="#2C3E50" d="m682.52 550.32 157.032-78.512a17.656 17.656 0 0 1 25.552 15.792v9.32a52.96 52.96 0 0 1-29.28 47.376L678.8 622.8a17.656 17.656 0 0 1-25.552-15.792v-9.312a52.96 52.96 0 0 1 29.28-47.376z"/></svg>
				`@@ -0,0 +1 @@`
				<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>