docs: ✏️ update docs

huyikai · Dec 22, 2023 · e5a95b8 · e5a95b8
1 parent 419e5a0
commit e5a95b8
Show file tree

Hide file tree

Showing 4 changed files with 247 additions and 15 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -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',

diff --git a/docs/Guide/Basic/2.GettingStart.md b/docs/Guide/Basic/2.GettingStart.md
@@ -2,7 +2,7 @@
 
 ## 安装
 
-### 先决条件
+### 前提条件
 
 - Node.js 版本需为 18 或更高。
 - 安装到现有项目需要基于 vitepress@1.0.0-rc.31或更高。
@@ -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);
   }
 };

diff --git a/docs/en/Guide/Basic/2.GettingStart.md b/docs/en/Guide/Basic/2.GettingStart.md
@@ -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 vitepress@1.0.0-rc.31 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.
diff --git a/docs/jp/Guide/Basic/2.GettingStart.md b/docs/jp/Guide/Basic/2.GettingStart.md
@@ -1,18 +1,136 @@
 # クイックスタート
 
-## インストールガイド
+## インストール
+
+### 前提条件
+
+- Node.js のバージョンは 18 以上である必要があります。
+- 既存のプロジェクトにインストールする場合は、vitepress@1.0.0-rc.31以上が必要です。
+
+### インストール方法
+
+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 サーバーを起動します。
+
+```
+
+```