.md文件使用vuepress转静态网页
vuepress介绍
vuepress是一个用来生成开发文档的静态网站生成器。- 它具有非常好的加载性能和搜索引擎优化（SEO）。一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
- 一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。
- 内置Markdown 拓展，一般是将 .md文件转为静态网站。
Markdown语法
一般在标记符号后面都需要加一个空格
1.标题
- 用
#标记，在标题的前面加上1 ~ 6个#，分别表示1 ~ 6级标题，1级标题最大，6级标题最小- 用
=和-标记，=表示1级标题，-表示2级标题，写在标题的下一行，=或-可以有任意多个
# 一级标题
## 二级标题
### 三级标题
##### 四级标题
###### 五级标题
####### 六级标题
一级标题
======
二级标题
----------
2.列表
- 无序列表使用-、+和*表示
- 有序列表使用数字加.表示
- Red
- Green
- Blue
* Red
* Green
* Blue
+ Red
+ Green
+ Blue
1. Red
2. Green
3. Blue
3.引用
- 引用用
>来表示- 现在包裹本身这个列表的背景就是引用
>后面加5个空格就是非高亮代码块
4.强调
- 两个 * 或 - 代表加粗，一个 * 或 - 代表斜体，~~代表删除。
**加粗文本** 或者 __加粗文本__ //加粗
*斜体文本* 或者_斜体文本_ //斜体
~~删除文本~~ //删除线文本
效果展示：
加粗文本 或者 加粗文本 //加粗
斜体文本 或者_斜体文本_ //斜体
删除文本 //删除线文本
5.图片与连接
- 图片表示方法
- 链接表示方法有：行内式链接
[链接文本](链接地址)，参考式链接[链接文本][url]，其中url为链接标记，可置于文中任意位置，如[url]: http://connorlin.github.io，自动链接<链接地址>，注意：链接仅支持http://、https://或ftp://开头的链接地址，否则不会显示链接或者跳转到404。
6.代码片段
- 行内代码：用两个反引号括起来
- 代码块：用6个反引号括起来，代码高亮则需要在第三个反引号后面加空格，再写上编程语言的名字，写法如下
```java
// 注意java前面有空格
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
} ```
7.表格
表格对齐格式（这里的
-可以是任意个，只要大于1个即可）
- 居左：
:----- 居中：
:----:或------ 居右：
----:
表格例子：
|标题|标题|标题|
|:---|:---:|---:|
|居左测试文本|居中测试文本|居右测试文本|
|居左测试文本1|居中测试文本2|居右测试文本3|
|居左测试文本11|居中测试文本22|居右测试文本33|
|居左测试文本111|居中测试文本222|居右测试文本333|
效果如下：
| 标题 | 标题 | 标题 |
|---|---|---|
| 居左测试文本 | 居中测试文本 | 居右测试文本 |
| 居左测试文本1 | 居中测试文本2 | 居右测试文本3 |
| 居左测试文本11 | 居中测试文本22 | 居右测试文本33 |
| 居左测试文本111 | 居中测试文本222 | 居右测试文本333 |
8.分隔线
在一行中用
三个以上的*、-、_来建立一个分隔线，行内不能有其他东西。也可以在符号间插入空格。
***
---
___
* * *
9.换行
在行尾添加两个空格加回车表示换行
10.脚注（注解）
使用[^]来定义脚注
写法如下
杀马特[^1]
[^1]: 一种很潮流的东西
杀马特1
11.Markdown支持Html标签
- 下划线
<u>xxxx</u>
效果：xxxx- 文本对齐
<p align="left">居左文本</p>
<p align="center">居中文本</p>
<p align="right">居右文本</p>
效果展示：
居左文本
居中文本
居右文本
注意：当然，html标签可以在.md文件的任意地方随意穿插
vuepress项目搭建
1.创建一个任意的文件夹
2.初始化npm init
3.安装依赖npm install -D vuepress
4.创建docs文件夹，并在docs文件夹里放入自己想要转换成静态网站的.md文件，如果只有一个文件，则需要命名为README.md，因为系统需要识别一个README.md的入口文件。
5.在package.json文件中添加"scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }6.npm run docs:dev启动本地服务
vuepress的目录结构
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
docs/.vuepress: 用于存放全局的配置、组件、静态资源等。docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。 vue组件可以根据组件名直接在md文件中使用。docs/.vuepress/theme: 用于存放本地主题，一般在自定义组件的时候创建。docs/.vuepress/styles: 用于存放样式相关的文件。docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级（通俗来说就是修改默认样式）docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。docs/.vuepress/public: 静态资源目录。docs/.vuepress/templates: 存储 HTML模板文件。docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。docs/.vuepress/config.js: 配置文件的入口文件。docs/.vuepress/enhanceApp.js: 客户端应用的增强。
vuepress的配置
1.创建配置文件
在docs文件下创建
.vuepress文件夹，在.vuepress文件夹里创建config.js文件，该配置文件导出一个js对象，使用module.exports={ ... }
2.导航栏配置
themeConfig
logo属性：导航栏logo配置nav属性：导航栏链接配置，是一个数组，数组里的一个对象对应一个链接，{text：‘链接文本’，link：‘链接地址’，target：'_blank’是否打开新页面 }，当有items属性，不是一个单一的 link 时，它将显示为一个下拉列表，可以通过嵌套的 items 来在下拉列表中设置分组。navbar属性：布尔值，是否启用导航栏，禁用指定页面的导航栏时，可以在md文件中加入如下代码：--- navbar: false ---
module.exports = {
themeConfig: {
logo: '/assets/img/logo.png',
nav: [
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' ,target:'_blank'},
items: [
{ text: 'Chinese', link: '/language/chinese/' },
{ text: 'Japanese', link: '/language/japanese/' }
]
]
}
}
3.侧边栏配置
themeConfig
sidebar：需要一个包含了多个链接的数组，自动生成侧边栏则只需它的值为autosidebarDepth：默认为1，最大为2，当值为1时，自动提取到2级标题，当值为2时自动提取到3级标题作为侧边栏。displayAllHeaders: true，显示所有页面的标题链接，默认值：false
普通侧边栏：
以 / 结尾的路径将会被视为 */README.md，这个链接的文字将会被自动获取到。如果你想要显示地指定链接的文字，使用一个格式为 [link, text] 的数组。
module.exports = {
themeConfig: {
sidebar: [
'/',
'/page-a',
['/page-b', 'Explicit link text']
]
}
}
侧边栏分组
module.exports = {
themeConfig: {
sidebar: [
{
title: 'Group 1', // 必要的
path: '/foo/', // 可选的, 标题的跳转链接，应为绝对路径且必须存在
collapsable: false, // 可选的, 默认值是 true,
sidebarDepth: 1, // 可选的, 默认值是 1
children: [
'/'
]
},
{
title: 'Group 2',
children: [ /* ... */ ],
initialOpenGroupIndex: -1 // 可选的, 默认值是 0
}
]
}
}
注意：更多详情请查看vuepress官网
一种很潮流的东西（脚注例子） ↩︎
1152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
