VuePress 基础配置

安装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