mirror of https://github.com/vuejs/vitepress
Kia Ishii
5 years ago
parent
96b5218056
commit
42cb469cf0
@ -0,0 +1,3 @@
|
||||
# Config Reference
|
||||
|
||||
Coming soon...
|
||||
@ -0,0 +1,51 @@
|
||||
# Customization
|
||||
|
||||
You can develop your custom theme by adding the `.vitepress/theme/index.js` file.
|
||||
|
||||
```bash
|
||||
.
|
||||
├─ docs
|
||||
│ ├─ .vuepress
|
||||
│ │ ├─ theme
|
||||
│ │ │ └─ index.js
|
||||
│ │ └─ config.js
|
||||
│ └─ index.md
|
||||
└─ package.json
|
||||
````
|
||||
|
||||
In `.vitepress/theme/index.js`, you must export theme object and register your own theme layout. Let's say you have your own `Layout` component like this.
|
||||
|
||||
```vue
|
||||
<!-- .vitepress/theme/Layout.vue -->
|
||||
<template>
|
||||
<h1>Custom Layout!</h1>
|
||||
<Content/><!-- make sure to include markdown outlet -->
|
||||
</template>
|
||||
```
|
||||
|
||||
Then include it in `.vitepress/theme/index.js`.
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import Layout from './Layout.vue'
|
||||
|
||||
export default {
|
||||
Layout,
|
||||
NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
|
||||
enhanceApp({ app, router, siteData }) {
|
||||
// app is the Vue 3 app instance from `createApp()`. router is VitePress'
|
||||
// custom router. `siteData`` is a `ref`` of current site-level metadata.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you want to extend the default theme, you can import it from `vitepress/dist/client/theme-default`.
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import DefaultTheme from 'vitepress/dist/client/theme-default'
|
||||
|
||||
export default {
|
||||
...DefaultTheme
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,46 @@
|
||||
# Getting Started
|
||||
|
||||
This section will help you build a basic VuePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 3.
|
||||
|
||||
- **Step. 1:** Create and change into a new directory.
|
||||
|
||||
```bash
|
||||
$ mkdir vitepress-starter && cd vitepress-starter
|
||||
```
|
||||
|
||||
- **Step. 2:** Initialize with your preferred package manager.
|
||||
|
||||
```bash
|
||||
$ yarn init
|
||||
```
|
||||
|
||||
- **Step. 3:** Install VuePress locally.
|
||||
|
||||
```bash
|
||||
$ yarn add --dev vitepress
|
||||
```
|
||||
|
||||
- **Step. 4:** Create your first document.
|
||||
|
||||
```bash
|
||||
$ mkdir docs && echo '# Hello VitePress' > docs/index.md
|
||||
```
|
||||
|
||||
- **Step. 5:** Add some scripts to `package.json`.
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:build": "vitepress build docs"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- **Step. 6:** Serve the documentation site in the local server.
|
||||
|
||||
```bash
|
||||
$ yarn docs:dev
|
||||
```
|
||||
|
||||
VitePress will start a hot-reloading development server at http://localhost:3000.
|
||||
@ -1,3 +0,0 @@
|
||||
# What is VitePress
|
||||
|
||||
Hello, world!
|
||||
Loading…
Reference in new issue