添加多语言、修改文章结构、新增安装指南
This commit is contained in:
hhhkkk520
parent
705f805b26
commit
bc5ba38697
@ -2,5 +2,5 @@
|
|||||||
|
|
||||||
```shell
|
```shell
|
||||||
npm i
|
npm i
|
||||||
npm run docs:dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|||||||
@ -1,82 +1,134 @@
|
|||||||
import { defineConfig } from 'vitepress'
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
lang: 'en-US',
|
locales: {
|
||||||
title: 'VitePress',
|
'/': {
|
||||||
description: 'Vite & Vue powered static site generator.',
|
lang: 'zh-CN',
|
||||||
lastUpdated: true,
|
title: '哪吒监控',
|
||||||
|
description: '哪吒监控是一个轻量化的运维工具',
|
||||||
|
},
|
||||||
|
'/en_US/': {
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'Nezha Monitoring',
|
||||||
|
description: 'Nezha Monitoring is a lightweight O&M tool',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
themeConfig: {
|
themeConfig: {
|
||||||
repo: 'vuejs/vitepress',
|
locales: {
|
||||||
docsDir: 'docs',
|
'/': {
|
||||||
docsBranch: 'main',
|
label: '简体中文',
|
||||||
editLinks: true,
|
nav: [
|
||||||
editLinkText: 'Edit this page on GitHub',
|
{ text: '使用指南', link: '/', activeMatch: '^/$|^/guide/' },
|
||||||
lastUpdated: 'Last Updated',
|
{
|
||||||
|
text: '开发手册',
|
||||||
|
link: '/config/basics',
|
||||||
|
activeMatch: '^/config/'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
algolia: {
|
sidebar: {
|
||||||
appId: '8J64VVRP8K',
|
'/guide/': getGuideSidebarZhCN(),
|
||||||
apiKey: 'a18e2f4cc5665f6602c5631fd868adfd',
|
'/config/': getConfigSidebarZhCN(),
|
||||||
indexName: 'vitepress'
|
'/': getGuideSidebarZhCN()
|
||||||
},
|
},
|
||||||
|
repo: 'nezhahq/nezhahq.github.io',
|
||||||
|
docsDir: 'docs',
|
||||||
|
docsBranch: 'main',
|
||||||
|
editLinks: true,
|
||||||
|
editLinkText: 'Edit this page on GitHub',
|
||||||
|
lastUpdated: 'Last Updated',
|
||||||
|
|
||||||
carbonAds: {
|
algolia: {
|
||||||
carbon: 'CEBDT27Y',
|
appId: '8J64VVRP8K',
|
||||||
custom: 'CKYD62QM',
|
apiKey: 'a18e2f4cc5665f6602c5631fd868adfd',
|
||||||
placement: 'vuejsorg'
|
indexName: 'vitepress'
|
||||||
},
|
},
|
||||||
|
|
||||||
nav: [
|
carbonAds: {
|
||||||
{ text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
|
carbon: 'CEBDT27Y',
|
||||||
{
|
custom: 'CKYD62QM',
|
||||||
text: 'Config Reference',
|
placement: 'vuejsorg'
|
||||||
link: '/config/basics',
|
}
|
||||||
activeMatch: '^/config/'
|
|
||||||
},
|
},
|
||||||
{
|
'/en_US/': {
|
||||||
text: 'Release Notes',
|
label: 'English',
|
||||||
link: 'https://github.com/vuejs/vitepress/releases'
|
nav: [
|
||||||
}
|
{ text: 'User Guide', link: '/en_US/', activeMatch: '^/$|^/guide/' },
|
||||||
],
|
{
|
||||||
|
text: 'Development Manual',
|
||||||
|
link: '/en_US/config/basics',
|
||||||
|
activeMatch: '^/config/'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
sidebar: {
|
sidebar: {
|
||||||
'/guide/': getGuideSidebar(),
|
'/guide/': getGuideSidebarEnUS(),
|
||||||
'/config/': getConfigSidebar(),
|
'/config/': getConfigSidebarEnUS(),
|
||||||
'/': getGuideSidebar()
|
'/': getGuideSidebarEnUS()
|
||||||
|
},
|
||||||
|
repo: 'nezhahq/nezhahq.github.io',
|
||||||
|
docsDir: 'docs',
|
||||||
|
docsBranch: 'main',
|
||||||
|
editLinks: true,
|
||||||
|
editLinkText: 'Edit this page on GitHub',
|
||||||
|
lastUpdated: 'Last Updated',
|
||||||
|
|
||||||
|
algolia: {
|
||||||
|
appId: '8J64VVRP8K',
|
||||||
|
apiKey: 'a18e2f4cc5665f6602c5631fd868adfd',
|
||||||
|
indexName: 'vitepress'
|
||||||
|
},
|
||||||
|
|
||||||
|
carbonAds: {
|
||||||
|
carbon: 'CEBDT27Y',
|
||||||
|
custom: 'CKYD62QM',
|
||||||
|
placement: 'vuejsorg'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function getGuideSidebar() {
|
function getGuideSidebarZhCN() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
text: 'Introduction',
|
text: '哪吒监控',
|
||||||
children: [
|
children: [
|
||||||
{ text: 'What is VitePress?', link: '/' },
|
{ text: '介绍', link: '/' }
|
||||||
{ text: 'Getting Started', link: '/guide/getting-started' },
|
|
||||||
{ text: 'Configuration', link: '/guide/configuration' },
|
|
||||||
{ text: 'Asset Handling', link: '/guide/assets' },
|
|
||||||
{ text: 'Markdown Extensions', link: '/guide/markdown' },
|
|
||||||
{ text: 'Using Vue in Markdown', link: '/guide/using-vue' },
|
|
||||||
{ text: 'Deploying', link: '/guide/deploy' }
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Advanced',
|
text: '安装手册',
|
||||||
children: [
|
children: [
|
||||||
{ text: 'Frontmatter', link: '/guide/frontmatter' },
|
{ text: '安装 Dashboard', link: '/guide/dashboard' },
|
||||||
{ text: 'Theming', link: '/guide/theming' },
|
{ text: '安装 Agent', link: '/guide/agent' }
|
||||||
{ text: 'API Reference', link: '/guide/api' },
|
]
|
||||||
{
|
},
|
||||||
text: 'Differences from Vuepress',
|
{
|
||||||
link: '/guide/differences-from-vuepress'
|
text: '管理面板配置',
|
||||||
}
|
children: [
|
||||||
|
{ text: '主机', link: '/guide/frontmatter' },
|
||||||
|
{ text: '服务', link: '/guide/theming' },
|
||||||
|
{ text: '定时任务', link: '/guide/api' },
|
||||||
|
{ text: '报警通知', link: '/guide/api' },
|
||||||
|
{ text: '设置', link: '/guide/differences-from-vuepress' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '常见问题',
|
||||||
|
children: [
|
||||||
|
{ text: '问题1', link: '/guide/frontmatter' },
|
||||||
|
{ text: '问题2', link: '/guide/theming' },
|
||||||
|
{ text: '问题3', link: '/guide/api' },
|
||||||
|
{ text: '问题4', link: '/guide/api' },
|
||||||
|
{ text: '问题5', link: '/guide/differences-from-vuepress' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
function getConfigSidebar() {
|
function getConfigSidebarZhCN() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
text: 'App Config',
|
text: 'App Config',
|
||||||
@ -92,3 +144,58 @@ function getConfigSidebar() {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getGuideSidebarEnUS() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: 'Nezha Monitoring',
|
||||||
|
children: [
|
||||||
|
{ text: 'Introduction', link: '/en_US/' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Installation',
|
||||||
|
children: [
|
||||||
|
{ text: 'Install Dashboard', link: '/en_US/guide/dashboard' },
|
||||||
|
{ text: 'Install Agent', link: '/en_US/guide/agent' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Advanced Configuration',
|
||||||
|
children: [
|
||||||
|
{ text: 'Servers', link: '/guide/frontmatter' },
|
||||||
|
{ text: 'Services', link: '/guide/theming' },
|
||||||
|
{ text: 'Tasks', link: '/guide/api' },
|
||||||
|
{ text: 'Notifications', link: '/guide/api' },
|
||||||
|
{ text: 'Settings', link: '/guide/differences-from-vuepress' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'FAQ',
|
||||||
|
children: [
|
||||||
|
{ text: '问题1', link: '/guide/frontmatter' },
|
||||||
|
{ text: '问题2', link: '/guide/theming' },
|
||||||
|
{ text: '问题3', link: '/guide/api' },
|
||||||
|
{ text: '问题4', link: '/guide/api' },
|
||||||
|
{ text: '问题5', link: '/guide/differences-from-vuepress' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function getConfigSidebarEnUS() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: 'App Config',
|
||||||
|
children: [{ text: 'Basics', link: '/en_US/config/basics' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Theme Config',
|
||||||
|
children: [
|
||||||
|
{ text: 'Homepage', link: '/en_US/config/homepage' },
|
||||||
|
{ text: 'Algolia Search', link: '/en_US/config/algolia-search' },
|
||||||
|
{ text: 'Carbon Ads', link: '/en_US/config/carbon-ads' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|||||||
53
docs/en_US/config/algolia-search.md
Normal file
53
docs/en_US/config/algolia-search.md
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
# Theme Config: Algolia Search
|
||||||
|
|
||||||
|
The `themeConfig.algolia` option allows you to use [Algolia DocSearch](https://docsearch.algolia.com). To enable it, you need to provide at least appId, apiKey and indexName:
|
||||||
|
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
themeConfig: {
|
||||||
|
algolia: {
|
||||||
|
appId: 'your_app_id',
|
||||||
|
apiKey: 'your_api_key',
|
||||||
|
indexName: 'index_name'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
For more options, check out [Algolia DocSearch's documentation](https://docsearch.algolia.com/docs/api/). You can pass any extra option alongside other options, e.g. passing `searchParameters`:
|
||||||
|
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
themeConfig: {
|
||||||
|
algolia: {
|
||||||
|
appId: 'your_app_id',
|
||||||
|
apiKey: 'your_api_key',
|
||||||
|
indexName: 'index_name',
|
||||||
|
searchParameters: {
|
||||||
|
facetFilters: ['tags:guide,api']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Internationalization (i18n)
|
||||||
|
|
||||||
|
If you have multiple locales in your documentation and you have defined a `locales` object in your `themeConfig`:
|
||||||
|
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
themeConfig: {
|
||||||
|
locales: {
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
algolia: {
|
||||||
|
appId: 'your_app_id',
|
||||||
|
apiKey: 'your_api_key',
|
||||||
|
indexName: 'index_name'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
VitePress will automatically add a `lang` _facetFilter_ to the `searchParameters.facetFilter` array with the correct language value. Algolia automatically adds the correct facet filter based on the `lang` attribute on the `<html>` tag. This will match search results with the currently viewed language of the page.
|
||||||
59
docs/en_US/config/basics.md
Normal file
59
docs/en_US/config/basics.md
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
# App Config: Basics
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
The config reference is incomplete since the config format may still receive further changes. For a complete reference of the current available options, refer to [config.ts](https://github.com/vuejs/vitepress/blob/45b65ce8b63bd54f345bfc3383eb2416b6769dc9/src/node/config.ts#L30-L65).
|
||||||
|
:::
|
||||||
|
|
||||||
|
## base
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `/`
|
||||||
|
|
||||||
|
The base URL the site will be deployed at. You will need to set this if you plan to deploy your site under a sub path, for example, GitHub pages. If you plan to deploy your site to `https://foo.github.io/bar/`, then you should set base to `'/bar/'`. It should always start and end with a slash.
|
||||||
|
|
||||||
|
The `base` is automatically prepended to all the URLs that start with `/` in other options, so you only need to specify it once.
|
||||||
|
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
base: '/base/'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## lang
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `en-US`
|
||||||
|
|
||||||
|
The `lang` attribute for the site. This will render as a `<html lang="en-US">` tag in the page HTML.
|
||||||
|
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
lang: 'en-US'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## title
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `VitePress`
|
||||||
|
|
||||||
|
Title for the site. This will be the suffix for all page titles, and displayed in the navbar.
|
||||||
|
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
title: 'VitePress'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## description
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `A VitePress site`
|
||||||
|
|
||||||
|
Description for the site. This will render as a `<meta>` tag in the page HTML.
|
||||||
|
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
description: 'A VitePress site'
|
||||||
|
}
|
||||||
|
```
|
||||||
15
docs/en_US/config/carbon-ads.md
Normal file
15
docs/en_US/config/carbon-ads.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
# Theme Config: Carbon Ads
|
||||||
|
|
||||||
|
VitePress has built in native support for [Carbon Ads](https://www.carbonads.net). By defining the Carbon Ads credentials in config, VitePress will display ads on the page.
|
||||||
|
|
||||||
|
```js
|
||||||
|
module.exports = {
|
||||||
|
themeConfig: {
|
||||||
|
carbonAds: {
|
||||||
|
carbon: 'your-carbon-key',
|
||||||
|
custom: 'your-carbon-custom',
|
||||||
|
placement: 'your-carbon-placement'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
23
docs/en_US/config/homepage.md
Normal file
23
docs/en_US/config/homepage.md
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
# Theme Config: Homepage
|
||||||
|
|
||||||
|
VitePress provides a homepage layout. To use it, specify `home: true` plus some other metadata in your root `index.md`'s [YAML frontmatter](../guide/frontmatter). This is an example of how it works:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
home: true
|
||||||
|
heroImage: /logo.png
|
||||||
|
heroAlt: Logo image
|
||||||
|
heroText: Hero Title
|
||||||
|
tagline: Hero subtitle
|
||||||
|
actionText: Get Started
|
||||||
|
actionLink: /guide/
|
||||||
|
features:
|
||||||
|
- title: Simplicity First
|
||||||
|
details: Minimal setup with markdown-centered project structure helps you focus on writing.
|
||||||
|
- title: Vue-Powered
|
||||||
|
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
|
||||||
|
- title: Performant
|
||||||
|
details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
|
||||||
|
footer: MIT Licensed | Copyright © 2019-present Evan You
|
||||||
|
---
|
||||||
|
```
|
||||||
106
docs/en_US/guide/agent.md
Normal file
106
docs/en_US/guide/agent.md
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
**哪吒监控的被控端服务被称为Agent，本文档将介绍如何在被控端服务器上安装Agent，并与Dashboard连接**
|
||||||
|
<br/>
|
||||||
|
## Install Agent using one-click script
|
||||||
|
目前哪吒监控已支持在WIndows和Linux上一键安装Agent，遵循本文档的步骤，你可以很轻松的在服务器上部署它
|
||||||
|
<br/>
|
||||||
|
### 准备工作
|
||||||
|
---
|
||||||
|
你需要提前在管理面板中设置好通信域名，此域名不可以接入CDN，这里以前面提到过的示例通信域名 “data.example.com” 来做演示
|
||||||
|
进入后台管理面板，转到“设置”页，在“未接入CDN的面板服务器域名/IP”项中填入通信域名，然后点击"保存"
|
||||||
|
<br/>
|
||||||
|
### Linux一键安装
|
||||||
|
---
|
||||||
|
* 首先在管理面板中添加一台服务器
|
||||||
|
* 点击新添加的服务器旁，绿色的Linux图标按钮，复制一键安装命令
|
||||||
|
* 在被控端服务器中运行复制的一键安装命令，等待安装完成后返回到Dashboard主页查看服务器是否上线
|
||||||
|
<br/>
|
||||||
|
### Windows一键安装
|
||||||
|
---
|
||||||
|
* 首先在管理面板中添加一台服务器
|
||||||
|
* 点击新添加的服务器旁，绿色的Windows图标按钮，复制一键安装命令
|
||||||
|
* 进入Windows服务器，运行PowerShell，在PowerShell中运行复制的安装命令
|
||||||
|
* 如遇到确认「执行策略变更」请选择 Y
|
||||||
|
* 等待安装完成后返回Dashboard主页查看服务器是否上线
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
## 其他方式安装Agent
|
||||||
|
---
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### Linux安装Agent
|
||||||
|
---
|
||||||
|
* 首先在管理面板中添加一台服务器
|
||||||
|
* 在被控服务器中，运行脚本（位于中国大陆的服务器请使用镜像）：
|
||||||
|
```bash
|
||||||
|
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh
|
||||||
|
|
||||||
|
```
|
||||||
|
* 选择“安装监控Agent”
|
||||||
|
* 输入通信域名，如：”data.example.com“
|
||||||
|
* 输入面板通信端口，默认为5555
|
||||||
|
* 输入Agent密钥，Agent密钥在管理面板中添加服务器时生成，可以在管理面板中的“主机”页中找到
|
||||||
|
* 等待安装完成后返回Dashboard主页查看服务器是否上线
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### Windows安装Agent
|
||||||
|
---
|
||||||
|
- 请参考社区文章：
|
||||||
|
[哪吒探针 - Windows 客户端安装](https://nyko.me/2020/12/13/nezha-windows-client.html)
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### OpenWRT安装Agent
|
||||||
|
---
|
||||||
|
**如何使 旧版OpenWRT/LEDE 自启动**
|
||||||
|
- 请参考项目：
|
||||||
|
[哪吒监控 For OpenWRT](https://github.com/Erope/openwrt_nezha)
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**如何使 新版OpenWRT 自启动？来自 @艾斯德斯**
|
||||||
|
* 首先在 release 下载对应的二进制解压 zip 包后放置到 `/root`
|
||||||
|
* 运行 `chmod +x /root/nezha-agent` 赋予执行权限，然后创建 `/etc/init.d/nezha-service`：
|
||||||
|
|
||||||
|
```shell
|
||||||
|
#!/bin/sh /etc/rc.common
|
||||||
|
|
||||||
|
START=99
|
||||||
|
USE_PROCD=1
|
||||||
|
|
||||||
|
start_service() {
|
||||||
|
procd_open_instance
|
||||||
|
procd_set_param command /root/nezha-agent -s 面板通信地址:端口 -p 秘钥 -d
|
||||||
|
procd_set_param respawn
|
||||||
|
procd_close_instance
|
||||||
|
}
|
||||||
|
|
||||||
|
stop_service() {
|
||||||
|
killall nezha-agent
|
||||||
|
}
|
||||||
|
|
||||||
|
restart() {
|
||||||
|
stop
|
||||||
|
sleep 2
|
||||||
|
start
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
* 运行 `chmod +x /etc/init.d/nezha-service` 赋予执行权限
|
||||||
|
* 启动服务： `/etc/init.d/nezha-service enable && /etc/init.d/nezha-service start`
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
## 自定义Agent监控项目
|
||||||
|
---
|
||||||
|
#### 自定义监控的网卡和硬盘分区
|
||||||
|
|
||||||
|
* 执行 `/opt/nezha/agent/nezha-agent --edit-agent-config` 来选择自定义的网卡和分区，然后重启 Agent 即可生效
|
||||||
|
|
||||||
|
#### 其他运行参数
|
||||||
|
|
||||||
|
通过执行 `./nezha-agent --help` 查看支持的参数，如果你使用了一键脚本安装Agent，可以编辑 `/etc/systemd/system/nezha-agent.service`，在 `ExecStart=` 这一行的末尾加上以下参数
|
||||||
|
|
||||||
|
- `--report-delay` 控制系统信息上报的间隔，默认为 1 秒，可以设置为 3 来进一步降低 agent 端系统资源占用（配置区间 1-4）
|
||||||
|
- `--skip-conn` 不监控连接数，推荐 机场/连接密集型服务器或CPU占用较高的服务器设置
|
||||||
|
- `--skip-procs` 不监控进程数，也可以降低 agent 占用
|
||||||
|
- `--disable-auto-update` 禁止 **自动更新** Agent（安全特性）
|
||||||
|
- `--disable-force-update` 禁止 **强制更新** Agent（安全特性）
|
||||||
|
- `--disable-command-execute` 禁止在 Agent 上执行定时任务、打开在线终端（安全特性）
|
||||||
|
- `--tls` 启用 SSL/TLS 加密（使用 nginx 反向代理 Agent 的 grpc 连接，并且 nginx 开启 SSL/TLS 时，需要启用该项配置）
|
||||||
103
docs/en_US/guide/dashboard.md
Normal file
103
docs/en_US/guide/dashboard.md
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
### Preparations
|
||||||
|
----
|
||||||
|
搭建一个哪吒监控，你需要：
|
||||||
|
1. 一台可以连接公网的VPS，防火墙和安全策略需要放行8008和5555端口，否则会无法访问和无法接收数据。单核512MB内存的服务器配置就足以满足大多数使用场景
|
||||||
|
2. 一个已经设置好A记录，指向Dashboard服务器ip的域名
|
||||||
|
::: tip
|
||||||
|
如果你想使用CDN，请准备两个域名，一个配置好CDN用作公开访问，CDN需要支持WebSocket协议；另一个域名不要使用CDN，用作Agent端与Dashboard的通信
|
||||||
|
本文档分别以 "cdn.example.com" 和 "data.example.com" 两个域名来演示
|
||||||
|
:::
|
||||||
|
3. 一个Github/Gitee账号
|
||||||
|
|
||||||
|
**本文档将以宝塔面板反代面板的过程作为范例，随着未来版本的变化，部分功能的入口可能会发生改变，本文档仅供参考**
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
### 获取Github的Client ID和密钥
|
||||||
|
----
|
||||||
|
哪吒监控接入Github和Gitee作为后台管理员账号
|
||||||
|
+ 首先我们需要新建一个验证应用，以Github为例，登陆Github后，打开 https://github.com/settings/developers ，依次选择“OAuth Apps” - “New OAuth App”
|
||||||
|
`Application name` - 随意填写
|
||||||
|
`Homepage URL` - 填写面板的访问域名，如："http://cdn.example.com"
|
||||||
|
`Authorization callback URL` - 填写回调地址，如："http://cdn.example.com/oauth2/callback"
|
||||||
|
+ 点击“Register application”
|
||||||
|
+ 保存页面中的Client ID，然后点击 “Generate a new client secret“，创建一个新的Client Secret，新建的密钥仅会显示一次，请妥善保存
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
### 在服务器中安装Dashboard
|
||||||
|
---
|
||||||
|
* 在面板服务器中，运行安装脚本：
|
||||||
|
```bash
|
||||||
|
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh
|
||||||
|
```
|
||||||
|
如果你的面板服务器位于中国大陆，可以使用镜像：
|
||||||
|
````bash
|
||||||
|
curl -L https://fastly.jsdelivr.net/gh/naiba/nezha@master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo CN=true ./nezha.sh
|
||||||
|
````
|
||||||
|
|
||||||
|
* 等待Docker安装完毕后，分别输入以下值：
|
||||||
|
`OAuth提供商` - Github或Gitee
|
||||||
|
`Client ID` - 之前保存的Client ID
|
||||||
|
`Client Secret` - 之前保存的密钥
|
||||||
|
`用户名` - Github或Gitee的用户名
|
||||||
|
`站点标题` - 自定义站点标题
|
||||||
|
`访问端口` - 公开访问端口，可自定义，默认8008
|
||||||
|
`Agent的通信端口` - Agent与Dashboard的通信端口，默认5555
|
||||||
|
|
||||||
|
* 输入完成后，等待拉取镜像
|
||||||
|
安装结束后，如果一切正常，此时你可以访问域名+端口号，如 “http://cdn.example.com:8008” 来查看面板
|
||||||
|
|
||||||
|
* 将来如果需要再次运行脚本，可以运行：
|
||||||
|
```bash
|
||||||
|
./nezha.sh
|
||||||
|
```
|
||||||
|
来打开管理脚本
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
### 配置反向代理
|
||||||
|
---
|
||||||
|
* 在宝塔面板中新建一个站点，域名填写公开访问域名，如 “http://cdn.example.com“ ，然后点击“设置”进入站点设置选项，选择“反向代理” - “新建反向代理”
|
||||||
|
|
||||||
|
* 自定义一个代理名称，在下方“目标URL”中填入 `http://127.0.0.1` 然后点击“保存”
|
||||||
|
|
||||||
|
* 打开刚刚新建的反向代理右边的“配置文件”，将配置文件替换为以下内容：
|
||||||
|
````nginx
|
||||||
|
#PROXY-START/
|
||||||
|
location / {
|
||||||
|
proxy_pass http://127.0.0.1:8008;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
}
|
||||||
|
location ~ ^/(ws|terminal/.+)$ {
|
||||||
|
proxy_pass http://127.0.0.1:8008;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection "Upgrade";
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
}
|
||||||
|
#PROXY-END/
|
||||||
|
````
|
||||||
|
* 点击“保存”
|
||||||
|
现在，你应该可以直接使用域名，如：“http://cdn.example.com“ 来访问面板了
|
||||||
|
<br/>
|
||||||
|
#### 扩展内容：
|
||||||
|
|
||||||
|
|
||||||
|
* CaddyServer v1（v2 无需特别配置）
|
||||||
|
|
||||||
|
```Caddyfile
|
||||||
|
proxy /ws http://ip:8008 {
|
||||||
|
websocket
|
||||||
|
}
|
||||||
|
proxy /terminal/* http://ip:8008 {
|
||||||
|
websocket
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### 在宝塔面板中配置SSL
|
||||||
|
---
|
||||||
|
首先，先暂时关闭反向代理
|
||||||
|
正如在其他网站中配置SSL证书一样，进入站点设置中的“SSL”，你可以选择自动申请 Let´s Encrypt 证书或手动配置已有的证书
|
||||||
|
完成SSL的设置后，你需要回到 https://github.com/settings/developers ，编辑之前创建的验证应用程序，将之前我们填入的"Homepage URL"和"Authorization callback URL"中的域名全部从`http`改为`https`，如："https://cdn.example.com" 和 "https://cdn.example.com/oauth2/callback" ，**不更改此项可能会导致你无法登陆面板后台**
|
||||||
1
docs/en_US/index.md
Normal file
1
docs/en_US/index.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
## What is Nezha Monitoring?
|
||||||
107
docs/guide/agent.md
Normal file
107
docs/guide/agent.md
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
**哪吒监控的被控端服务被称为Agent，本文档将介绍如何在被控端服务器上安装Agent，并与Dashboard连接**
|
||||||
|
<br/>
|
||||||
|
## 一键安装Agent
|
||||||
|
---
|
||||||
|
目前哪吒监控已支持在WIndows和Linux上一键安装Agent，遵循本文档的步骤，你可以很轻松的在服务器上部署它
|
||||||
|
<br/>
|
||||||
|
### 准备工作
|
||||||
|
---
|
||||||
|
你需要提前在管理面板中设置好通信域名，此域名不可以接入CDN，这里以前面提到过的示例通信域名 “data.example.com” 来做演示
|
||||||
|
进入后台管理面板，转到“设置”页，在“未接入CDN的面板服务器域名/IP”项中填入通信域名，然后点击"保存"
|
||||||
|
<br/>
|
||||||
|
### Linux一键安装
|
||||||
|
---
|
||||||
|
* 首先在管理面板中添加一台服务器
|
||||||
|
* 点击新添加的服务器旁，绿色的Linux图标按钮，复制一键安装命令
|
||||||
|
* 在被控端服务器中运行复制的一键安装命令，等待安装完成后返回到Dashboard主页查看服务器是否上线
|
||||||
|
<br/>
|
||||||
|
### Windows一键安装
|
||||||
|
---
|
||||||
|
* 首先在管理面板中添加一台服务器
|
||||||
|
* 点击新添加的服务器旁，绿色的Windows图标按钮，复制一键安装命令
|
||||||
|
* 进入Windows服务器，运行PowerShell，在PowerShell中运行复制的安装命令
|
||||||
|
* 如遇到确认「执行策略变更」请选择 Y
|
||||||
|
* 等待安装完成后返回Dashboard主页查看服务器是否上线
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
## 其他方式安装Agent
|
||||||
|
---
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### Linux安装Agent
|
||||||
|
---
|
||||||
|
* 首先在管理面板中添加一台服务器
|
||||||
|
* 在被控服务器中，运行脚本（位于中国大陆的服务器请使用镜像）：
|
||||||
|
```bash
|
||||||
|
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh
|
||||||
|
|
||||||
|
```
|
||||||
|
* 选择“安装监控Agent”
|
||||||
|
* 输入通信域名，如：”data.example.com“
|
||||||
|
* 输入面板通信端口，默认为5555
|
||||||
|
* 输入Agent密钥，Agent密钥在管理面板中添加服务器时生成，可以在管理面板中的“主机”页中找到
|
||||||
|
* 等待安装完成后返回Dashboard主页查看服务器是否上线
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### Windows安装Agent
|
||||||
|
---
|
||||||
|
- 请参考社区文章：
|
||||||
|
[哪吒探针 - Windows 客户端安装](https://nyko.me/2020/12/13/nezha-windows-client.html)
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### OpenWRT安装Agent
|
||||||
|
---
|
||||||
|
**如何使 旧版OpenWRT/LEDE 自启动**
|
||||||
|
- 请参考项目：
|
||||||
|
[哪吒监控 For OpenWRT](https://github.com/Erope/openwrt_nezha)
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
**如何使 新版OpenWRT 自启动？来自 @艾斯德斯**
|
||||||
|
* 首先在 release 下载对应的二进制解压 zip 包后放置到 `/root`
|
||||||
|
* 运行 `chmod +x /root/nezha-agent` 赋予执行权限，然后创建 `/etc/init.d/nezha-service`：
|
||||||
|
|
||||||
|
```shell
|
||||||
|
#!/bin/sh /etc/rc.common
|
||||||
|
|
||||||
|
START=99
|
||||||
|
USE_PROCD=1
|
||||||
|
|
||||||
|
start_service() {
|
||||||
|
procd_open_instance
|
||||||
|
procd_set_param command /root/nezha-agent -s 面板通信地址:端口 -p 秘钥 -d
|
||||||
|
procd_set_param respawn
|
||||||
|
procd_close_instance
|
||||||
|
}
|
||||||
|
|
||||||
|
stop_service() {
|
||||||
|
killall nezha-agent
|
||||||
|
}
|
||||||
|
|
||||||
|
restart() {
|
||||||
|
stop
|
||||||
|
sleep 2
|
||||||
|
start
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
* 运行 `chmod +x /etc/init.d/nezha-service` 赋予执行权限
|
||||||
|
* 启动服务： `/etc/init.d/nezha-service enable && /etc/init.d/nezha-service start`
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
## 自定义Agent监控项目
|
||||||
|
---
|
||||||
|
#### 自定义监控的网卡和硬盘分区
|
||||||
|
|
||||||
|
* 执行 `/opt/nezha/agent/nezha-agent --edit-agent-config` 来选择自定义的网卡和分区，然后重启 Agent 即可生效
|
||||||
|
|
||||||
|
#### 其他运行参数
|
||||||
|
|
||||||
|
通过执行 `./nezha-agent --help` 查看支持的参数，如果你使用了一键脚本安装Agent，可以编辑 `/etc/systemd/system/nezha-agent.service`，在 `ExecStart=` 这一行的末尾加上以下参数
|
||||||
|
|
||||||
|
- `--report-delay` 控制系统信息上报的间隔，默认为 1 秒，可以设置为 3 来进一步降低 agent 端系统资源占用（配置区间 1-4）
|
||||||
|
- `--skip-conn` 不监控连接数，推荐 机场/连接密集型服务器或CPU占用较高的服务器设置
|
||||||
|
- `--skip-procs` 不监控进程数，也可以降低 agent 占用
|
||||||
|
- `--disable-auto-update` 禁止 **自动更新** Agent（安全特性）
|
||||||
|
- `--disable-force-update` 禁止 **强制更新** Agent（安全特性）
|
||||||
|
- `--disable-command-execute` 禁止在 Agent 上执行定时任务、打开在线终端（安全特性）
|
||||||
|
- `--tls` 启用 SSL/TLS 加密（使用 nginx 反向代理 Agent 的 grpc 连接，并且 nginx 开启 SSL/TLS 时，需要启用该项配置）
|
||||||
@ -1,95 +0,0 @@
|
|||||||
# API Reference
|
|
||||||
|
|
||||||
## Helper Methods
|
|
||||||
|
|
||||||
The following methods are globally importable from `vitepress` and are typically used in custom theme Vue components. However, they are also usable inside `.md` pages because markdown files are compiled into Vue single-file components.
|
|
||||||
|
|
||||||
Methods that start with `use*` indicates that it is a [Vue 3 Composition API](https://vuejs.org/guide/introduction.html#composition-api) function that can only be used inside `setup()` or `<script setup>`.
|
|
||||||
|
|
||||||
### `useData`
|
|
||||||
|
|
||||||
Returns page-specific data. The returned object has the following type:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface VitePressData {
|
|
||||||
site: Ref<SiteData>
|
|
||||||
page: Ref<PageData>
|
|
||||||
theme: Ref<any> // themeConfig from .vitepress/config.js
|
|
||||||
frontmatter: Ref<PageData['frontmatter']>
|
|
||||||
title: Ref<string>
|
|
||||||
description: Ref<string>
|
|
||||||
lang: Ref<string>
|
|
||||||
localePath: Ref<string>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { useData } from 'vitepress'
|
|
||||||
const { theme } = useData()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>{{ theme.heroText }}</h1>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### `useRoute`
|
|
||||||
|
|
||||||
Returns the current route object with the following type:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface Route {
|
|
||||||
path: string
|
|
||||||
data: PageData
|
|
||||||
component: Component | null
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### `useRouter`
|
|
||||||
|
|
||||||
Returns the VitePress router instance so you can programmatically navigate to another page.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface Router {
|
|
||||||
route: Route
|
|
||||||
go: (href?: string) => Promise<void>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### `withBase`
|
|
||||||
|
|
||||||
- **Type**: `(path: string) => string`
|
|
||||||
|
|
||||||
Appends the configured [`base`](../config/basics#base) to a given URL path. Also see [Base URL](./assets#base-url).
|
|
||||||
|
|
||||||
## Global Components
|
|
||||||
|
|
||||||
VitePress comes with few built-in component that can be used globally. You may use these components in your markdown or your custom theme configuration.
|
|
||||||
|
|
||||||
### `<Content/>`
|
|
||||||
|
|
||||||
The `<Content/>` component displays the rendered markdown contents. Useful [when creating your own theme](./theming).
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<h1>Custom Layout!</h1>
|
|
||||||
<Content />
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### `<ClientOnly/>`
|
|
||||||
|
|
||||||
The `<ClientOnly/>` component renders its slot only at client side.
|
|
||||||
|
|
||||||
Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.
|
|
||||||
|
|
||||||
If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the `ClientOnly` component.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ClientOnly>
|
|
||||||
<NonSSRFriendlyComponent />
|
|
||||||
</ClientOnly>
|
|
||||||
```
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
# Asset Handling
|
|
||||||
|
|
||||||
All Markdown files are compiled into Vue components and processed by [Vite](https://github.com/vitejs/vite). You can, **and should**, reference any assets using relative URLs:
|
|
||||||
|
|
||||||
```md
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
You can reference static assets in your markdown files, your `*.vue` components in the theme, styles and plain `.css` files either using absolute public paths (based on project root) or relative paths (based on your file system). The latter is similar to the behavior you are used to if you have used `vue-cli` or webpack's `file-loader`.
|
|
||||||
|
|
||||||
Common image, media, and font filetypes are detected and included as assets automatically.
|
|
||||||
|
|
||||||
All referenced assets, including those using absolute paths, will be copied to the dist folder with a hashed file name in the production build. Never-referenced assets will not be copied. Similar to `vue-cli`, image assets smaller than 4kb will be base64 inlined.
|
|
||||||
|
|
||||||
All **static** path references, including absolute paths, should be based on your working directory structure.
|
|
||||||
|
|
||||||
## Public Files
|
|
||||||
|
|
||||||
Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components (for example, favicons and PWA icons). The `public` directory under project root can be used as an escape hatch to provide static assets that either are never referenced in source code (e.g. `robots.txt`), or must retain the exact same file name (without hashing).
|
|
||||||
|
|
||||||
Assets placed in `public` will be copied to the root of the dist directory as-is.
|
|
||||||
|
|
||||||
Note that you should reference files placed in `public` using root absolute path - for example, `public/icon.png` should always be referenced in source code as `/icon.png`.
|
|
||||||
|
|
||||||
## Base URL
|
|
||||||
|
|
||||||
If your site is deployed to a non-root URL, you will need to set the `base` option in `.vitepress/config.js`. For example, if you plan to deploy your site to `https://foo.github.io/bar/`, then `base` should be set to `'/bar/'` (it should always start and end with a slash).
|
|
||||||
|
|
||||||
All your static asset paths are automatically processed to adjust for different `base` config values. For example, if you have an absolute reference to an asset under `public` in your markdown:
|
|
||||||
|
|
||||||
```md
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
You do **not** need to update it when you change the `base` config value in this case.
|
|
||||||
|
|
||||||
However, if you are authoring a theme component that links to assets dynamically, e.g. an image whose `src` is based on a theme config value:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<img :src="theme.logoPath" />
|
|
||||||
```
|
|
||||||
|
|
||||||
In this case it is recommended to wrap the path with the [`withBase` helper](./api#withbase) provided by VitePress:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { withBase, useData } from 'vitepress'
|
|
||||||
|
|
||||||
const { theme } = useData()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<img :src="withBase(theme.logoPath)" />
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
# Configuration
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Without any configuration, the page is pretty minimal, and the user has no way to navigate around the site. To customize your site, let’s first create a `.vitepress` directory inside your docs directory. This is where all VitePress-specific files will be placed. Your project structure is probably like this:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
.
|
|
||||||
├─ docs
|
|
||||||
│ ├─ .vitepress
|
|
||||||
│ │ └─ config.js
|
|
||||||
│ └─ index.md
|
|
||||||
└─ package.json
|
|
||||||
```
|
|
||||||
|
|
||||||
The essential file for configuring a VitePress site is `.vitepress/config.js`, which should export a JavaScript object:
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
title: 'Hello VitePress',
|
|
||||||
description: 'Just playing around.'
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Check out the [Config Reference](../config/basics) for a full list of options.
|
|
||||||
|
|
||||||
## Config Intellisense
|
|
||||||
|
|
||||||
Since VitePress ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:
|
|
||||||
|
|
||||||
```js
|
|
||||||
/**
|
|
||||||
* @type {import('vitepress').UserConfig}
|
|
||||||
*/
|
|
||||||
const config = {
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
|
|
||||||
export default config
|
|
||||||
```
|
|
||||||
|
|
||||||
Alternatively, you can use the `defineConfig` helper at which should provide intellisense without the need for jsdoc annotations:
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { defineConfig } from 'vitepress'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
// ...
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
VitePress also directly supports TS config files. You can use `.vitepress/config.ts` with the `defineConfig` helper as well.
|
|
||||||
|
|
||||||
## Typed Theme Config
|
|
||||||
|
|
||||||
By default, `defineConfig` helper leverages the theme config type from default theme:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { defineConfig } from 'vitepress'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
themeConfig: {
|
|
||||||
// Type is `DefaultTheme.Config`
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
If you use a custom theme and want type checks for the theme config, you'll need to use `defineConfigWithTheme` instead, and pass the config type for your custom theme via a generic argument:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { defineConfigWithTheme } from 'vitepress'
|
|
||||||
import { ThemeConfig } from 'your-theme'
|
|
||||||
|
|
||||||
export default defineConfigWithTheme<ThemeConfig>({
|
|
||||||
themeConfig: {
|
|
||||||
// Type is `ThemeConfig`
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
103
docs/guide/dashboard.md
Normal file
103
docs/guide/dashboard.md
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
### 准备工作
|
||||||
|
----
|
||||||
|
搭建一个哪吒监控，你需要：
|
||||||
|
1. 一台可以连接公网的VPS，防火墙和安全策略需要放行8008和5555端口，否则会无法访问和无法接收数据。单核512MB内存的服务器配置就足以满足大多数使用场景
|
||||||
|
2. 一个已经设置好A记录，指向Dashboard服务器ip的域名
|
||||||
|
::: tip
|
||||||
|
如果你想使用CDN，请准备两个域名，一个配置好CDN用作公开访问，CDN需要支持WebSocket协议；另一个域名不要使用CDN，用作Agent端与Dashboard的通信
|
||||||
|
本文档分别以 "cdn.example.com" 和 "data.example.com" 两个域名来演示
|
||||||
|
:::
|
||||||
|
3. 一个Github/Gitee账号
|
||||||
|
|
||||||
|
**本文档将以宝塔面板反代面板的过程作为范例，随着未来版本的变化，部分功能的入口可能会发生改变，本文档仅供参考**
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
### 获取Github的Client ID和密钥
|
||||||
|
----
|
||||||
|
哪吒监控接入Github和Gitee作为后台管理员账号
|
||||||
|
+ 首先我们需要新建一个验证应用，以Github为例，登陆Github后，打开 https://github.com/settings/developers ，依次选择“OAuth Apps” - “New OAuth App”
|
||||||
|
`Application name` - 随意填写
|
||||||
|
`Homepage URL` - 填写面板的访问域名，如："http://cdn.example.com"
|
||||||
|
`Authorization callback URL` - 填写回调地址，如："http://cdn.example.com/oauth2/callback"
|
||||||
|
+ 点击“Register application”
|
||||||
|
+ 保存页面中的Client ID，然后点击 “Generate a new client secret“，创建一个新的Client Secret，新建的密钥仅会显示一次，请妥善保存
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
### 在服务器中安装Dashboard
|
||||||
|
---
|
||||||
|
* 在面板服务器中，运行安装脚本：
|
||||||
|
```bash
|
||||||
|
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh
|
||||||
|
```
|
||||||
|
如果你的面板服务器位于中国大陆，可以使用镜像：
|
||||||
|
````bash
|
||||||
|
curl -L https://fastly.jsdelivr.net/gh/naiba/nezha@master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo CN=true ./nezha.sh
|
||||||
|
````
|
||||||
|
|
||||||
|
* 等待Docker安装完毕后，分别输入以下值：
|
||||||
|
`OAuth提供商` - Github或Gitee
|
||||||
|
`Client ID` - 之前保存的Client ID
|
||||||
|
`Client Secret` - 之前保存的密钥
|
||||||
|
`用户名` - Github或Gitee的用户名
|
||||||
|
`站点标题` - 自定义站点标题
|
||||||
|
`访问端口` - 公开访问端口，可自定义，默认8008
|
||||||
|
`Agent的通信端口` - Agent与Dashboard的通信端口，默认5555
|
||||||
|
|
||||||
|
* 输入完成后，等待拉取镜像
|
||||||
|
安装结束后，如果一切正常，此时你可以访问域名+端口号，如 “http://cdn.example.com:8008” 来查看面板
|
||||||
|
|
||||||
|
* 将来如果需要再次运行脚本，可以运行：
|
||||||
|
```bash
|
||||||
|
./nezha.sh
|
||||||
|
```
|
||||||
|
来打开管理脚本
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
### 配置反向代理
|
||||||
|
---
|
||||||
|
* 在宝塔面板中新建一个站点，域名填写公开访问域名，如 “http://cdn.example.com“ ，然后点击“设置”进入站点设置选项，选择“反向代理” - “新建反向代理”
|
||||||
|
|
||||||
|
* 自定义一个代理名称，在下方“目标URL”中填入 `http://127.0.0.1` 然后点击“保存”
|
||||||
|
|
||||||
|
* 打开刚刚新建的反向代理右边的“配置文件”，将配置文件替换为以下内容：
|
||||||
|
````nginx
|
||||||
|
#PROXY-START/
|
||||||
|
location / {
|
||||||
|
proxy_pass http://127.0.0.1:8008;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
}
|
||||||
|
location ~ ^/(ws|terminal/.+)$ {
|
||||||
|
proxy_pass http://127.0.0.1:8008;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection "Upgrade";
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
}
|
||||||
|
#PROXY-END/
|
||||||
|
````
|
||||||
|
* 点击“保存”
|
||||||
|
现在，你应该可以直接使用域名，如：“http://cdn.example.com“ 来访问面板了
|
||||||
|
<br/>
|
||||||
|
#### 扩展内容：
|
||||||
|
|
||||||
|
|
||||||
|
* CaddyServer v1（v2 无需特别配置）
|
||||||
|
|
||||||
|
```Caddyfile
|
||||||
|
proxy /ws http://ip:8008 {
|
||||||
|
websocket
|
||||||
|
}
|
||||||
|
proxy /terminal/* http://ip:8008 {
|
||||||
|
websocket
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
### 在宝塔面板中配置SSL
|
||||||
|
---
|
||||||
|
首先，先暂时关闭反向代理
|
||||||
|
正如在其他网站中配置SSL证书一样，进入站点设置中的“SSL”，你可以选择自动申请 Let´s Encrypt 证书或手动配置已有的证书
|
||||||
|
完成SSL的设置后，你需要回到 https://github.com/settings/developers ，编辑之前创建的验证应用程序，将之前我们填入的"Homepage URL"和"Authorization callback URL"中的域名全部从`http`改为`https`，如："https://cdn.example.com" 和 "https://cdn.example.com/oauth2/callback" ，**不更改此项可能会导致你无法登陆面板后台**
|
||||||
@ -1,267 +0,0 @@
|
|||||||
---
|
|
||||||
sidebarDepth: 3
|
|
||||||
---
|
|
||||||
|
|
||||||
# Deploying
|
|
||||||
|
|
||||||
The following guides are based on some shared assumptions:
|
|
||||||
|
|
||||||
- You are placing your docs inside the `docs` directory of your project;
|
|
||||||
- You are using the default build output location (`.vitepress/dist`);
|
|
||||||
- VitePress is installed as a local dependency in your project, and you have setup the following npm scripts:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"scripts": {
|
|
||||||
"docs:build": "vitepress build docs",
|
|
||||||
"docs:serve": "vitepress serve docs"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Building The Docs
|
|
||||||
|
|
||||||
You may run `yarn docs:build` command to build the docs.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ yarn docs:build
|
|
||||||
```
|
|
||||||
|
|
||||||
By default, the build output will be placed at `.vitepress/dist`. You may deploy this `dist` folder to any of your preferred platforms.
|
|
||||||
|
|
||||||
### Testing The Docs Locally
|
|
||||||
|
|
||||||
Once you've built the docs, you may test them locally by running `yarn docs:serve` command.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ yarn docs:build
|
|
||||||
$ yarn docs:serve
|
|
||||||
```
|
|
||||||
|
|
||||||
The `serve` command will boot up local static web server that serves the files from `.vitepress/dist` at `http://localhost:5000`. It's an easy way to check if the production build looks OK in your local environment.
|
|
||||||
|
|
||||||
You may configure the port of the server py passing `--port` flag as an argument.
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"scripts": {
|
|
||||||
"docs:serve": "vitepress serve docs --port 8080"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Now the `docs:serve` method will launch the server at `http://localhost:8080`.
|
|
||||||
|
|
||||||
## GitHub Pages
|
|
||||||
|
|
||||||
1. Set the correct `base` in `docs/.vitepress/config.js`.
|
|
||||||
|
|
||||||
If you are deploying to `https://<USERNAME>.github.io/`, you can omit `base` as it defaults to `'/'`.
|
|
||||||
|
|
||||||
If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, for example your repository is at `https://github.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
|
|
||||||
|
|
||||||
2. Inside your project, create `deploy.sh` with the following content (with highlighted lines uncommented appropriately), and run it to deploy:
|
|
||||||
|
|
||||||
```bash{13,20,23}
|
|
||||||
#!/usr/bin/env sh
|
|
||||||
|
|
||||||
# abort on errors
|
|
||||||
set -e
|
|
||||||
|
|
||||||
# build
|
|
||||||
npm run docs:build
|
|
||||||
|
|
||||||
# navigate into the build output directory
|
|
||||||
cd docs/.vitepress/dist
|
|
||||||
|
|
||||||
# if you are deploying to a custom domain
|
|
||||||
# echo 'www.example.com' > CNAME
|
|
||||||
|
|
||||||
git init
|
|
||||||
git add -A
|
|
||||||
git commit -m 'deploy'
|
|
||||||
|
|
||||||
# if you are deploying to https://<USERNAME>.github.io
|
|
||||||
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
|
|
||||||
|
|
||||||
# if you are deploying to https://<USERNAME>.github.io/<REPO>
|
|
||||||
# git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages
|
|
||||||
|
|
||||||
cd -
|
|
||||||
```
|
|
||||||
|
|
||||||
::: tip
|
|
||||||
You can also run the above script in your CI setup to enable automatic deployment on each push.
|
|
||||||
:::
|
|
||||||
|
|
||||||
### GitHub Pages and Travis CI
|
|
||||||
|
|
||||||
1. Set the correct `base` in `docs/.vitepress/config.js`.
|
|
||||||
|
|
||||||
If you are deploying to `https://<USERNAME or GROUP>.github.io/`, you can omit `base` as it defaults to `'/'`.
|
|
||||||
|
|
||||||
If you are deploying to `https://<USERNAME or GROUP>.github.io/<REPO>/`, for example your repository is at `https://github.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
|
|
||||||
|
|
||||||
2. Create a file named `.travis.yml` in the root of your project.
|
|
||||||
|
|
||||||
3. Run `yarn` or `npm install` locally and commit the generated lockfile (that is `yarn.lock` or `package-lock.json`).
|
|
||||||
|
|
||||||
4. Use the GitHub Pages deploy provider template, and follow the [Travis CI documentation](https://docs.travis-ci.com/user/deployment/pages).
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
language: node_js
|
|
||||||
node_js:
|
|
||||||
- lts/*
|
|
||||||
install:
|
|
||||||
- yarn install # npm ci
|
|
||||||
script:
|
|
||||||
- yarn docs:build # npm run docs:build
|
|
||||||
deploy:
|
|
||||||
provider: pages
|
|
||||||
skip_cleanup: true
|
|
||||||
local_dir: docs/.vitepress/dist
|
|
||||||
# A token generated on GitHub allowing Travis to push code on you repository.
|
|
||||||
# Set in the Travis settings page of your repository, as a secure variable.
|
|
||||||
github_token: $GITHUB_TOKEN
|
|
||||||
keep_history: true
|
|
||||||
on:
|
|
||||||
branch: main
|
|
||||||
```
|
|
||||||
|
|
||||||
## GitLab Pages and GitLab CI
|
|
||||||
|
|
||||||
1. Set the correct `base` in `docs/.vitepress/config.js`.
|
|
||||||
|
|
||||||
If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/`, you can omit `base` as it defaults to `'/'`.
|
|
||||||
|
|
||||||
If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/<REPO>/`, for example your repository is at `https://gitlab.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
|
|
||||||
|
|
||||||
2. Set `outDir` in `.vitepress/config.js` to `../public`.
|
|
||||||
|
|
||||||
3. Create a file called `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
image: node:16.5.0
|
|
||||||
pages:
|
|
||||||
stage: deploy
|
|
||||||
cache:
|
|
||||||
paths:
|
|
||||||
- node_modules/
|
|
||||||
script:
|
|
||||||
- yarn install # npm install
|
|
||||||
- yarn docs:build # npm run docs:build
|
|
||||||
artifacts:
|
|
||||||
paths:
|
|
||||||
- public
|
|
||||||
rules:
|
|
||||||
- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
|
|
||||||
```
|
|
||||||
|
|
||||||
## Netlify
|
|
||||||
|
|
||||||
1. On [Netlify](https://www.netlify.com/), setup up a new project from GitHub with the following settings:
|
|
||||||
|
|
||||||
- **Build Command:** `vitepress build docs` or `yarn docs:build` or `npm run docs:build`
|
|
||||||
- **Publish directory:** `docs/.vitepress/dist`
|
|
||||||
|
|
||||||
2. Hit the deploy button.
|
|
||||||
|
|
||||||
## Google Firebase
|
|
||||||
|
|
||||||
1. Make sure you have [firebase-tools](https://www.npmjs.com/package/firebase-tools) installed.
|
|
||||||
|
|
||||||
2. Create `firebase.json` and `.firebaserc` at the root of your project with the following content:
|
|
||||||
|
|
||||||
`firebase.json`:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"hosting": {
|
|
||||||
"public": "./docs/.vitepress/dist",
|
|
||||||
"ignore": []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
`.firebaserc`:
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
"projects": {
|
|
||||||
"default": "<YOUR_FIREBASE_ID>"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
3. After running `yarn docs:build` or `npm run docs:build`, deploy using the command `firebase deploy`.
|
|
||||||
|
|
||||||
## Surge
|
|
||||||
|
|
||||||
1. First install [surge](https://www.npmjs.com/package/surge), if you haven’t already.
|
|
||||||
|
|
||||||
2. Run `yarn docs:build` or `npm run docs:build`.
|
|
||||||
|
|
||||||
3. Deploy to surge by typing `surge docs/.vitepress/dist`.
|
|
||||||
|
|
||||||
You can also deploy to a [custom domain](https://surge.sh/help/adding-a-custom-domain) by adding `surge docs/.vitepress/dist yourdomain.com`.
|
|
||||||
|
|
||||||
## Heroku
|
|
||||||
|
|
||||||
1. Install [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli).
|
|
||||||
|
|
||||||
2. Create a Heroku account by [signing up](https://signup.heroku.com).
|
|
||||||
|
|
||||||
3. Run `heroku login` and fill in your Heroku credentials:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ heroku login
|
|
||||||
```
|
|
||||||
|
|
||||||
4. Create a file called `static.json` in the root of your project with the below content:
|
|
||||||
|
|
||||||
`static.json`:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"root": "./docs/.vitepress/dist"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
This is the configuration of your site; read more at [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static).
|
|
||||||
|
|
||||||
5. Set up your Heroku git remote:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# version change
|
|
||||||
$ git init
|
|
||||||
$ git add .
|
|
||||||
$ git commit -m "My site ready for deployment."
|
|
||||||
|
|
||||||
# creates a new app with a specified name
|
|
||||||
$ heroku apps:create example
|
|
||||||
|
|
||||||
# set buildpack for static sites
|
|
||||||
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
|
|
||||||
```
|
|
||||||
|
|
||||||
6. Deploy your site:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# publish site
|
|
||||||
$ git push heroku main
|
|
||||||
|
|
||||||
# opens a browser to view the Dashboard version of Heroku CI
|
|
||||||
$ heroku open
|
|
||||||
```
|
|
||||||
|
|
||||||
## Vercel
|
|
||||||
|
|
||||||
To deploy your VitePress app with a [Vercel for Git](https://vercel.com/docs/concepts/git), make sure it has been pushed to a Git repository.
|
|
||||||
|
|
||||||
Go to https://vercel.com/new and import the project into Vercel using your Git of choice (GitHub, GitLab or BitBucket). Follow the wizard to select the project root with the project's `package.json` and override the build step using `yarn docs:build` or `npm run docs:build` and the output dir to be `./docs/.vitepress/dist`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.
|
|
||||||
|
|
||||||
Once deployed, you will get a URL to see your app live, such as the following: https://vitepress.vercel.app
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
---
|
|
||||||
sidebarDepth: 2
|
|
||||||
---
|
|
||||||
|
|
||||||
# Differences from VuePress
|
|
||||||
|
|
||||||
VitePress and VuePress have different [design goals](../index.md). Both projects share similar config naming conventions. VitePress aims to have the bare minimum features needed for authoring docs. Other features are pushed to Themes. On the other hand, VuePress has more features out-of-the-box or enabled by its ecosystem of plugins.
|
|
||||||
|
|
||||||
::: tip
|
|
||||||
If you are using VuePress, there is no need to migrate to VitePress. Both projects are going to continue to co-exist for the foreseeable future.
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: warning
|
|
||||||
Note this is early WIP! Currently, the focus is on making Vite stable and feature-complete first. It is not recommended to use this for anything serious yet.
|
|
||||||
:::
|
|
||||||
|
|
||||||
In case you decide to move your project to VitePress, this is a list of differences from [VuePress v1.7.1](https://github.com/vuejs/vuepress/releases/tag/v1.7.1) that you need to take into account.
|
|
||||||
|
|
||||||
## General
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- YAML and TOML are not supported formats for site config. Only javascript is supported for `.vitepress/config.js`
|
|
||||||
- [Plugins](https://vuepress.vuejs.org/plugin/) support, features are implemented in themes
|
|
||||||
- [permalink support](https://vuepress.vuejs.org/guide/permalinks.html)
|
|
||||||
- `.vitepress/templates`
|
|
||||||
- Components in `.vitepress/components` [are not auto registered as global components](https://vuepress.vuejs.org)
|
|
||||||
- Differences
|
|
||||||
- [Public files](https://vuepress.vuejs.org/guide/assets.html#public-files) that are directly copied to dist root moved from `.vitepress/public/` is `public/`
|
|
||||||
- [styling](https://vuepress.vuejs.org/config/#styling) `.vitepress/styles/index.styl` and `.vitepress/styles/palette.styl` is not supported. See [Customizing CSS](./theming#customizing-css).
|
|
||||||
- [App Level Enhancements](https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements) API, app enhancements `.vitepress/enhanceApp.js` is now done in `.vitepress/theme/index.js`. See [Extending the Default Theme](./theming#extending-the-default-theme).
|
|
||||||
|
|
||||||
## Markdown
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- Support for [toml in frontmatter](https://vuepress.vuejs.org/guide/frontmatter.html#alternative-frontmatter-formats)
|
|
||||||
- [details block](https://vuepress.vuejs.org/guide/markdown.html#custom-containers)
|
|
||||||
- [markdown slots](https://vuepress.vuejs.org/guide/markdown-slot.html)
|
|
||||||
- `~` prefix to explicitly specify a url is a [webpack module request](https://vuepress.vuejs.org/guide/assets.html#relative-urls)
|
|
||||||
|
|
||||||
## Site Config
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- `temp`
|
|
||||||
- `dest`
|
|
||||||
- [`theme` from a dependency](https://vuepress.vuejs.org/theme/using-a-theme.html#using-a-theme-from-a-dependency)
|
|
||||||
- `permalink`
|
|
||||||
- [`port`](https://vuepress.vuejs.org/config/#port)
|
|
||||||
- [`shouldPrefetch`](https://vuepress.vuejs.org/config/#shouldprefetch)
|
|
||||||
- [`cache`](https://vuepress.vuejs.org/config/#cache)
|
|
||||||
- [`extraWatchFiles`](https://vuepress.vuejs.org/config/#extrawatchfiles)
|
|
||||||
- [`patterns`](https://vuepress.vuejs.org/config/#patterns)
|
|
||||||
- [`plugins`](https://vuepress.vuejs.org/config/#pluggable)
|
|
||||||
- [`markdown.pageSuffix`](https://vuepress.vuejs.org/config/#markdown-pagesuffix)
|
|
||||||
- [`markdown.slugify`](https://vuepress.vuejs.org/config/#markdown-slugify)
|
|
||||||
- [`markdown.plugins`](https://vuepress.vuejs.org/config/#markdown-plugins)
|
|
||||||
- [`markdown.extractHeaders`](https://vuepress.vuejs.org/config/#markdown-extractheaders)
|
|
||||||
- `markdown.extendMarkdown` to `markdown.config`
|
|
||||||
- `configureWebpack`, `chainWebpack`, `postcss`, `Stylus`, `scss`, `Sass`, `less` configs
|
|
||||||
- [`evergreen`](https://vuepress.vuejs.org/config/#evergreen)
|
|
||||||
|
|
||||||
## Default Theme Config
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- [`smoothScroll`](https://vuepress.vuejs.org/theme/default-theme-config.html#smooth-scrolling)
|
|
||||||
- [`displayAllHeaders`](https://vuepress.vuejs.org/theme/default-theme-config.html#displaying-header-links-of-all-pages)
|
|
||||||
- [`activeHeaderLinks`](https://vuepress.vuejs.org/theme/default-theme-config.html#active-header-links)
|
|
||||||
- `sidebarDepth` and `initialOpenGroupIndex` for [sidebar groups](https://vuepress.vuejs.org/theme/default-theme-config.html#sidebar-groups)
|
|
||||||
- Differences
|
|
||||||
- `searchMaxSuggestions` is `search.maxSuggestions`
|
|
||||||
- `algolia` is `search.algolia`
|
|
||||||
- `searchPlaceholder` is `search.placeholder`
|
|
||||||
|
|
||||||
## Default Theme
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- [`<code-group>` and `<code-block>`](https://vuepress.vuejs.org/theme/default-theme-config.html#code-groups-and-code-blocks)
|
|
||||||
|
|
||||||
## Computed Globals
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- `$lang`
|
|
||||||
- `$localePath`
|
|
||||||
|
|
||||||
## Frontmatter Predefined Variables
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- `description`
|
|
||||||
- [`meta`](https://vuepress.vuejs.org/guide/frontmatter.html#meta)
|
|
||||||
- [`metaTitle`](https://vuepress.vuejs.org/guide/frontmatter.html#predefined-variables)
|
|
||||||
- `lang`
|
|
||||||
- [`layout`](https://vuepress.vuejs.org/guide/frontmatter.html#layout)
|
|
||||||
- [`permalink`](https://vuepress.vuejs.org/guide/frontmatter.html#predefined-variables)
|
|
||||||
- [`canonicalUrl`](https://vuepress.vuejs.org/guide/frontmatter.html#predefined-variables)
|
|
||||||
|
|
||||||
## Frontmatter Default Theme Variables
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- `prev`, `next`
|
|
||||||
- [`search`](https://vuepress.vuejs.org/guide/frontmatter.html#search)
|
|
||||||
- [`tags`](https://vuepress.vuejs.org/guide/frontmatter.html#tags)
|
|
||||||
- [`pageClass`](https://vuepress.vuejs.org/theme/default-theme-config.html#custom-page-class)
|
|
||||||
- [`layout`](https://vuepress.vuejs.org/theme/default-theme-config.html#custom-layout-for-specific-pages)
|
|
||||||
|
|
||||||
## siteData
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- [`pages`](https://vuepress.vuejs.org/theme/writing-a-theme.html#site-and-page-metadata)
|
|
||||||
|
|
||||||
## pageData
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- `key`
|
|
||||||
- `path`
|
|
||||||
- `regularPath`
|
|
||||||
|
|
||||||
## Global Components
|
|
||||||
|
|
||||||
- Missing
|
|
||||||
- [`<Badge>`](https://vuepress.vuejs.org/guide/using-vue.html#badge)
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
# Frontmatter
|
|
||||||
|
|
||||||
Any Markdown file that contains a YAML frontmatter block will be processed by [gray-matter](https://github.com/jonschlinkert/gray-matter). The frontmatter must be at the top of the Markdown file, and must take the form of valid YAML set between triple-dashed lines. Example:
|
|
||||||
|
|
||||||
```md
|
|
||||||
---
|
|
||||||
title: Docs with VitePress
|
|
||||||
editLink: true
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
Between the triple-dashed lines, you can set [predefined variables](#predefined-variables), or even create custom ones of your own. These variables can be used via the special <code>$frontmatter</code> variable.
|
|
||||||
|
|
||||||
Here’s an example of how you could use it in your Markdown file:
|
|
||||||
|
|
||||||
```md
|
|
||||||
---
|
|
||||||
title: Docs with VitePress
|
|
||||||
editLink: true
|
|
||||||
---
|
|
||||||
|
|
||||||
# {{ $frontmatter.title }}
|
|
||||||
|
|
||||||
Guide content
|
|
||||||
```
|
|
||||||
|
|
||||||
## Alternative frontmatter Formats
|
|
||||||
|
|
||||||
VitePress also supports JSON frontmatter syntax, starting and ending in curly braces:
|
|
||||||
|
|
||||||
```json
|
|
||||||
---
|
|
||||||
{
|
|
||||||
"title": "Blogging Like a Hacker",
|
|
||||||
"editLink": true
|
|
||||||
}
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
## Predefined Variables
|
|
||||||
|
|
||||||
### title
|
|
||||||
|
|
||||||
- Type: `string`
|
|
||||||
- Default: `h1_title || siteData.title`
|
|
||||||
|
|
||||||
Title of the current page.
|
|
||||||
|
|
||||||
### head
|
|
||||||
|
|
||||||
- Type: `array`
|
|
||||||
- Default: `undefined`
|
|
||||||
|
|
||||||
Specify extra head tags to be injected:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
head:
|
|
||||||
- - meta
|
|
||||||
- name: description
|
|
||||||
content: hello
|
|
||||||
- - meta
|
|
||||||
- name: keywords
|
|
||||||
content: super duper SEO
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
### navbar
|
|
||||||
|
|
||||||
- Type: `boolean`
|
|
||||||
- Default: `undefined`
|
|
||||||
|
|
||||||
You can disable the navbar on a specific page with `navbar: false`
|
|
||||||
|
|
||||||
### sidebar
|
|
||||||
|
|
||||||
- Type: `boolean|'auto'`
|
|
||||||
- Default: `undefined`
|
|
||||||
|
|
||||||
You can decide to show the sidebar on a specific page with `sidebar: auto` or disable it with `sidebar: false`
|
|
||||||
|
|
||||||
### editLink
|
|
||||||
|
|
||||||
- Type: `boolean`
|
|
||||||
- Default: `undefined`
|
|
||||||
|
|
||||||
Define if this page should include an edit link.
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
# Getting Started
|
|
||||||
|
|
||||||
This section will help you build a basic VitePress 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 VitePress 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",
|
|
||||||
"docs:serve": "vitepress serve 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`.
|
|
||||||
|
|
||||||
By now, you should have a basic but functional VitePress documentation site.
|
|
||||||
|
|
||||||
When your documentation site starts to take shape, be sure to read the [deployment guide](./deploy).
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
# Global Component
|
|
||||||
|
|
||||||
VitePress comes with few built-in component that can be used globally. You may use these components in your markdown or your custom theme configuration.
|
|
||||||
|
|
||||||
## Content
|
|
||||||
|
|
||||||
The `Content` component displays the rendered markdown contents. Useful [when creating your own theme](./theming).
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<h1>Custom Layout!</h1>
|
|
||||||
<Content />
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
## ClientOnly
|
|
||||||
|
|
||||||
The `ClientOnly` component renderes its slot only at client side.
|
|
||||||
|
|
||||||
Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.
|
|
||||||
|
|
||||||
If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the `ClientOnly` component.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ClientOnly>
|
|
||||||
<NonSSRFriendlyComponent />
|
|
||||||
</ClientOnly>
|
|
||||||
```
|
|
||||||
|
|
||||||
## OutboundLink
|
|
||||||
|
|
||||||
The indicator `OutboundLink` is used to denote external links. In VitePress, this component has been followed by every external link.
|
|
||||||
@ -1,449 +0,0 @@
|
|||||||
---
|
|
||||||
sidebarDepth: 3
|
|
||||||
---
|
|
||||||
|
|
||||||
# Markdown Extensions
|
|
||||||
|
|
||||||
## Header Anchors
|
|
||||||
|
|
||||||
Headers automatically get anchor links applied. Rendering of anchors can be configured using the `markdown.anchor` option.
|
|
||||||
|
|
||||||
## Links
|
|
||||||
|
|
||||||
### Internal Links
|
|
||||||
|
|
||||||
Internal links are converted to router link for SPA navigation. Also, every `index.md` contained in each sub-directory will automatically be converted to `index.html`, with corresponding URL `/`.
|
|
||||||
|
|
||||||
For example, given the following directory structure:
|
|
||||||
|
|
||||||
```
|
|
||||||
.
|
|
||||||
├─ index.md
|
|
||||||
├─ foo
|
|
||||||
│ ├─ index.md
|
|
||||||
│ ├─ one.md
|
|
||||||
│ └─ two.md
|
|
||||||
└─ bar
|
|
||||||
├─ index.md
|
|
||||||
├─ three.md
|
|
||||||
└─ four.md
|
|
||||||
```
|
|
||||||
|
|
||||||
And providing you are in `foo/one.md`:
|
|
||||||
|
|
||||||
```md
|
|
||||||
[Home](/) <!-- sends the user to the root index.md -->
|
|
||||||
[foo](/foo/) <!-- sends the user to index.html of directory foo -->
|
|
||||||
[foo heading](./#heading) <!-- anchors user to a heading in the foo index file -->
|
|
||||||
[bar - three](../bar/three) <!-- you can omit extention -->
|
|
||||||
[bar - three](../bar/three.md) <!-- you can append .md -->
|
|
||||||
[bar - four](../bar/four.html) <!-- or you can append .html -->
|
|
||||||
```
|
|
||||||
|
|
||||||
### Page Suffix
|
|
||||||
|
|
||||||
Pages and internal links get generated with the `.html` suffix by default.
|
|
||||||
|
|
||||||
### External Links
|
|
||||||
|
|
||||||
Outbound links automatically get `target="_blank" rel="noopener noreferrer"`:
|
|
||||||
|
|
||||||
- [vuejs.org](https://vuejs.org)
|
|
||||||
- [VitePress on GitHub](https://github.com/vuejs/vitepress)
|
|
||||||
|
|
||||||
## Frontmatter
|
|
||||||
|
|
||||||
[YAML frontmatter](https://jekyllrb.com/docs/front-matter/) is supported out of the box:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: Blogging Like a Hacker
|
|
||||||
lang: en-US
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
This data will be available to the rest of the page, along with all custom and theming components.
|
|
||||||
|
|
||||||
For more details, see [Frontmatter](./frontmatter).
|
|
||||||
|
|
||||||
## GitHub-Style Tables
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```
|
|
||||||
| Tables | Are | Cool |
|
|
||||||
| ------------- |:-------------:| -----:|
|
|
||||||
| col 3 is | right-aligned | $1600 |
|
|
||||||
| col 2 is | centered | $12 |
|
|
||||||
| zebra stripes | are neat | $1 |
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
| Tables | Are | Cool |
|
|
||||||
| ------------- | :-----------: | -----: |
|
|
||||||
| col 3 is | right-aligned | \$1600 |
|
|
||||||
| col 2 is | centered | \$12 |
|
|
||||||
| zebra stripes | are neat | \$1 |
|
|
||||||
|
|
||||||
## Emoji :tada:
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```
|
|
||||||
:tada: :100:
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
:tada: :100:
|
|
||||||
|
|
||||||
A [list of all emojis](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json) is available.
|
|
||||||
|
|
||||||
## Table of Contents
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```
|
|
||||||
[[toc]]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
[[toc]]
|
|
||||||
|
|
||||||
Rendering of the TOC can be configured using the `markdown.toc` option.
|
|
||||||
|
|
||||||
## Custom Containers
|
|
||||||
|
|
||||||
Custom containers can be defined by their types, titles, and contents.
|
|
||||||
|
|
||||||
### Default Title
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```md
|
|
||||||
::: tip
|
|
||||||
This is a tip
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: info
|
|
||||||
This is an info box
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: warning
|
|
||||||
This is a warning
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: danger
|
|
||||||
This is a dangerous warning
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: details
|
|
||||||
This is a details block, which does not work in Internet Explorer or old versions of Edge.
|
|
||||||
:::
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
::: tip
|
|
||||||
This is a tip
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: info
|
|
||||||
This is an info box
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: warning
|
|
||||||
This is a warning
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: danger
|
|
||||||
This is a dangerous warning
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: details
|
|
||||||
This is a details block, which does not work in Internet Explorer or Edge.
|
|
||||||
:::
|
|
||||||
|
|
||||||
### Custom Title
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
````md
|
|
||||||
::: danger STOP
|
|
||||||
Danger zone, do not proceed
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: details Click me to view the code
|
|
||||||
|
|
||||||
```js
|
|
||||||
console.log('Hello, VitePress!')
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
````
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
::: danger STOP
|
|
||||||
Danger zone, do not proceed
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: details Click me to view the code
|
|
||||||
|
|
||||||
```js
|
|
||||||
console.log('Hello, VitePress!')
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Syntax Highlighting in Code Blocks
|
|
||||||
|
|
||||||
VitePress uses [Prism](https://prismjs.com) to highlight language syntax in Markdown code blocks, using coloured text. Prism supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
````
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
name: 'MyComponent',
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
name: 'MyComponent'
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
````
|
|
||||||
```html
|
|
||||||
<ul>
|
|
||||||
<li v-for="todo in todos" :key="todo.id">
|
|
||||||
{{ todo.text }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ul>
|
|
||||||
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
A [list of valid languages](https://prismjs.com/#languages-list) is available on Prism’s site.
|
|
||||||
|
|
||||||
## Line Highlighting in Code Blocks
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
````
|
|
||||||
```js{4}
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
msg: 'Highlighted!'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
```js{4}
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
msg: 'Highlighted!'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
In addition to a single line, you can also specify multiple single lines, ranges, or both:
|
|
||||||
|
|
||||||
- Line ranges: for example `{5-8}`, `{3-10}`, `{10-17}`
|
|
||||||
- Multiple single lines: for example `{4,7,9}`
|
|
||||||
- Line ranges and single lines: for example `{4,7-13,16,23-27,40}`
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
````
|
|
||||||
```js{1,4,6-7}
|
|
||||||
export default { // Highlighted
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
msg: `Highlighted!
|
|
||||||
This line isn't highlighted,
|
|
||||||
but this and the next 2 are.`,
|
|
||||||
motd: 'VitePress is awesome',
|
|
||||||
lorem: 'ipsum',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
```js{1,4,6-8}
|
|
||||||
export default { // Highlighted
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
msg: `Highlighted!
|
|
||||||
This line isn't highlighted,
|
|
||||||
but this and the next 2 are.`,
|
|
||||||
motd: 'VitePress is awesome',
|
|
||||||
lorem: 'ipsum',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Line Numbers
|
|
||||||
|
|
||||||
You can enable line numbers for each code blocks via config:
|
|
||||||
|
|
||||||
```js
|
|
||||||
module.exports = {
|
|
||||||
markdown: {
|
|
||||||
lineNumbers: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
- Demo:
|
|
||||||
|
|
||||||
<picture>
|
|
||||||
<source srcset="../images/line-numbers-mobile.gif" media="(max-width: 719px)">
|
|
||||||
<img class="line-numbers-mobile-snap" src="../images/line-numbers-mobile.gif" alt="Image">
|
|
||||||
</picture>
|
|
||||||
|
|
||||||
<picture>
|
|
||||||
<source srcset="../images/line-numbers-desktop.png" media="(min-width: 720px)">
|
|
||||||
<img class="line-numbers-desktop-snap" src="../images/line-numbers-desktop.png" alt="Image">
|
|
||||||
</picture>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.line-numbers-mobile-snap {
|
|
||||||
margin: 0 -1.5rem;
|
|
||||||
width: 100vw;
|
|
||||||
max-width: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-numbers-desktop-snap {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 720px) {
|
|
||||||
.line-numbers-mobile-snap {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-numbers-desktop-snap {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
## Import Code Snippets
|
|
||||||
|
|
||||||
You can import code snippets from existing files via following syntax:
|
|
||||||
|
|
||||||
```md
|
|
||||||
<<< @/filepath
|
|
||||||
```
|
|
||||||
|
|
||||||
It also supports [line highlighting](#line-highlighting-in-code-blocks):
|
|
||||||
|
|
||||||
```md
|
|
||||||
<<< @/filepath{highlightLines}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```md
|
|
||||||
<<< @/snippets/snippet.js{2}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Code file**
|
|
||||||
|
|
||||||
<!--lint disable strong-marker-->
|
|
||||||
|
|
||||||
<<< @/snippets/snippet.js
|
|
||||||
|
|
||||||
<!--lint enable strong-marker-->
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
<!--lint disable strong-marker-->
|
|
||||||
|
|
||||||
<<< @/snippets/snippet.js{2}
|
|
||||||
|
|
||||||
<!--lint enable strong-marker-->
|
|
||||||
|
|
||||||
::: tip
|
|
||||||
The value of `@` corresponds to the source root. By default it's the VitePress project root, unless `srcDir` is configured.
|
|
||||||
:::
|
|
||||||
|
|
||||||
You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath (`snippet` by default):
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```md
|
|
||||||
<<< @/snippets/snippet-with-region.js{1}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Code file**
|
|
||||||
|
|
||||||
<!--lint disable strong-marker-->
|
|
||||||
|
|
||||||
<<< @/snippets/snippet-with-region.js
|
|
||||||
|
|
||||||
<!--lint enable strong-marker-->
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
<!--lint disable strong-marker-->
|
|
||||||
|
|
||||||
<<< @/snippets/snippet-with-region.js#snippet{1}
|
|
||||||
|
|
||||||
<!--lint enable strong-marker-->
|
|
||||||
|
|
||||||
## Advanced Configuration
|
|
||||||
|
|
||||||
VitePress uses [markdown-it](https://github.com/markdown-it/markdown-it) as the Markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the `markdown-it` instance using the `markdown` option in `.vitepress/config.js`:
|
|
||||||
|
|
||||||
```js
|
|
||||||
const anchor = require('markdown-it-anchor')
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
markdown: {
|
|
||||||
// options for markdown-it-anchor
|
|
||||||
// https://github.com/valeriangalliat/markdown-it-anchor#permalinks
|
|
||||||
anchor: {
|
|
||||||
permalink: anchor.permalink.headerLink()
|
|
||||||
},
|
|
||||||
|
|
||||||
// options for markdown-it-table-of-contents
|
|
||||||
toc: { includeLevel: [1, 2] },
|
|
||||||
|
|
||||||
config: (md) => {
|
|
||||||
// use more markdown-it plugins!
|
|
||||||
md.use(require('markdown-it-xxx'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@ -1,155 +0,0 @@
|
|||||||
# Theming
|
|
||||||
|
|
||||||
## Using a Custom Theme
|
|
||||||
|
|
||||||
You can enable a custom theme by adding the `.vitepress/theme/index.js` file (the "theme entry file").
|
|
||||||
|
|
||||||
```bash
|
|
||||||
.
|
|
||||||
├─ docs
|
|
||||||
│ ├─ .vitepress
|
|
||||||
│ │ ├─ theme
|
|
||||||
│ │ │ └─ index.js
|
|
||||||
│ │ └─ config.js
|
|
||||||
│ └─ index.md
|
|
||||||
└─ package.json
|
|
||||||
```
|
|
||||||
|
|
||||||
A VitePress custom theme is simply an object containing three properties and is defined as follows:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface Theme {
|
|
||||||
Layout: Component // Vue 3 component
|
|
||||||
NotFound?: Component
|
|
||||||
enhanceApp?: (ctx: EnhanceAppContext) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EnhanceAppContext {
|
|
||||||
app: App // Vue 3 app instance
|
|
||||||
router: Router // VitePress router instance
|
|
||||||
siteData: Ref<SiteData>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
The theme entry file should export the theme as its default export:
|
|
||||||
|
|
||||||
```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.
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
...where the `Layout` component could look like this:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<!-- .vitepress/theme/Layout.vue -->
|
|
||||||
<template>
|
|
||||||
<h1>Custom Layout!</h1>
|
|
||||||
<Content /><!-- this is where markdown content will be rendered -->
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
The default export is the only contract for a custom theme. Inside your custom theme, it works just like a normal Vite + Vue 3 application. Do note the theme also needs to be [SSR-compatible](./using-vue#browser-api-access-restrictions).
|
|
||||||
|
|
||||||
To distribute a theme, simply export the object in your package entry. To consume an external theme, import and re-export it from the custom theme entry:
|
|
||||||
|
|
||||||
```js
|
|
||||||
// .vitepress/theme/index.js
|
|
||||||
import Theme from 'awesome-vitepress-theme'
|
|
||||||
export default Theme
|
|
||||||
```
|
|
||||||
|
|
||||||
## Extending the Default Theme
|
|
||||||
|
|
||||||
If you want to extend and customize the default theme, you can import it from `vitepress/theme` and augment it in a custom theme entry. Here are some examples of common customizations:
|
|
||||||
|
|
||||||
### Registering Global Components
|
|
||||||
|
|
||||||
```js
|
|
||||||
// .vitepress/theme/index.js
|
|
||||||
import DefaultTheme from 'vitepress/theme'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
...DefaultTheme,
|
|
||||||
enhanceApp({ app }) {
|
|
||||||
// register global components
|
|
||||||
app.component('MyGlobalComponent' /* ... */)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Since we are using Vite, you can also leverage Vite's [glob import feature](https://vitejs.dev/guide/features.html#glob-import) to auto register a directory of components.
|
|
||||||
|
|
||||||
### Customizing CSS
|
|
||||||
|
|
||||||
The default theme CSS is customizable by overriding root level CSS variables:
|
|
||||||
|
|
||||||
```js
|
|
||||||
// .vitepress/theme/index.js
|
|
||||||
import DefaultTheme from 'vitepress/theme'
|
|
||||||
import './custom.css'
|
|
||||||
|
|
||||||
export default DefaultTheme
|
|
||||||
```
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* .vitepress/theme/custom.css */
|
|
||||||
:root {
|
|
||||||
--c-brand: #646cff;
|
|
||||||
--c-brand-light: #747bff;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
See [default theme CSS variables](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) that can be overridden.
|
|
||||||
|
|
||||||
### Layout Slots
|
|
||||||
|
|
||||||
The default theme's `<Layout/>` component has a few slots that can be used to inject content at certain locations of the page. Here's an example of injecting a component into the top of the sidebar:
|
|
||||||
|
|
||||||
```js
|
|
||||||
// .vitepress/theme/index.js
|
|
||||||
import DefaultTheme from 'vitepress/theme'
|
|
||||||
import MyLayout from './MyLayout.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
...DefaultTheme,
|
|
||||||
// override the Layout with a wrapper component that injects the slots
|
|
||||||
Layout: MyLayout
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<!--.vitepress/theme/MyLayout.vue-->
|
|
||||||
<script setup>
|
|
||||||
import DefaultTheme from 'vitepress/theme'
|
|
||||||
const { Layout } = DefaultTheme
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Layout>
|
|
||||||
<template #sidebar-top>My custom sidebar top content</template>
|
|
||||||
</Layout>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
Full list of slots available in the default theme layout:
|
|
||||||
|
|
||||||
- `navbar-search`
|
|
||||||
- `sidebar-top`
|
|
||||||
- `sidebar-bottom`
|
|
||||||
- `page-top-ads`
|
|
||||||
- `page-top`
|
|
||||||
- `page-bottom`
|
|
||||||
- `page-bottom-ads`
|
|
||||||
- Only when `home: true` is enabled via frontmatter:
|
|
||||||
- `home-hero`
|
|
||||||
- `home-features`
|
|
||||||
- `home-footer`
|
|
||||||
@ -1,261 +0,0 @@
|
|||||||
---
|
|
||||||
sidebarDepth: 3
|
|
||||||
---
|
|
||||||
|
|
||||||
# Using Vue in Markdown
|
|
||||||
|
|
||||||
In VitePress, each markdown file is compiled into HTML and then processed as a Vue Single-File Component. This means you can use any Vue features inside the markdown, including dynamic templating, using Vue components, or arbitrary in-page Vue component logic by adding a `<script>` tag.
|
|
||||||
|
|
||||||
It is also important to know that VitePress leverages Vue 3's compiler to automatically detect and optimize the purely static parts of the markdown. Static contents are optimized into single placeholder nodes and eliminated from the page's JavaScript payload. They are also skipped during client-side hydration. In short, you only pay for the dynamic parts on any given page.
|
|
||||||
|
|
||||||
## Templating
|
|
||||||
|
|
||||||
### Interpolation
|
|
||||||
|
|
||||||
Each Markdown file is first compiled into HTML and then passed on as a Vue component to the Vite process pipeline. This means you can use Vue-style interpolation in text:
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```md
|
|
||||||
{{ 1 + 1 }}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
<div class="language-text"><pre><code>{{ 1 + 1 }}</code></pre></div>
|
|
||||||
|
|
||||||
### Directives
|
|
||||||
|
|
||||||
Directives also work:
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```md
|
|
||||||
<span v-for="i in 3">{{ i }} </span>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
<div class="language-text"><pre><code><span v-for="i in 3">{{ i }} </span></code></pre></div>
|
|
||||||
|
|
||||||
### Access to Site & Page Data
|
|
||||||
|
|
||||||
You can use the [`useData` helper](./api#usedata) in a `<script>` block and expose the data to the page.
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```md
|
|
||||||
<script setup>
|
|
||||||
import { useData } from 'vitepress'
|
|
||||||
const { page } = useData()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<pre>{{ page }}</pre>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"path": "/using-vue.html",
|
|
||||||
"title": "Using Vue in Markdown",
|
|
||||||
"frontmatter": {}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Escaping
|
|
||||||
|
|
||||||
By default, fenced code blocks are automatically wrapped with `v-pre`. To display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the `v-pre` custom container:
|
|
||||||
|
|
||||||
**Input**
|
|
||||||
|
|
||||||
```md
|
|
||||||
::: v-pre
|
|
||||||
`{{ This will be displayed as-is }}`
|
|
||||||
:::
|
|
||||||
```
|
|
||||||
|
|
||||||
**Output**
|
|
||||||
|
|
||||||
::: v-pre
|
|
||||||
`{{ This will be displayed as-is }}`
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Using Components
|
|
||||||
|
|
||||||
When you need to have more flexibility, VitePress allows you to extend your authoring toolbox with your own Vue Components.
|
|
||||||
|
|
||||||
### Importing components in markdown
|
|
||||||
|
|
||||||
If your components are going to be used in only a few places, the recommended way to use them is to importing the components in the file where it is used.
|
|
||||||
|
|
||||||
```md
|
|
||||||
<script setup>
|
|
||||||
import CustomComponent from '../components/CustomComponent.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
# Docs
|
|
||||||
|
|
||||||
This is a .md using a custom component
|
|
||||||
|
|
||||||
<CustomComponent />
|
|
||||||
|
|
||||||
## More docs
|
|
||||||
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
### Registering global components in the theme
|
|
||||||
|
|
||||||
If the components are going to be used across several pages in the docs, they can be registered globally in the theme (or as part of extending the default VitePress theme). Check out the [Theming Guide](./theming) for more information.
|
|
||||||
|
|
||||||
In `.vitepress/theme/index.js`, the `enhanceApp` function receives the Vue `app` instance so you can [register components](https://vuejs.org/guide/components/registration.html) as you would do in a regular Vue application.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import DefaultTheme from 'vitepress/theme'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
...DefaultTheme,
|
|
||||||
enhanceApp({ app }) {
|
|
||||||
app.component('VueClickAwayExample', VueClickAwayExample)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Later in your markdown files, the component can be interleaved between the content
|
|
||||||
|
|
||||||
```md
|
|
||||||
# Vue Click Away
|
|
||||||
|
|
||||||
<VueClickAwayExample />
|
|
||||||
```
|
|
||||||
|
|
||||||
::: warning IMPORTANT
|
|
||||||
Make sure a custom component’s name either contains a hyphen or is in PascalCase. Otherwise, it will be treated as an inline element and wrapped inside a `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
|
|
||||||
:::
|
|
||||||
|
|
||||||
### Using Components In Headers <ComponentInHeader />
|
|
||||||
|
|
||||||
You can use Vue components in the headers, but note the difference between the following syntaxes:
|
|
||||||
|
|
||||||
| Markdown | Output HTML | Parsed Header |
|
|
||||||
| ------------------------------------------------------- | ----------------------------------------- | ------------- |
|
|
||||||
| <pre v-pre><code> # text <Tag/> </code></pre> | `<h1>text <Tag/></h1>` | `text` |
|
|
||||||
| <pre v-pre><code> # text \`<Tag/>\` </code></pre> | `<h1>text <code><Tag/></code></h1>` | `text <Tag/>` |
|
|
||||||
|
|
||||||
The HTML wrapped by `<code>` will be displayed as-is; only the HTML that is **not** wrapped will be parsed by Vue.
|
|
||||||
|
|
||||||
::: tip
|
|
||||||
The output HTML is accomplished by [markdown-it](https://github.com/markdown-it/markdown-it), while the parsed headers are handled by VitePress (and used for both the sidebar and document title).
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Using CSS Pre-processors
|
|
||||||
|
|
||||||
VitePress has [built-in support](https://vitejs.dev/guide/features.html#css-pre-processors) for CSS pre-processors: `.scss`, `.sass`, `.less`, `.styl` and `.stylus` files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed:
|
|
||||||
|
|
||||||
```
|
|
||||||
# .scss and .sass
|
|
||||||
npm install -D sass
|
|
||||||
|
|
||||||
# .less
|
|
||||||
npm install -D less
|
|
||||||
|
|
||||||
# .styl and .stylus
|
|
||||||
npm install -D stylus
|
|
||||||
```
|
|
||||||
|
|
||||||
Then you can use the following in Markdown and theme components:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<style lang="sass">
|
|
||||||
.title
|
|
||||||
font-size: 20px
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Script & Style Hoisting
|
|
||||||
|
|
||||||
Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases, you can directly write root-level `<script>` or `<style>` blocks in the Markdown file. These will be hoisted out of the compiled HTML and used as the `<script>` and `<style>` blocks for the resulting Vue single-file component:
|
|
||||||
|
|
||||||
<p class="demo" :class="$style.example"></p>
|
|
||||||
|
|
||||||
<style module>
|
|
||||||
.example {
|
|
||||||
color: #41b883;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ComponentInHeader from '../components/ComponentInHeader.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: ['slot-key'],
|
|
||||||
components: { ComponentInHeader },
|
|
||||||
mounted () {
|
|
||||||
document.querySelector(`.${this.$style.example}`)
|
|
||||||
.textContent = 'This is rendered by inline script and styled by inline CSS'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
## Built-In Components
|
|
||||||
|
|
||||||
VitePress provides Built-In Vue Components like `ClientOnly` and `OutboundLink`, check out the [Global Component Guide](./global-component) for more information.
|
|
||||||
|
|
||||||
**Also see:**
|
|
||||||
|
|
||||||
- [Using Components In Headers](#using-components-in-headers)
|
|
||||||
|
|
||||||
## Browser API Access Restrictions
|
|
||||||
|
|
||||||
Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://vuejs.org/guide/scaling-up/ssr.html). In short, make sure to only access Browser / DOM APIs in `beforeMount` or `mounted` hooks.
|
|
||||||
|
|
||||||
If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the built-in `<ClientOnly>` component:
|
|
||||||
|
|
||||||
```md
|
|
||||||
<ClientOnly>
|
|
||||||
<NonSSRFriendlyComponent/>
|
|
||||||
</ClientOnly>
|
|
||||||
```
|
|
||||||
|
|
||||||
Note this does not fix components or libraries that access Browser APIs **on import**. To use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
mounted() {
|
|
||||||
import('./lib-that-access-window-on-import').then((module) => {
|
|
||||||
// use code
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
If your module `export default` a Vue component, you can register it dynamically:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<component v-if="dynamicComponent" :is="dynamicComponent"></component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dynamicComponent: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
import('./lib-that-access-window-on-import').then((module) => {
|
|
||||||
this.dynamicComponent = module.default
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Also see:**
|
|
||||||
|
|
||||||
- [Vue.js > Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
|
|
||||||
@ -1,56 +1 @@
|
|||||||
---
|
## 哪吒监控是什么？
|
||||||
sidebarDepth: 2
|
|
||||||
---
|
|
||||||
|
|
||||||
# What is VitePress?
|
|
||||||
|
|
||||||
::: warning WARNING
|
|
||||||
VitePress is currently in 0.x status. It is already suitable for out-of-the-box documentation use, but the config and theming API may still change between minor releases.
|
|
||||||
:::
|
|
||||||
|
|
||||||
VitePress is [VuePress](https://vuepress.vuejs.org)' little brother, built on top of [Vite](https://github.com/vitejs/vite).
|
|
||||||
|
|
||||||
## Motivation
|
|
||||||
|
|
||||||
We love VuePress v1, but being built on top of Webpack, the time it takes to spin up the dev server for a simple doc site with a few pages is just becoming unbearable. Even HMR updates can take up to seconds to reflect in the browser!
|
|
||||||
|
|
||||||
Fundamentally, this is because VuePress v1 is a Webpack app under the hood. Even with just two pages, it's a full on Webpack project (including all the theme source files) being compiled. It gets even worse when the project has many pages – every page must first be fully compiled before the server can even display anything!
|
|
||||||
|
|
||||||
Incidentally, Vite solves these problems really well: nearly instant server start, an on-demand compilation that only compiles the page being served, and lightning-fast HMR. Plus, there are a few additional design issues I have noted in VuePress v1 over time but never had the time to fix due to the amount of refactoring it would require.
|
|
||||||
|
|
||||||
Now, with Vite and Vue 3, it is time to rethink what a "Vue-powered static site generator" can really be.
|
|
||||||
|
|
||||||
## Improvements Over VuePress v1
|
|
||||||
|
|
||||||
There're couple of things that are improved from VuePress v1....
|
|
||||||
|
|
||||||
### It Uses Vue 3
|
|
||||||
|
|
||||||
Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code – the JS payload is therefore _much_ cheaper to parse, and hydration also becomes faster.
|
|
||||||
|
|
||||||
Note the optimization is applied while still allowing the user to freely mix Vue components inside markdown content – the compiler does the static/dynamic separation for you automatically and you never need to think about it.
|
|
||||||
|
|
||||||
### It Uses Vite Under The Hood
|
|
||||||
|
|
||||||
- Faster dev server start
|
|
||||||
- Faster hot updates
|
|
||||||
- Faster build (uses Rollup internally)
|
|
||||||
|
|
||||||
### Lighter Page Weight
|
|
||||||
|
|
||||||
- Vue 3 tree-shaking + Rollup code splitting
|
|
||||||
- Does not ship metadata for every page on every request. This decouples page weight from total number of pages. Only the current page's metadata is sent. Client side navigation fetches the new page's component and metadata together.
|
|
||||||
- Does not use `vue-router` because the need of VitePress is very simple and specific - a simple custom router (under 200 LOC) is used instead.
|
|
||||||
- (WIP) i18n locale data should also be fetched on demand.
|
|
||||||
|
|
||||||
## Other Differences
|
|
||||||
|
|
||||||
VitePress is more opinionated and less configurable: VitePress aims to scale back the complexity in the current VuePress and restart from its minimalist roots.
|
|
||||||
|
|
||||||
VitePress is future oriented: VitePress only targets browsers that support native ES module imports. It encourages the use of native JavaScript without transpilation, and CSS variables for theming.
|
|
||||||
|
|
||||||
## Will This Become The Next VuePress in The Future?
|
|
||||||
|
|
||||||
We already have [vuepress-next](https://github.com/vuepress/vuepress-next), which would be the next major version of VuePress. It also makes lots of improvements over VuePress v1, and also supports Vite now.
|
|
||||||
|
|
||||||
VitePress is not compatible with the current VuePress ecosystem (mostly themes and plugins). The overall idea is that VitePress will have a drastically more minimal theming API (preferring JavaScript APIs instead of file layout conventions) and likely no plugins (all customization is done in themes).
|
|
||||||
Loading…
x
Reference in New Issue
Block a user