如果沒有任何配置,你的 VuePress 站點僅有一些最基礎的功能杭攻。為了更好地自定義你的網站家夺,讓我們首先在你的文檔目錄下創(chuàng)建一個 .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 文件的相對路徑決定的状您。
相對路徑 | 路由路徑 |
---|---|
/README.md | / |
/index.md | / |
/home.md | /home.html |
/guide/README.md | /guide/ |
/guide/getting-started.md | /guide/getting-started.html |
markdown語法就不細說了勒叠,可以參考https://v2.vuepress.vuejs.org/zh/guide/markdown.html
靜態(tài)資源 - 相對路徑
你可以在你的index.md同級增加靜態(tài)的圖片來直接引用它
![圖片](./image.png)
Public 文件
你可以把一些靜態(tài)資源放在 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)