diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 00000000..9176bfde --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,5 @@ + +node_modules/ +./.vuepress/.cache/ +./.vuepress/.temp/ +./.vuepress/dist/ diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts new file mode 100644 index 00000000..8a401869 --- /dev/null +++ b/docs/.vuepress/config.ts @@ -0,0 +1,15 @@ +import { defineUserConfig } from "vuepress"; +import theme from "./theme.js"; + +export default defineUserConfig({ + base: "/", + + lang: "zh-CN", + title: "文档演示", + description: "vuepress-theme-hope 的文档演示", + + theme, + + // 和 PWA 一起启用 + // shouldPrefetch: false, +}); diff --git a/docs/.vuepress/navbar.ts b/docs/.vuepress/navbar.ts new file mode 100644 index 00000000..20467d38 --- /dev/null +++ b/docs/.vuepress/navbar.ts @@ -0,0 +1,30 @@ +import { navbar } from "vuepress-theme-hope"; + +export default navbar([ + "/", + "/demo/", + { + text: "指南", + 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 文档", + icon: "book", + link: "https://theme-hope.vuejs.press/zh/", + }, +]); diff --git a/docs/.vuepress/public/assets/icon/apple-icon-152.png b/docs/.vuepress/public/assets/icon/apple-icon-152.png new file mode 100644 index 00000000..434fcc3d Binary files /dev/null and b/docs/.vuepress/public/assets/icon/apple-icon-152.png differ diff --git a/docs/.vuepress/public/assets/icon/chrome-192.png b/docs/.vuepress/public/assets/icon/chrome-192.png new file mode 100644 index 00000000..6645f52b Binary files /dev/null and b/docs/.vuepress/public/assets/icon/chrome-192.png differ diff --git a/docs/.vuepress/public/assets/icon/chrome-512.png b/docs/.vuepress/public/assets/icon/chrome-512.png new file mode 100644 index 00000000..a146f000 Binary files /dev/null and b/docs/.vuepress/public/assets/icon/chrome-512.png differ diff --git a/docs/.vuepress/public/assets/icon/chrome-mask-192.png b/docs/.vuepress/public/assets/icon/chrome-mask-192.png new file mode 100644 index 00000000..530977a9 Binary files /dev/null and b/docs/.vuepress/public/assets/icon/chrome-mask-192.png differ diff --git a/docs/.vuepress/public/assets/icon/chrome-mask-512.png b/docs/.vuepress/public/assets/icon/chrome-mask-512.png new file mode 100644 index 00000000..a4f90ae4 Binary files /dev/null and b/docs/.vuepress/public/assets/icon/chrome-mask-512.png differ diff --git a/docs/.vuepress/public/assets/icon/guide-maskable.png b/docs/.vuepress/public/assets/icon/guide-maskable.png new file mode 100644 index 00000000..75449b60 Binary files /dev/null and b/docs/.vuepress/public/assets/icon/guide-maskable.png differ diff --git a/docs/.vuepress/public/assets/icon/ms-icon-144.png b/docs/.vuepress/public/assets/icon/ms-icon-144.png new file mode 100644 index 00000000..24641244 Binary files /dev/null and b/docs/.vuepress/public/assets/icon/ms-icon-144.png differ diff --git a/docs/.vuepress/public/assets/image/advanced.svg b/docs/.vuepress/public/assets/image/advanced.svg new file mode 100644 index 00000000..c27ede59 --- /dev/null +++ b/docs/.vuepress/public/assets/image/advanced.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/image/blog.svg b/docs/.vuepress/public/assets/image/blog.svg new file mode 100644 index 00000000..00fc40d7 --- /dev/null +++ b/docs/.vuepress/public/assets/image/blog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/image/box.svg b/docs/.vuepress/public/assets/image/box.svg new file mode 100644 index 00000000..9e6408ed --- /dev/null +++ b/docs/.vuepress/public/assets/image/box.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/image/features.svg b/docs/.vuepress/public/assets/image/features.svg new file mode 100644 index 00000000..6d627393 --- /dev/null +++ b/docs/.vuepress/public/assets/image/features.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/image/github-dark.svg b/docs/.vuepress/public/assets/image/github-dark.svg new file mode 100644 index 00000000..37fa923d --- /dev/null +++ b/docs/.vuepress/public/assets/image/github-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/image/github-light.svg b/docs/.vuepress/public/assets/image/github-light.svg new file mode 100644 index 00000000..d5e64918 --- /dev/null +++ b/docs/.vuepress/public/assets/image/github-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/image/layout.svg b/docs/.vuepress/public/assets/image/layout.svg new file mode 100644 index 00000000..da754b58 --- /dev/null +++ b/docs/.vuepress/public/assets/image/layout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/image/markdown.svg b/docs/.vuepress/public/assets/image/markdown.svg new file mode 100644 index 00000000..72056c9c --- /dev/null +++ b/docs/.vuepress/public/assets/image/markdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/favicon.ico b/docs/.vuepress/public/favicon.ico new file mode 100644 index 00000000..b411f79d Binary files /dev/null and b/docs/.vuepress/public/favicon.ico differ diff --git a/docs/.vuepress/public/logo.png b/docs/.vuepress/public/logo.png new file mode 100644 index 00000000..ccd732e1 Binary files /dev/null and b/docs/.vuepress/public/logo.png differ diff --git a/docs/.vuepress/public/logo.svg b/docs/.vuepress/public/logo.svg new file mode 100644 index 00000000..364d184e --- /dev/null +++ b/docs/.vuepress/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/sidebar.ts b/docs/.vuepress/sidebar.ts new file mode 100644 index 00000000..a2b15564 --- /dev/null +++ b/docs/.vuepress/sidebar.ts @@ -0,0 +1,25 @@ +import { sidebar } from "vuepress-theme-hope"; + +export default sidebar({ + "/": [ + "", + { + text: "案例", + icon: "laptop-code", + prefix: "demo/", + link: "demo/", + children: "structure", + }, + { + text: "文档", + icon: "book", + prefix: "guide/", + children: "structure", + }, + { + text: "幻灯片", + icon: "person-chalkboard", + link: "https://plugin-md-enhance.vuejs.press/zh/guide/content/revealjs/demo.html", + }, + ], +}); diff --git a/docs/.vuepress/styles/config.scss b/docs/.vuepress/styles/config.scss new file mode 100644 index 00000000..f91061d7 --- /dev/null +++ b/docs/.vuepress/styles/config.scss @@ -0,0 +1,3 @@ +// you can change config here +$colors: #c0392b, #d35400, #f39c12, #27ae60, #16a085, #2980b9, #8e44ad, #2c3e50, + #7f8c8d !default; diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss new file mode 100644 index 00000000..f6af3878 --- /dev/null +++ b/docs/.vuepress/styles/index.scss @@ -0,0 +1 @@ +// place your custom styles here diff --git a/docs/.vuepress/styles/palette.scss b/docs/.vuepress/styles/palette.scss new file mode 100644 index 00000000..356a4282 --- /dev/null +++ b/docs/.vuepress/styles/palette.scss @@ -0,0 +1,2 @@ +// you can change colors here +$theme-color: #096dd9; diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts new file mode 100644 index 00000000..2b9fdc1c --- /dev/null +++ b/docs/.vuepress/theme.ts @@ -0,0 +1,187 @@ +import { hopeTheme } from "vuepress-theme-hope"; +import navbar from "./navbar.js"; +import sidebar from "./sidebar.js"; + +export default hopeTheme({ + hostname: "https://vuepress-theme-hope-docs-demo.netlify.app", + + author: { + name: "Mr.Hope", + url: "https://mister-hope.com", + }, + + iconAssets: "fontawesome-with-brands", + + logo: "https://theme-hope-assets.vuejs.press/logo.svg", + + repo: "vuepress-theme-hope/vuepress-theme-hope", + + docsDir: "src", + + // 导航栏 + navbar, + + // 侧边栏 + sidebar, + + // 页脚 + footer: "默认页脚", + displayFooter: true, + + // 加密配置 + encrypt: { + config: { + "/demo/encrypt.html": ["1234"], + }, + }, + + // 多语言配置 + metaLocales: { + editLink: "在 GitHub 上编辑此页", + }, + + // 如果想要实时查看任何改变，启用它。注: 这对更新性能有很大负面影响 + // hotReload: true, + + // 在这里配置主题提供的插件 + plugins: { + // 你应该自行生成自己的评论服务 + comment: { + provider: "Giscus", + repo: "vuepress-theme-hope/giscus-discussions", + repoId: "R_kgDOG_Pt2A", + category: "Announcements", + categoryId: "DIC_kwDOG_Pt2M4COD69", + }, + + components: { + components: ["Badge", "VPCard"], + }, + + // 此处开启了很多功能用于演示，你应仅保留用到的功能。 + mdEnhance: { + align: true, + attrs: true, + codetabs: true, + component: true, + demo: true, + figure: true, + imgLazyload: true, + imgSize: true, + include: true, + mark: true, + stylize: [ + { + matcher: "Recommended", + replacer: ({ tag }) => { + if (tag === "em") + return { + tag: "Badge", + attrs: { type: "tip" }, + content: "Recommended", + }; + }, + }, + ], + sub: true, + sup: true, + tabs: true, + vPre: true, + + // 在启用之前安装 chart.js + // chart: true, + + // insert component easily + + // 在启用之前安装 echarts + // echarts: true, + + // 在启用之前安装 flowchart.ts + // flowchart: true, + + // gfm requires mathjax-full to provide tex support + // gfm: true, + + // 在启用之前安装 katex + // katex: true, + + // 在启用之前安装 mathjax-full + // mathjax: true, + + // 在启用之前安装 mermaid + // mermaid: true, + + // playground: { + // presets: ["ts", "vue"], + // }, + + // 在启用之前安装 reveal.js + // revealJs: { + // plugins: ["highlight", "math", "search", "notes", "zoom"], + // }, + + // 在启用之前安装 @vue/repl + // vuePlayground: true, + + // install sandpack-vue3 before enabling it + // sandpack: true, + }, + + // 如果你需要 PWA。安装 @vuepress/plugin-pwa 并取消下方注释 + // pwa: { + // favicon: "/favicon.ico", + // cacheHTML: true, + // cachePic: 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", + // }, + // ], + // }, + // ], + // }, + // }, + }, +}); diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..16ef4fa2 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,280 @@ +--- +home: true +icon: home +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: 运行 pnpm create vuepress-theme-hope hope-project 以创建一个新的主题项目。 + - title: 在已有项目根目录下运行 pnpm create vuepress-theme-hope add . 以在项目中添加主题。 + + - 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/hint.html + + - title: GFM 警告 + icon: bell + details: GFM 风格的警告容器 + link: https://theme-hope.vuejs.press/zh/guide/markdown/alert.html + + - title: 选项卡 + icon: table-columns + details: 使用选项卡对相似内容进行分组 + link: https://theme-hope.vuejs.press/zh/guide/markdown/tabs.html + + - title: 代码组 + icon: code + details: 使用选项卡对相似代码进行分组 + link: https://theme-hope.vuejs.press/zh/guide/markdown/code-tabs.html + + - title: 自定义对齐支持 + icon: align-center + details: 让你在 Markdown 中对段落进行对齐 + link: https://theme-hope.vuejs.press/zh/guide/markdown/align.html + + - title: 自定义属性支持 + icon: code + details: 让你为 Markdown 元素添加属性 + link: https://theme-hope.vuejs.press/zh/guide/markdown/attrs.html + + - title: 上下角标支持 + icon: superscript + details: 你的 Markdown 现在将支持上下角标 + link: https://theme-hope.vuejs.press/zh/guide/markdown/sup-sub.html + + - title: 脚注 + icon: quote-left + details: 你的 Markdown 现在将支持脚注 + link: https://theme-hope.vuejs.press/zh/guide/markdown/footnote.html + + - title: 标记支持 + icon: highlighter + details: 让你在 Markdown 中对词句进行标记 + link: https://theme-hope.vuejs.press/zh/guide/markdown/mark.html + + - title: 任务列表 + icon: square-check + details: 在 Markdown 中使用任务列表 + link: https://theme-hope.vuejs.press/zh/guide/markdown/tasklist.html + + - title: 图片语法 + icon: image + details: 使用改进的语法指定图片大小与颜色模式 + link: https://theme-hope.vuejs.press/zh/guide/markdown/image.html + + - title: 组件支持 + icon: puzzle-piece + details: 在 Markdown 中轻松插入组件 + link: https://theme-hope.vuejs.press/zh/guide/markdown/component.html + + - title: 图表支持 + icon: chart-simple + details: 在 Markdown 中展示图表 + link: https://theme-hope.vuejs.press/zh/guide/markdown/chartjs.html + + - title: 流程图支持 + icon: route + details: 可以在 Markdown 中直接写出流程图 + link: https://theme-hope.vuejs.press/zh/guide/markdown/flowchart.html + + - title: Mermaid 支持 + icon: chart-pie + details: 可以在 Markdown 中添加 Mermaid 图例 + link: https://theme-hope.vuejs.press/zh/guide/markdown/mermaid.html + + - title: Tex 支持 + icon: square-root-variable + details: Markdown 现在也可以支持 Tex 语法以显示公式 + link: https://theme-hope.vuejs.press/zh/guide/markdown/tex.html + + - title: 导入文件支持 + icon: fab fa-markdown + details: 将你的文档分段，并在 Markdown 中导入 + link: https://theme-hope.vuejs.press/zh/guide/markdown/include.html + + - title: 交互演示支持 + icon: code + details: 你可以在 Markdown 中添加交互演示 + link: https://theme-hope.vuejs.press/zh/guide/markdown/playground.html + + - title: Vue 交互演示支持 + icon: fab fa-vuejs + details: 在交互演示中展示 Vue 组件 + link: https://theme-hope.vuejs.press/zh/guide/markdown/vue-playground.html + + - title: Sandpack 交互演示支持 + icon: code + details: Sandpack 驱动的实时的编码环境 + link: https://theme-hope.vuejs.press/zh/guide/markdown/sandpack.html + + - title: 代码案例支持 + icon: laptop-code + details: 你可以很方便的插入代码案例 + link: https://theme-hope.vuejs.press/zh/guide/markdown/demo.html + + - title: 幻灯片支持 + icon: person-chalkboard + details: 通过 Reveal.js 在 Markdown 中插入幻灯片 + link: https://theme-hope.vuejs.press/zh/guide/markdown/revealjs.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: object-group + details: 添加路径导航、页脚、改进的导航栏、改进的页面导航等。 + link: https://theme-hope.vuejs.press/zh/guide/layout/ + + - 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: person-chalkboard + details: 添加幻灯片页面以显示你喜欢的内容 + link: https://theme-hope.vuejs.press/zh/guide/layout/slides + + - 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: comment-dots + details: 配合 Waline 来开启阅读量统计与评论支持 + 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: copy + details: 一键复制代码块中的代码 + link: https://theme-hope.vuejs.press/zh/guide/feature/copy-code.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: home + details: 全新博客主页 + link: https://theme-hope.vuejs.press/zh/guide/blog/home.html + + - title: 博主信息 + icon: home + details: 自定义名称、头像、座右铭和社交媒体链接 + link: https://theme-hope.vuejs.press/zh/guide/blog/blogger.html + + - title: 时间线 + icon: home + 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: 使用 VuePress Theme Hope 主题 | MIT 协议, 版权所有 © 2019-present Mr.Hope +--- + +这是项目主页的案例。你可以在这里放置你的主体内容。 + +想要使用此布局，你需要在页面 front matter 中设置 `home: true`。 + +配置项的相关说明详见 [项目主页配置](https://theme-hope.vuejs.press/zh/guide/layout/home/)。 diff --git a/docs/demo/README.md b/docs/demo/README.md new file mode 100644 index 00000000..31ede9bc --- /dev/null +++ b/docs/demo/README.md @@ -0,0 +1,9 @@ +--- +title: 主要功能与配置演示 +index: false +icon: laptop-code +category: + - 使用指南 +--- + + diff --git a/docs/demo/disable.md b/docs/demo/disable.md new file mode 100644 index 00000000..ff54b571 --- /dev/null +++ b/docs/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，在页面禁用功能与布局。 + + + +本页面就是一个示例，禁用了如下功能: + +- 导航栏 +- 侧边栏 +- 路径导航 +- 页面信息 +- 贡献者 +- 编辑此页链接 +- 更新时间 +- 上一篇/下一篇 链接 +- 评论 +- 页脚 +- 返回顶部按钮 diff --git a/docs/demo/encrypt.md b/docs/demo/encrypt.md new file mode 100644 index 00000000..20d8d23a --- /dev/null +++ b/docs/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 文字。 diff --git a/docs/demo/layout.md b/docs/demo/layout.md new file mode 100644 index 00000000..b89b60a6 --- /dev/null +++ b/docs/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 中自定义它们。 diff --git a/docs/demo/markdown.md b/docs/demo/markdown.md new file mode 100644 index 00000000..dd4e7c0e --- /dev/null +++ b/docs/demo/markdown.md @@ -0,0 +1,269 @@ +--- +title: Markdown 展示 +icon: fab fa-markdown +order: 2 +category: + - 使用指南 +tag: + - Markdown +--- + +VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。 + +你应该创建和编写 Markdown 文件，以便 VuePress 可以根据文件结构将它们转换为不同的页面。 + + + +## 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 页面引入配置。 + +::: info + +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-plugin-md-enhance`][md-enhance]，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。 + +#### 提示容器 + +::: v-pre + +安全的在 Markdown 中使用 {{ variable }}。 + +::: + +::: info 自定义标题 + +信息容器，包含 `代码` 与 [链接](#提示容器)。 + +```js +const a = 1; +``` + +::: + +::: tip 自定义标题 + +提示容器 + +::: + +::: warning 自定义标题 + +警告容器 + +::: + +::: caution 自定义标题 + +危险容器 + +::: + +::: details 自定义标题 + +详情容器 + +::: + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/hint.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-tabs.html) + +#### 上下角标 + +19^th^ H~2~O + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/sup-sub.html) + +#### 自定义对齐 + +::: center + +我是居中的 + +::: + +::: right + +我在右对齐 + +::: + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/align.html) + +#### Attrs + +一个拥有 ID 的 **单词**{#word}。 + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/attrs.html) + +#### 脚注 + +此文字有脚注[^first]. + +[^first]: 这是脚注内容 + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/footnote.html) + +#### 标记 + +你可以标记 ==重要的内容== 。 + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/mark.html) + +#### 任务列表 + +- [x] 计划 1 +- [ ] 计划 2 + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/tasklist.html) + +### 图片增强 + +支持为图片设置颜色模式和大小 + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/image.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/markdown/component.html) + +#### 导入文件 + + + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/include.html) + +#### 样式化 + +向 Mr.Hope 捐赠一杯咖啡。 _Recommended_ + +- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize.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/tex.html) + +#### 图表 + +