vuepress快速上手（二）｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 14 天

静态资源的处理

内部链接

假如有以下目录结构：

.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md

那么资源引用按照如下方式进行：

[Home](/) <!-- 将根目录下的 README.md 发送给用户 -->
[foo](/foo/) <!-- 将 foo 目录下的 README.md 发送给用户 -->
[foo 标题锚点](/foo/#heading) <!-- 跳转到 foo 目录下的 README.md 文件中的特定锚点位置 -->
[foo - one](/foo/one.html) <!-- 追加 .html -->
[foo - two](/foo/two.md) <!-- 或者追加 .md -->

外部链接

就是按照如下格式进行：[文字](链接)

行号

可以通过配置给每个代码块启用行号：

module.exports = {
  markdown: {
    lineNumbers: true
  }
}

但是是全局更改的，单独某一个代码块用行号怎么实现就不清楚了

自定义容器

代码示例如下：

:: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

结果输出如下：

::: tip This is a tip :::

::: warning This is a warning :::

::: danger This is a dangerous warning :::

同时还可以自定义块的标题，方法如下：

::: danger STOP
Danger zone, do not proceed
:::

结果如下： ::: danger STOP Danger zone, do not proceed :::

markdown使用emoji表情

具体说明可以看这里

markdown使用vue组件

.vuepress/components 中的所有 *.vue 文件都会自动注册为全局异步(async)组件。例如：

.
└─ .vuepress
   └─ components
      ├─ Demo.vue

在所有 markdown 文件中，都可以直接使用这些组件，其名称(name)是从文件名推断出的：

编写Demo.vue：

<template>
  <div>
    <button @click="cnt++">请点击我</button>
    <span>点击次数：<span class="result">{{ cnt }}</span></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cnt: 0
    }
  }
}
</script>

<style scoped>
button {
  background-color: #007fff;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 10px;
  border: 0;
  color: rgba(255, 255, 255, .8);
  margin-right: 20px;
}

.result {
  font-weight: 700;
  text-decoration: underline;
}
</style>

在markdown中使用：

这是使用了Demo组件的运行结果：<Demo/>

运行结果： ::: danger Eaxmple 这是使用了Demo组件的运行结果： :::

vuepress快速上手（三） ｜ 青训营笔记

vuepress快速上手（二） ｜ 青训营笔记