vuepress2.0使用教程(2) - 基础配置

如果没有任何配置，你的 VuePress 站点仅有一些最基础的功能。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
├─ .gitignore
└─ package.json

VuePress 站点的基本配置文件是 .vuepress/config.js ，但也同样支持 TypeScript 配置文件。你可以使用 .vuepress/config.ts 来得到更好的类型提示。

然后编辑.vuepress - > config.ts

import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  lang: 'zh-CN',
  title: '你好， VuePress ！',
  description: '这是我的第一个 VuePress 站点',
})

现在可以看到页面的基本信息了，接下来添加你的导航，以及自定义的左侧导航

import { defineUserConfig, defaultTheme } from 'vuepress';

export default defineUserConfig({
    lang: 'zh-CN',
    title: '你好， VuePress ！',
    description: '这是我的第一个 VuePress 站点',
    theme: defaultTheme({
        // 默认主题配置
        navbar: [
            {
                text: '首页',
                link: '/'
            }
        ],
        sidebar: [
            {
                text: 'home',
                link: '/home'
            }
        ]
    })
});

然后我们需要在docs目录下新建home文件夹，在文件夹里新建index.md

# 主页  //此处不能随便写，需要按markdown的语法，否则会报错

页面的路由路径是根据你的 Markdown 文件的相对路径决定的。

markdown语法就不细说了，可以参考https://v2.vuepress.vuejs.org/zh/guide/markdown.html

静态资源 - 相对路径

你可以在你的index.md同级增加静态的图片来直接引用它

![图片](./image.png)

Public 文件

你可以把一些静态资源放在 Public 目录中，它们会被复制到最终生成的网站的根目录下。

默认的 Public 目录是 .vuepress/public ，可以通过config.ts配置项来修改。

public:`${sourceDir}/.vuepress/public`  //默认值，可以修改成你想要的目录

此处以引用logo为例

└─ docs
   ├─ .vuepress
   |  └─ public
   |     └─ images
   |        └─ logo.png  # <- Logo 文件
   └─ home
      └─ index.md       # <- 我们在这里

然后在home - index.md中引用

![VuePress Logo](/images/logo.png)