init commit.
This commit is contained in:
zeroornull
326
src/zh/README.md
Normal file
326
src/zh/README.md
Normal file
@@ -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/)。
|
||||
9
src/zh/demo/README.md
Normal file
9
src/zh/demo/README.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: 主要功能与配置演示
|
||||
index: false
|
||||
icon: laptop-code
|
||||
category:
|
||||
- 使用指南
|
||||
---
|
||||
|
||||
<Catalog />
|
||||
42
src/zh/demo/disable.md
Normal file
42
src/zh/demo/disable.md
Normal file
@@ -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 -->
|
||||
|
||||
本页面就是一个示例，禁用了如下功能:
|
||||
|
||||
- 导航栏
|
||||
- 侧边栏
|
||||
- 路径导航
|
||||
- 页面信息
|
||||
- 贡献者
|
||||
- 编辑此页链接
|
||||
- 更新时间
|
||||
- 上一篇/下一篇 链接
|
||||
- 评论
|
||||
- 页脚
|
||||
- 返回顶部按钮
|
||||
15
src/zh/demo/encrypt.md
Normal file
15
src/zh/demo/encrypt.md
Normal file
@@ -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 文字。
|
||||
31
src/zh/demo/layout.md
Normal file
31
src/zh/demo/layout.md
Normal file
@@ -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 中自定义它们。
|
||||
323
src/zh/demo/markdown.md
Normal file
323
src/zh/demo/markdown.md
Normal file
@@ -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)
|
||||
125
src/zh/demo/page.md
Normal file
125
src/zh/demo/page.md
Normal file
@@ -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)
|
||||
```
|
||||
16
src/zh/guide/README.md
Normal file
16
src/zh/guide/README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
title: 指南
|
||||
icon: lightbulb
|
||||
---
|
||||
|
||||
## 功能亮点
|
||||
|
||||
### Bar
|
||||
|
||||
- [baz](bar/baz.md)
|
||||
- ...
|
||||
|
||||
### Foo
|
||||
|
||||
- [ray](foo/ray.md)
|
||||
- ...
|
||||
13
src/zh/guide/bar/README.md
Normal file
13
src/zh/guide/bar/README.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Bar 功能
|
||||
icon: lightbulb
|
||||
---
|
||||
|
||||
## 介绍
|
||||
|
||||
我们支持 bar 功能，...
|
||||
|
||||
## 详情
|
||||
|
||||
- [baz](baz.md)
|
||||
- ...
|
||||
6
src/zh/guide/bar/baz.md
Normal file
6
src/zh/guide/bar/baz.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Baz
|
||||
icon: circle-info
|
||||
---
|
||||
|
||||
功能详情...
|
||||
13
src/zh/guide/foo/README.md
Normal file
13
src/zh/guide/foo/README.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Foo 功能
|
||||
icon: lightbulb
|
||||
---
|
||||
|
||||
## 介绍
|
||||
|
||||
我们支持 foo 功能，...
|
||||
|
||||
## 详情
|
||||
|
||||
- [ray](ray.md)
|
||||
- ...
|
||||
6
src/zh/guide/foo/ray.md
Normal file
6
src/zh/guide/foo/ray.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Ray
|
||||
icon: circle-info
|
||||
---
|
||||
|
||||
功能详情...
|
||||
24
src/zh/portfolio.md
Normal file
24
src/zh/portfolio.md
Normal file
@@ -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#档案类型主页)。
|
||||
Reference in New Issue
Block a user