安装Node.js
全局安装VuePress
yarn global add vuepress # 或者:npm install -g vuepress
初始化项目
yarn init -y # 或者 npm init -y
目录结构
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── dist(生成静态文件的目录)
│ └── config.js
└── package.json
首页
---
home: true
heroImage: /hero.png
heroText: Zephyr's Notes
tagline: Less is more.
actionText: Blog
actionLink: https://hf.mk
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: Copyright © 2017-2020 Zephyr
---
你可以将相应的内容设置为 null
来禁用标题和副标题。
任何 YAML front matter
之后额外的内容将会以普通的 markdown 被渲染,并插入到 features
的后面。
config.js配置
module.exports = {
title: 'Zephyr\'s Notes',
description: null,
base: '/notes/', // 部署在非根目录,若为根目录删除本行
head: [
['link', { rel: 'icon', href: 'https://hf.mk/favicon.ico' }]
],
themeConfig: {
nav: [
{ text: 'Python', link: '/Python' },
{ text: 'Typecho', link: '/Typecho' },
{ text: 'VuePress', link: '/VuePress' },
{ text: 'Blog', link: 'https://hf.mk' },
],
sidebar: 'auto', // 自动生成侧边栏
sidebarDepth: 0, // 侧边栏深度 默认为1 最大为2
search: false, // 关闭搜索
smoothScroll: true, // 开启页面滚动
},
markdown: {
lineNumbers: true // 开启代码行号
}
}
自定义容器
::: tip
这是一个提示
:::
::: warning
这是一个警告
:::
::: danger
这是一个危险警告
:::
::: details
这是一个详情块,在 IE / Edge 中不生效
:::
部署
命令运行本地服务
访问http://localhost:8080即可预览网站
vuepress dev docs
生成静态文件
放置在docs/.vuepress/dist
目录中
vuepress build docs