Skip to content

Commit

Permalink
docs: ✏️ update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
huyikai committed Dec 22, 2023
1 parent 419e5a0 commit e5a95b8
Show file tree
Hide file tree
Showing 4 changed files with 247 additions and 15 deletions.
8 changes: 4 additions & 4 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@ const vitepressConfig = {
{ icon: 'github', link: 'https://github.com/huyikai/vitepress-helper' }
],
// 网站页脚
// footer: {
// message: 'Released under the MIT License.',
// copyright: 'Copyright © 2023'
// },
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2023'
},
// 文档页脚-上下页显示文字
docFooter: {
prev: 'Pervious',
Expand Down
4 changes: 2 additions & 2 deletions docs/Guide/Basic/2.GettingStart.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## 安装

### 先决条件
### 前提条件

- Node.js 版本需为 18 或更高。
- 安装到现有项目需要基于 [email protected]或更高。
Expand Down Expand Up @@ -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);
}
};
Expand Down
118 changes: 116 additions & 2 deletions docs/en/Guide/Basic/2.GettingStart.md
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:
Expand All @@ -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.
132 changes: 125 additions & 7 deletions docs/jp/Guide/Basic/2.GettingStart.md
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 サーバーを起動します。

```
```

0 comments on commit e5a95b8

Please sign in to comment.