hello VuePress
hero

Hello world 主标题

副标题

快速上手 →

简洁至上

以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。

Vue驱动

享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。

高性能

VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。

# 首页

默认的主题提供了一个首页（Homepage）的布局 (用于 这个网站的主页)。想要使用它，需要在你的根级 README.md 的 YAML front matter 指定 home: true。以下是一个如何使用的例子：

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: '/#首页'
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

任何 YAML front matter 之后额外的内容将会以普通的 markdown 被渲染，并插入到 features 的后面。

# hello world

# 链接跳转

[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐） -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->
1
2
3
4
5

foo

foo-1

<script>和<style>标签及代码会被提取到页面

# 在 Markdown 中 使用 Vue

# 插值

{{ 1 + 1 }} 会被解析成 2
1

2

# 指令

<span v-for="i in 3">{{ i }} </span> 会解析成 1 2 3
1

1 2 3

# 访问网站以及页面的数据

{{ $page }}
1

{ "title": "Home", "frontmatter": { "home": true, "heroImage": "/assets/img/logo.jpg", "heroText": "Hello world 主标题", "tagline": "副标题", "actionText": "快速上手 →", "actionLink": "/foo/1", "features": [ { "title": "简洁至上", "details": "以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。" }, { "title": "Vue驱动", "details": "享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。" }, { "title": "高性能", "details": "VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。" } ], "footer": "MIT Licensed | Copyright © 2018-present Evan You" }, "regularPath": "/", "relativePath": "README.md", "key": "v-364e4639", "path": "/", "headers": [ { "level": 2, "title": "首页", "slug": "首页" }, { "level": 3, "title": "链接跳转", "slug": "链接跳转" }, { "level": 3, "title": "插值", "slug": "插值" }, { "level": 3, "title": "指令", "slug": "指令" }, { "level": 3, "title": "访问网站以及页面的数据", "slug": "访问网站以及页面的数据" }, { "level": 3, "title": "大括号转义", "slug": "大括号转义" }, { "level": 3, "title": "自动生成外部链接图标", "slug": "自动生成外部链接图标" } ], "lastUpdated": "11/28/2019, 2:45:32 PM" }

# 大括号转义

::: v-pre
`{{ This will be displayed as-is }}`
:::
1
2
3

{{ This will be displayed as-is }}

# 自动生成外部链接图标

Github

MIT Licensed | Copyright © 2018-present Evan You