-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
247 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ | |
|
||
## 安装 | ||
|
||
### 先决条件 | ||
### 前提条件 | ||
|
||
- Node.js 版本需为 18 或更高。 | ||
- 安装到现有项目需要基于 [email protected]或更高。 | ||
|
@@ -103,7 +103,7 @@ import theme from '@huyikai/vitepress-helper/theme/index'; | |
|
||
export default { | ||
extends: theme, | ||
enhanceApp: ({ app }: any) => { | ||
enhanceApp: ({ app }) => { | ||
app.component('Home', Home); | ||
} | ||
}; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,26 @@ | ||
# Quick Start | ||
|
||
## Installation Guide | ||
## Installation | ||
|
||
### Prerequisites | ||
|
||
- Node.js version must be 18 or higher. | ||
- Installation to an existing project requires based on [email protected] or higher. | ||
|
||
### Installation Methods | ||
|
||
VitePress-Helper supports two installation methods: | ||
|
||
- Run the installation wizard in the command line | ||
- Install directly into an existing project, then manually modify the settings (config.js) and theme. | ||
|
||
#### Installation Wizard | ||
|
||
```shell | ||
npx @huyikai/vitepress-helper init | ||
# or | ||
npm install -g @huyikai/vitepress-helper | ||
vitepress-helper init | ||
``` | ||
|
||
You will be asked some simple questions: | ||
|
@@ -15,4 +32,101 @@ You will be asked some simple questions: | |
# Do you need local CMS? | ||
``` | ||
|
||
After initialization, you can run `npm run dev` for preview. If CMS is selected as yes, you can run `npm run cms` for content management. | ||
#### Install to an Existing Project | ||
|
||
```shell | ||
npm i @huyikai/vitepress-helper -D | ||
npm i vue | ||
npm i @huyikai/local-cms | ||
``` | ||
|
||
:::tip | ||
Because VitePress-Helper has added a custom homepage component `home.vue`, you need to install the peer dependency Vue. If you don't need a custom homepage, you can skip the installation and you don't need to create a `home.vue` file later. | ||
|
||
If you need the local CMS feature, you need to install `@huyikai/local-cms`. | ||
::: | ||
|
||
Modify config.js | ||
|
||
```javascript | ||
import vitepressHelper, { config } from '@huyikai/vitepress-helper'; | ||
import { defineConfigWithTheme } from 'vitepress'; | ||
|
||
// vitepress-helper default setting | ||
const vitepressHelperConfig = { | ||
directory: 'docs', | ||
collapsible: true | ||
}; | ||
|
||
// vitepres default setting | ||
const vitepressConfig={ | ||
title:'your site title', | ||
description:'your site description', | ||
themeconfig:{ | ||
... | ||
}, | ||
... | ||
} | ||
|
||
export default async () => { | ||
const vitepressHelperInstance = await vitepressHelper({ | ||
...vitepressHelperConfig, | ||
...vitepressConfig | ||
}); | ||
return defineConfigWithTheme({ | ||
extends: config, | ||
...vitepressHelperInstance | ||
}); | ||
}; | ||
``` | ||
|
||
Create a new directory `.vitepress/theme`, and create files `home.vue` and `index.js` in the directory. | ||
|
||
```vue | ||
<script setup lang="ts"> | ||
import VPDoc from 'vitepress/dist/client/theme-default/components/VPDoc.vue'; | ||
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'; | ||
</script> | ||
<template> | ||
<!-- You can customize any content, for example: --> | ||
<div>Your custom homepage content</div> | ||
<!-- The VPDoc component here will render and display the content in index.md in the docs root directory. --> | ||
<VPDoc /> | ||
</template> | ||
<style></style> | ||
``` | ||
|
||
```javascript | ||
import Home from './home.vue'; | ||
import theme from '@huyikai/vitepress-helper/theme/index'; | ||
|
||
export default { | ||
extends: theme, | ||
enhanceApp: ({ app }) => { | ||
app.component('Home', Home); | ||
} | ||
}; | ||
``` | ||
|
||
## Start and Run | ||
|
||
The installation wizard will automatically inject the following scripts into your `package.json`. If you are installing to an existing project, please make sure the following scripts are in your `package.json`. | ||
|
||
```json | ||
{ | ||
... | ||
"scripts": { | ||
"dev": "vitepress dev docs", | ||
"build": "vitepress build docs", | ||
"cms": "node node_modules/@huyikai/local-cms/cms.js docs", | ||
}, | ||
... | ||
} | ||
``` | ||
|
||
`npm run dev`: Start a local development server ([vitepress-dev](https://vitepress.dev/reference/cli#vitepress-dev)). | ||
|
||
`npm run build`: Build a VitePress site for production ([vitepress-build](https://vitepress.dev/reference/cli#vitepress-build)). | ||
|
||
`npm run cms`: Start a local CMS server. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,136 @@ | ||
# クイックスタート | ||
|
||
## インストールガイド | ||
## インストール | ||
|
||
### 前提条件 | ||
|
||
- Node.js のバージョンは 18 以上である必要があります。 | ||
- 既存のプロジェクトにインストールする場合は、[email protected]以上が必要です。 | ||
|
||
### インストール方法 | ||
|
||
VitePress-Helper は 2 つのインストール方法をサポートしています: | ||
|
||
- コマンドラインでインストールウィザードを実行する | ||
- 既存のプロジェクトに直接インストールし、その後設定(config.js)とテーマ(theme)を手動で変更する。 | ||
|
||
#### インストールウィザード | ||
|
||
```shell | ||
npx @huyikai/vitepress-helper init | ||
# または | ||
npm install -g @huyikai/vitepress-helper | ||
vitepress-helper init | ||
``` | ||
|
||
いくつかの簡単な質問が表示されます: | ||
|
||
```shell | ||
# プロジェクト名 | ||
# 作者 | ||
# バージョン | ||
# ローカルCMSが必要ですか? | ||
``` | ||
|
||
いくつかの簡単な質問があります: | ||
#### 既存のプロジェクトにインストール | ||
|
||
```shell | ||
# プロジェクト名 | Project Name | ||
# 作者 | Author | ||
# バージョン | Version | ||
# ローカルCMSが必要ですか? | Do you need local CMS? | ||
npm i @huyikai/vitepress-helper -D | ||
npm i vue | ||
npm i @huyikai/local-cms | ||
``` | ||
|
||
:::tip | ||
VitePress-Helper には `home.vue` というカスタムホームページコンポーネントが追加されているため、Vue の対応する依存関係をインストールする必要があります。カスタムホームページが不要な場合はインストールする必要はありません。また、後続の手順で `home.vue` ファイルを作成する必要もありません。 | ||
|
||
ローカル CMS 機能が必要な場合は、`@huyikai/local-cms` をインストールする必要があります。 | ||
::: | ||
|
||
config.js を変更する | ||
|
||
```javascript | ||
import vitepressHelper, { config } from '@huyikai/vitepress-helper'; | ||
import { defineConfigWithTheme } from 'vitepress'; | ||
|
||
// vitepress-helperのデフォルト設定 | ||
const vitepressHelperConfig = { | ||
directory: 'docs', | ||
collapsible: true | ||
}; | ||
|
||
// vitepressのデフォルト設定 | ||
const vitepressConfig={ | ||
title:'サイトのタイトル', | ||
description:'サイトの説明', | ||
themeconfig:{ | ||
... | ||
}, | ||
... | ||
} | ||
|
||
export default async () => { | ||
const vitepressHelperInstance = await vitepressHelper({ | ||
...vitepressHelperConfig, | ||
...vitepressConfig | ||
}); | ||
return defineConfigWithTheme({ | ||
extends: config, | ||
...vitepressHelperInstance | ||
}); | ||
}; | ||
``` | ||
|
||
初期化後、プレビューのために `npm run dev` を実行できます。CMS が選択された場合、コンテンツ管理のために `npm run cms` を実行できます。 | ||
ディレクトリ `.vitepress/theme` を作成し、その中に `home.vue` と `index.js` ファイルを作成します | ||
|
||
```vue | ||
<script setup lang="ts"> | ||
import VPDoc from 'vitepress/dist/client/theme-default/components/VPDoc.vue'; | ||
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'; | ||
</script> | ||
<template> | ||
<!-- 任意のカスタムコンテンツを追加できます。例: --> | ||
<div>カスタムホームページのコンテンツ</div> | ||
<!-- ここでVPDocコンポーネントは、docsディレクトリのindex.mdの内容をレンダリングします。 --> | ||
<VPDoc /> | ||
</template> | ||
<style></style> | ||
``` | ||
|
||
```javascript | ||
import Home from './home.vue'; | ||
import theme from '@huyikai/vitepress-helper/theme/index'; | ||
|
||
export default { | ||
extends: theme, | ||
enhanceApp: ({ app }) => { | ||
app.component('Home', Home); | ||
} | ||
}; | ||
``` | ||
|
||
## 起動と実行 | ||
|
||
インストールウィザードは以下のスクリプトを自動的に `package.json` に挿入します。既存のプロジェクトにインストールする場合は、`package.json` に以下のスクリプトがあることを確認してください | ||
|
||
```json | ||
{ | ||
... | ||
"scripts": { | ||
"dev": "vitepress dev docs", | ||
"build": "vitepress build docs", | ||
"cms": "node node_modules/@huyikai/local-cms/cms.js docs", | ||
}, | ||
... | ||
} | ||
``` | ||
|
||
`npm run dev`:ローカル開発サーバーを起動します([vitepress-dev](https://vitepress.dev/reference/cli#vitepress-dev))。 | ||
|
||
`npm run build`:本番用の VitePress サイトをビルドします([vitepress-build](https://vitepress.dev/reference/cli#vitepress-build))。 | ||
|
||
`npm run cms`:ローカル CMS サーバーを起動します。 | ||
|
||
``` | ||
``` |