页面配置

Ms.Hope大约 5 分钟使用指南页面配置使用指南

more 注释之前的内容被视为文章摘要。

页面信息

你可以在 Markdown 的 Frontmatter 中设置页面信息。

  • 作者设置为 Ms.Hope。
  • 写作日期为 2020 年 1 月 1 日
  • 分类为 “使用指南”
  • 标签为 “页面配置” 和 “使用指南”

页面内容

你可以自由在这里书写你的 Markdown。

提示

  • 你可以将图片和 Markdown 文件放置在一起，但是你需要使用相对链接./ 进行引用。

  • 对于 .vuepress/public 文件夹的图片，请使用绝对链接 / 进行引用。

主题包含了一个自定义徽章可以使用:

文字结尾应该有深蓝色的 徽章文字 徽章。 徽章文字

页面结构

此页面应当包含:

你可以通过主题选项和页面 Frontmatter 自定义它们。

VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。

你应该创建和编写 Markdown 文件，以便 VuePress 可以根据文件结构将它们转换为不同的页面。

Markdown 介绍

如果你是一个新手，还不会编写 Markdown，请先阅读 Markdown 介绍open in new window 和 Markdown 演示open in new window。

Markdown 配置

VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。

相关信息

Frontmatter 是 VuePress 中很重要的一个概念，如果你不了解它，你需要阅读 Frontmatter 介绍open in new window。

Markdown 扩展

VuePress 会使用 markdown-itopen in new window 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 语法扩展open in new window 。

VuePress 扩展

为了丰富文档写作，VuePress 对 Markdown 语法进行了扩展。

关于这些扩展，请阅读 VuePress 中的 Markdown 扩展open in new window。

主题扩展

通过 vuepress-plugin-md-enhanceopen in new window，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。

自定义容器

安全的在 Markdown 中使用 {{ variable }}。

自定义标题

信息容器，包含 代码 与 链接。

const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码块

npm i -D vuepress-theme-hope

上下角标

19th H2O

自定义对齐

我是居中的

我在右对齐

Attrs

一个拥有 ID 的 单词。

脚注

此文字有脚注[1].

标记

你可以标记 重要的内容 。

任务列表

图片增强

支持为图片设置颜色模式和大小

图表

一个散点图案例

Echarts

一个折线图案例

流程图

Mermaid

Tex 语法

∂r∂ωr(yωω)=(yωω){(log⁡y)r+∑i=1r(−1)ir⋯(r−i+1)(log⁡y)r−iωi} \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\}

导入文件

代码演示

一个普通 Demo
<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});

span {
  color: red;
}

样式化

向 Mr.Hope 捐赠一杯咖啡。 Recommended

交互演示

TS 案例

Vue 交互演示

Vue 交互演示

幻灯片

  1. 这是脚注内容 ↩︎

这是测试显示的页脚
无版权