-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
286 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
# 链接 | ||
|
||
## 内部链接 | ||
|
||
网站内部的链接,将会被转换成 `<router-link>` 用于 SPA 导航。同时,站内的每一个文件夹下的 `README.md` 或者 `index.md` 文件都会被自动编译为 `index.html`,对应的链接将被视为 `/`。 | ||
|
||
以如下的文件结构为例: | ||
|
||
``` | ||
. | ||
├─ README.md | ||
├─ foo | ||
│ ├─ README.md | ||
│ ├─ one.md | ||
│ └─ two.md | ||
└─ bar | ||
├─ README.md | ||
├─ three.md | ||
└─ four.md | ||
``` | ||
|
||
假设你现在在 `foo/one.md` 中: | ||
|
||
``` md | ||
[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 --> | ||
``` | ||
|
||
## 外部链接 | ||
|
||
外部的链接将会被自动地设置为 `target="_blank" rel="noopener noreferrer"`: | ||
|
||
- [vuejs.org](https://vuejs.org) | ||
- [VuePress on GitHub](https://github.com/vuejs/vuepress) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
# Front Matter | ||
|
||
VuePress 提供了对 [YAML front matter](https://jekyllrb.com/docs/frontmatter/) 开箱即用的支持: | ||
|
||
``` yaml | ||
--- | ||
title: Blogging Like a Hacker | ||
lang: en-US | ||
--- | ||
``` | ||
|
||
这些数据可以在当前 markdown 的正文,或者是任意的自定义或主题组件中使用。 | ||
|
||
想了解更多,请移步 [Front Matter](../../guide/deep/frontmatter.md)。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
# 自定义容器 | ||
|
||
**输入** | ||
|
||
```md | ||
::: tip | ||
这是一个提示 | ||
::: | ||
|
||
::: warning | ||
这是一个警告 | ||
::: | ||
|
||
::: danger | ||
这是一个危险警告 | ||
::: | ||
|
||
::: details | ||
这是一个详情块,在 IE / Edge 中不生效 | ||
::: | ||
``` | ||
|
||
**输出** | ||
|
||
::: tip | ||
这是一个提示 | ||
::: | ||
|
||
::: warning | ||
这是一个警告 | ||
::: | ||
|
||
::: danger | ||
这是一个危险警告 | ||
::: | ||
|
||
::: details | ||
这是一个详情块,在 IE / Edge 中不生效 | ||
::: | ||
|
||
你也可以自定义块中的标题: | ||
|
||
````md | ||
::: danger STOP | ||
危险区域,禁止通行 | ||
::: | ||
|
||
::: details 点击查看代码 | ||
```js | ||
console.log('你好,VuePress!') | ||
``` | ||
::: | ||
```` | ||
|
||
::: danger STOP | ||
危险区域,禁止通行 | ||
::: | ||
|
||
::: details 点击查看代码 | ||
```js | ||
console.log('你好,VuePress!') | ||
``` | ||
::: | ||
|
||
**参考:** | ||
|
||
- [vuepress-plugin-container](https://vuepress.github.io/plugins/container/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,168 @@ | ||
# 高亮 | ||
|
||
## 代码块中的语法高亮 | ||
|
||
VuePress 使用了 [Prism](https://prismjs.com/) 来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言,你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名: | ||
|
||
**输入** | ||
|
||
```` | ||
``` js | ||
export default { | ||
name: 'MyComponent', | ||
// ... | ||
} | ||
``` | ||
```` | ||
|
||
**输出** | ||
|
||
``` js | ||
export default { | ||
name: 'MyComponent', | ||
// ... | ||
} | ||
``` | ||
|
||
**输入** | ||
|
||
```` | ||
``` html | ||
<ul> | ||
<li | ||
v-for="todo in todos" | ||
:key="todo.id" | ||
> | ||
{{ todo.text }} | ||
</li> | ||
</ul> | ||
``` | ||
```` | ||
|
||
**输出** | ||
|
||
``` html | ||
<ul> | ||
<li | ||
v-for="todo in todos" | ||
:key="todo.id" | ||
> | ||
{{ todo.text }} | ||
</li> | ||
</ul> | ||
``` | ||
|
||
在 Prism 的网站上查看 [合法的语言列表](https://prismjs.com/#languages-list)。 | ||
|
||
|
||
## 代码块中的行高亮 | ||
|
||
**输入** | ||
|
||
```` | ||
``` js {4} | ||
export default { | ||
data () { | ||
return { | ||
msg: 'Highlighted!' | ||
} | ||
} | ||
} | ||
``` | ||
```` | ||
|
||
**输出** | ||
|
||
``` js{4} | ||
export default { | ||
data () { | ||
return { | ||
msg: 'Highlighted!' | ||
} | ||
} | ||
} | ||
``` | ||
|
||
除了单行以外,你也可指定多行,行数区间,或是两者都指定。 | ||
|
||
- 行数区间: 例如 `{5-8}`, `{3-10}`, `{10-17}` | ||
- 多个单行: 例如 `{4,7,9}` | ||
- 行数区间与多个单行: 例如 `{4,7-13,16,23-27,40}` | ||
|
||
**Input** | ||
|
||
```` | ||
``` js{1,4,6-7} | ||
export default { // Highlighted | ||
data () { | ||
return { | ||
msg: `Highlighted! | ||
This line isn't highlighted, | ||
but this and the next 2 are.`, | ||
motd: 'VuePress is awesome', | ||
lorem: 'ipsum', | ||
} | ||
} | ||
} | ||
``` | ||
```` | ||
|
||
**Output** | ||
|
||
``` js{1,4,6-8} | ||
export default { // Highlighted | ||
data () { | ||
return { | ||
msg: `Highlighted! | ||
This line isn't highlighted, | ||
but this and the next 2 are.`, | ||
motd: 'VuePress is awesome', | ||
lorem: 'ipsum', | ||
} | ||
} | ||
} | ||
``` | ||
|
||
## 行号 | ||
|
||
你可以通过配置来为每个代码块显示行号: | ||
|
||
``` js | ||
module.exports = { | ||
markdown: { | ||
lineNumbers: true | ||
} | ||
} | ||
``` | ||
|
||
<!-- TODO Support line numbers for specific fence block --> | ||
|
||
- 示例: | ||
|
||
<picture> | ||
<source srcset="/line-numbers-desktop.png" media="(min-width: 719px)"> | ||
<img class="line-numbers-desktop-snap" alt="Image"> | ||
</picture> | ||
|
||
<picture> | ||
<source srcset="/line-numbers-mobile.gif" media="(max-width: 719px)"> | ||
<img class="line-numbers-mobile-snap" alt="Image"> | ||
</picture> | ||
|
||
<style> | ||
@media screen and (min-width: 719px) { | ||
.line-numbers-mobile-snap { | ||
display: none; | ||
} | ||
} | ||
@media screen and (max-width: 719px) { | ||
.line-numbers-desktop-snap { | ||
display: none; | ||
} | ||
.line-numbers-mobile-snap { | ||
max-width: none!important; | ||
margin: 0 -1.5rem; | ||
width: 100vw; | ||
} | ||
} | ||
</style> |