.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.htm
l: 用于开发环境的 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官网
一种很潮流的东西(脚注例子) ↩︎