VitePress 是一个很好用的静态文档构建工具。但使用了一段时间后，感觉在使用体验上还是存在些许优化空间。
VitePress 默认的 导航栏 和 侧边栏 配置比较繁琐，而且配置文件和源码文件是分离的，需要手动同步。在管理的内容数量比较少的情况下，还问题不大，一旦内容数量比较多的话，会增加很多维护成本。
另一方面，作为 VitePress 使用者，可能会有不止一个 VitePress 项目，如果每个项目都配置一遍，也是比较麻烦的。
在发现问题后，检索了关于 VitePress 的插件，可以看出有不少人有相同的感受。 尝试了部分插件，并没有很好的解决问题或者说大家关注的细节有所出入。
所以最终决定写一个工具，让自己使用起来更加便利，同时也希望能够帮助大家更轻松地使用 VitePress。
',7),o=[i];function c(n,d,p,_,l,h){return s(),t("div",null,o)}const V=e(a,[["render",c]]);export{P as __pageData,V as default}; diff --git a/assets/Guide_Basic_1.Introduction.md.C2V9zw_i.lean.js b/assets/Guide_Basic_1.Introduction.md.C2V9zw_i.lean.js new file mode 100644 index 0000000..ade4f60 --- /dev/null +++ b/assets/Guide_Basic_1.Introduction.md.C2V9zw_i.lean.js @@ -0,0 +1 @@ +import{_ as e,p as t,n as s,O as r}from"./chunks/framework.CyRmAkVp.js";const P=JSON.parse('{"title":"欢迎使用 VitePress-Helper","description":"","frontmatter":{},"headers":[],"relativePath":"Guide/Basic/1.Introduction.md","filePath":"Guide/Basic/1.Introduction.md","lastUpdated":1709003584000}'),a={name:"Guide/Basic/1.Introduction.md"},i=r("",7),o=[i];function c(n,d,p,_,l,h){return s(),t("div",null,o)}const V=e(a,[["render",c]]);export{P as __pageData,V as default}; diff --git a/assets/Guide_Basic_2.GettingStart.md.D_W4BP0o.js b/assets/Guide_Basic_2.GettingStart.md.D_W4BP0o.js new file mode 100644 index 0000000..524cb33 --- /dev/null +++ b/assets/Guide_Basic_2.GettingStart.md.D_W4BP0o.js @@ -0,0 +1,64 @@ +import{_ as s,p as i,n as a,O as n}from"./chunks/framework.CyRmAkVp.js";const o=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"Guide/Basic/2.GettingStart.md","filePath":"Guide/Basic/2.GettingStart.md","lastUpdated":1709003584000}'),l={name:"Guide/Basic/2.GettingStart.md"},t=n(`VitePress-Helper 支持两种安装方式：
npx @huyikai/vitepress-helper init
+# or
+npm install -g @huyikai/vitepress-helper
+vitepress-helper init将会被问到一些简单的问题：
# Project Name
+# Author
+# Version
+# Do you need local CMS?npm i @huyikai/vitepress-helper -D
+npm i vue
+npm i @huyikai/local-cmsTIP
因为 VitePress-Helper 中添加了 home.vue 这个自定义首页组件，所以需要安装对等依赖 Vue。如果不需要自定义首页，则可以不安装，并且后续无需创建 home.vue 文件。
如果需要本地 cms 功能，则需要安装 @huyikai/local-cms。
修改 config.js
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
+ });
+};新建目录 .vitepress/theme ，在目录下新建文件 home.vue、index.js
<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>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 中有以下脚本
{
+ ...
+ "scripts": {
+ "dev": "vitepress dev docs",
+ "build": "vitepress build docs",
+ "cms": "node node_modules/@huyikai/local-cms/cms.js docs",
+ },
+ ...
+}npm run dev：启动一个本地开发服务器(vitepress-dev)。
npm run build：构建用于生产的 VitePress 站点(vitepress-build)。
npm run cms：启动本地 CMS 服务器。
指导完成初始化操作，可以快速创建项目。
npx @huyikai/vitepress-helper init将会被问到一些简单的问题：
# 项目名称 | Project Name
+# 作者 | Author
+# 版本号 | Version
+# 是否需要本地 CMS ? | Do you need local CMS?初始化完成后，你可以运行 npm run dev 进行预览，如果 CMS 选择了 yes，则可以运行 npm run cms 进行内容管理。
运行本地 CMS 以简化内容管理
通过脚手架创建项目时,会询问是否需要添加 CMS，选择 是 在初始化完成后直接运行 npm run cms 即可使用。
后续补充 CMS 功能，需要先运行 npm install @huyikai/local-cms -D 安装依赖，然后在 package.json 的 scripts 中添加脚本命令 "cms": "node node_modules/@huyikai/local-cms/cms.js docs" 再运行 npm run cms 即可。
TIP
脚本命令中的 docs 为 CMS 的执行目录，需要与 VitePress 的执行目录一致，通常情况下这个目录会使用 docs ，可以自定义修改该目录，但是要注意需要同步修改脚本命令和 config.js 中 VitePress-Helper 的初始参数。
开发这个 本地CMS，是因为在使用过程中发现，即使有了导航栏和侧边栏的工具，但仍然存在一些维护成本，比如需要在开发工具中管理内容及目录，又要在 markdown 编辑器中编辑内容。想进一步简化这个过程的操作，更加专注于内容的创作和管理。
VitePress 是一个静态站点生成器，常见的使用方式是编辑内容然后将代码推送到代码仓库，通过代码仓库的 Pages 和工作流自动发布站点。也可以在服务器上直接放置构建后的代码文件或者通过容器部署。
CMS 系统有很多已经成熟的项目，之所以选择开发一个简单的本地 CMS ，而不是使用现有 CMS 系统的原因如下。
目前了解的大多数 CMS 系统需要服务器和数据库来搭配对内容管理和存储。 这种使用方式比较成熟，但对于当前的使用场景来说，体量过重了，增加额外的开发成本、使用成本。和 VitePress 的使用体验也有所割裂，通过 CMS 提供的接口获取内容对 SEO 也不够友好。 最主要的它们往往还需要额外付费订阅才能使用。
还有一种基于 Git 的 CMS 管理系统，相比较更适合，但也存在使用成本和体验的问题。当然这并不是这些 CMS 系统的问题，只是使用场景没有契合。
所以我认为在使用 VitePress 的场景下需要的是一个使用简单，没有太多概念和配置，甚至用起来像一个 markdown 编辑器的本地 CMS。
VitePress-Helper 中的 CMS 实际上是一个独立开发的库，让 VitePress 更加灵活的同时，也为了方便其他情况下使用，所以将 CMS 独立了出来。
',18),t=[i];function d(l,r,n,p,u,h){return o(),a("div",null,t)}const _=e(s,[["render",d]]);export{S as __pageData,_ as default}; diff --git a/assets/Guide_Basic_Features_CMS.md.CeNtjkhs.lean.js b/assets/Guide_Basic_Features_CMS.md.CeNtjkhs.lean.js new file mode 100644 index 0000000..7d6ff72 --- /dev/null +++ b/assets/Guide_Basic_Features_CMS.md.CeNtjkhs.lean.js @@ -0,0 +1 @@ +import{_ as e,p as a,n as o,O as c}from"./chunks/framework.CyRmAkVp.js";const S=JSON.parse('{"title":"CMS","description":"","frontmatter":{},"headers":[],"relativePath":"Guide/Basic/Features/CMS.md","filePath":"Guide/Basic/Features/CMS.md","lastUpdated":1709003584000}'),s={name:"Guide/Basic/Features/CMS.md"},i=c("",18),t=[i];function d(l,r,n,p,u,h){return o(),a("div",null,t)}const _=e(s,[["render",d]]);export{S as __pageData,_ as default}; diff --git a/assets/Guide_Basic_Features_Home.md.BoKOuwT3.js b/assets/Guide_Basic_Features_Home.md.BoKOuwT3.js new file mode 100644 index 0000000..35a74e3 --- /dev/null +++ b/assets/Guide_Basic_Features_Home.md.BoKOuwT3.js @@ -0,0 +1,19 @@ +import{_ as s,p as i,n as e,O as a}from"./chunks/framework.CyRmAkVp.js";const g=JSON.parse('{"title":"Home","description":"","frontmatter":{},"headers":[],"relativePath":"Guide/Basic/Features/Home.md","filePath":"Guide/Basic/Features/Home.md","lastUpdated":1709003584000}'),t={name:"Guide/Basic/Features/Home.md"},n=a(`在 VitePress 默认主题中，首页样式通过配置 Hero Section 来实现。不少开发者喜欢更具个性化的首页，默认主题不足以满足要求，VitePress 本身提供了自定义主题的方法，但为了让使用者更容易上手，注册了可以直接修改的 Home 组件作为首页，以此方便大家使用。
通过脚手架项目时，会自动创建文件 docs/.vitepress/theme/home.vue。直接在里面按需修改即可。如果想切换回默认主题的首页，则需要将 docs/index.md 文件中的 Frontmatter 中的 layout 字段修改为 home ，然后按照 VitePress 提供的 Hero Section 配置即可。
后续补充 Home 需要先运行 npm install @huyikai/vitepress-helper -D 安装依赖，然后创建 docs/.vitepress/theme/home.vue docs/.vitepress/theme/index.js。同时还需要将文档根目录(docs/index.md)下的 index.md 文件的 Frontmatter 中的 layout 字段修改为 custom。这样运行运行时首页显示的就会是 home.vue 中自定的内容了。
TIP
在 VitePress-Helper 默认添加的home.vue 的文件中，额外添加了一个 VitePress 默认导出的 <VPDoc /> 组件。这样 docs/index.md 文件中的内容会在首页的下方补充渲染。可以根据自身需要取舍这部分。
<script setup>
+...
+</script>
+<template></template>...
+import Home from './home.vue';
+
+const theme = {
+ Layout,
+ enhanceApp: ({ app }: any) => {
+ ...
+ app.component('Home', Home);
+ }
+};
+export default theme;---
+layout: custom
+aside: false
+outline: false
+lastUpdated: false
+---根据 VitePress 运行目录下的目录及内容自动生成导航栏
通过脚手架创建项目时，config.js 中已默认配置好导航栏相关配置。直接使用即可。
后续补充导航栏自动生成的功能，需要先运行 npm install @huyikai/vitepress-helper -D 安装依赖，然后修改 docs/.vitepress/config.js 中的配置。
import vitepressHelper from '@huyikai/vitepress-helper';
+export default async () => {
+ const instance: any = await vitepressHelper({
+ directory: 'docs',
+ collapsible: true
+ });
+ return{
+ ...
+ nav: instance.nav,
+ }
+};也可以根据自审需求，扩展 nav。
export default () => {
+ return {
+ nav: [
+ ...instance.nav,
+ { text: 'other', link: 'https://github.com/huyikai/vitepress-helper' },
+ { text: 'others', items:[...] }
+ ]
+ };
+};根据 VitePress 运行目录下的目录及内容自动生成侧边栏
通过脚手架创建项目时，config.js 中已默认配置好侧边栏栏相关配置。直接使用即可。
后续补充侧边栏栏自动生成的功能，需要先运行 npm install @huyikai/vitepress-helper -D 安装依赖，然后修改 docs/.vitepress/config.js 中的配置。
import vitepressHelper from '@huyikai/vitepress-helper';
+export default async () => {
+ const instance: any = await vitepressHelper({
+ directory: 'docs',
+ collapsible: true
+ });
+ return{
+ ...
+ sidebar: instance.sidebar,
+ }
+};VitePress is a very useful static document building tool. However, after using it for a while, I feel that there is still some room for improvement in terms of user experience.
The default navigation bar and sidebar configurations of VitePress are quite cumbersome, and the configuration files are separate from the source code files, requiring manual synchronization. This is not a big problem when managing a small amount of content, but it becomes a significant maintenance cost when there is a large amount of content.
On the other hand, as a VitePress user, there may be more than one VitePress project. It is quite troublesome to configure each project separately.
After discovering this issue, I searched for VitePress plugins and found that many people have the same feeling. I tried some plugins, but none of them solved the problem well or addressed the details that everyone is concerned about.
Therefore, I finally decided to write a tool to make it more convenient for myself to use, and also hope to help everyone use VitePress more easily.
',7),i=[s];function n(c,l,d,h,m,u){return o(),t("div",null,i)}const _=e(r,[["render",n]]);export{f as __pageData,_ as default}; diff --git a/assets/en_Guide_Basic_1.Introduction.md.Dpg7A9MY.lean.js b/assets/en_Guide_Basic_1.Introduction.md.Dpg7A9MY.lean.js new file mode 100644 index 0000000..60458d6 --- /dev/null +++ b/assets/en_Guide_Basic_1.Introduction.md.Dpg7A9MY.lean.js @@ -0,0 +1 @@ +import{_ as e,p as t,n as o,O as a}from"./chunks/framework.CyRmAkVp.js";const f=JSON.parse('{"title":"Welcome to VitePress-Helper","description":"","frontmatter":{},"headers":[],"relativePath":"en/Guide/Basic/1.Introduction.md","filePath":"en/Guide/Basic/1.Introduction.md","lastUpdated":1709003584000}'),r={name:"en/Guide/Basic/1.Introduction.md"},s=a("",7),i=[s];function n(c,l,d,h,m,u){return o(),t("div",null,i)}const _=e(r,[["render",n]]);export{f as __pageData,_ as default}; diff --git a/assets/en_Guide_Basic_2.GettingStart.md.3OBPGxo6.js b/assets/en_Guide_Basic_2.GettingStart.md.3OBPGxo6.js new file mode 100644 index 0000000..f03a375 --- /dev/null +++ b/assets/en_Guide_Basic_2.GettingStart.md.3OBPGxo6.js @@ -0,0 +1,64 @@ +import{_ as s,p as i,n as a,O as n}from"./chunks/framework.CyRmAkVp.js";const g=JSON.parse('{"title":"Quick Start","description":"","frontmatter":{},"headers":[],"relativePath":"en/Guide/Basic/2.GettingStart.md","filePath":"en/Guide/Basic/2.GettingStart.md","lastUpdated":1709003584000}'),t={name:"en/Guide/Basic/2.GettingStart.md"},e=n(`VitePress-Helper supports two installation methods:
npx @huyikai/vitepress-helper init
+# or
+npm install -g @huyikai/vitepress-helper
+vitepress-helper initYou will be asked some simple questions:
# Project Name
+# Author
+# Version
+# Do you need local CMS?npm i @huyikai/vitepress-helper -D
+npm i vue
+npm i @huyikai/local-cmsTIP
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
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.
<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>import Home from './home.vue';
+import theme from '@huyikai/vitepress-helper/theme/index';
+
+export default {
+ extends: theme,
+ enhanceApp: ({ app }) => {
+ app.component('Home', Home);
+ }
+};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.
{
+ ...
+ "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).
npm run build: Build a VitePress site for production (vitepress-build).
npm run cms: Start a local CMS server.
Guide to complete the initialization operation and quickly create a project.
npx @huyikai/vitepress-helper initYou will be asked some simple questions:
# Project Name
+# Author
+# Version
+# 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.
Run local CMS to simplify content management
When creating a project through the scaffolding, you will be asked whether to add CMS. Select yes and directly run npm run cms after initialization to use it.
To supplement the CMS function later, you need to first run npm install @huyikai/local-cms -D to install the dependencies. Then add the script command to the scripts in package.json as "cms": "node node_modules/@huyikai/local-cms/cms.js docs", and then run npm run cms.
TIP
The docs in the script command is the execution directory of the CMS, which needs to be consistent with the execution directory of VitePress. In most cases, this directory will use docs. You can customize and modify this directory, but you need to pay attention to synchronizing the script command and the initial parameters of VitePress-Helper in config.js.
The development of this local CMS is because during usage, it was found that even with tools such as navigation bars and sidebars, there are still some maintenance costs, such as managing content and directories in the development tool and editing content in a markdown editor. The aim is to further simplify the operation process, focusing more on content creation and management.
VitePress is a static site generator, commonly used by editing content and then pushing the code to a code repository, and automatically publishing the site through the Pages and workflows of the code repository. It can also be directly placed on a server or deployed through a container.
There are many mature CMS systems, but the reason for developing a simple local CMS instead of using an existing CMS system is as follows.
Most of the CMS systems currently known require servers and databases to be paired for content management and storage. This usage is more mature, but for the current usage scenario, it is too heavy, adding additional development and usage costs. It also deviates from the user experience of VitePress, and the content obtained through the interfaces provided by the CMS is not SEO-friendly. Most importantly, they often require additional subscription fees to use.
There is also a Git-based CMS management system, which is more suitable in comparison, but there are also usage and experience issues. Of course, this is not a problem with these CMS systems, it's just that the usage scenario does not fit.
So I believe that in the VitePress usage scenario, what is needed is a simple-to-use local CMS with few concepts and configurations, even as easy to use as a markdown editor.
The CMS in VitePress-Helper is actually a independently developed library, making VitePress more flexible, and also for convenience in other usage scenarios, so the CMS has been separated out.
',18),n=[i];function r(c,d,l,h,u,p){return a(),t("div",null,n)}const g=e(s,[["render",r]]);export{f as __pageData,g as default}; diff --git a/assets/en_Guide_Basic_Features_CMS.md.DqPUXJwW.lean.js b/assets/en_Guide_Basic_Features_CMS.md.DqPUXJwW.lean.js new file mode 100644 index 0000000..5458aa5 --- /dev/null +++ b/assets/en_Guide_Basic_Features_CMS.md.DqPUXJwW.lean.js @@ -0,0 +1 @@ +import{_ as e,p as t,n as a,O as o}from"./chunks/framework.CyRmAkVp.js";const f=JSON.parse('{"title":"CMS","description":"","frontmatter":{},"headers":[],"relativePath":"en/Guide/Basic/Features/CMS.md","filePath":"en/Guide/Basic/Features/CMS.md","lastUpdated":1709003584000}'),s={name:"en/Guide/Basic/Features/CMS.md"},i=o("",18),n=[i];function r(c,d,l,h,u,p){return a(),t("div",null,n)}const g=e(s,[["render",r]]);export{f as __pageData,g as default}; diff --git a/assets/en_Guide_Basic_Features_Home.md.BcFsMeye.js b/assets/en_Guide_Basic_Features_Home.md.BcFsMeye.js new file mode 100644 index 0000000..f1b14a7 --- /dev/null +++ b/assets/en_Guide_Basic_Features_Home.md.BcFsMeye.js @@ -0,0 +1,19 @@ +import{_ as s,p as e,n as i,O as a}from"./chunks/framework.CyRmAkVp.js";const g=JSON.parse('{"title":"Home","description":"","frontmatter":{},"headers":[],"relativePath":"en/Guide/Basic/Features/Home.md","filePath":"en/Guide/Basic/Features/Home.md","lastUpdated":1709003584000}'),t={name:"en/Guide/Basic/Features/Home.md"},n=a(`In the default VitePress theme, the homepage style is achieved through configuring the Hero Section. Many developers like a more personalized homepage, and the default theme is not enough to meet the requirements. VitePress itself provides a method for customizing themes, but in order to make it easier for users to get started, a Home component that can be directly modified is registered as the homepage, making it convenient for everyone to use.
When creating a project through the scaffolding, the file docs/.vitepress/theme/home.vue will be automatically created. You can directly modify it as needed. If you want to switch back to the default theme's homepage, you need to modify the layout field in the Frontmatter of the docs/index.md file to home, and then configure it according to the Hero Section provided by VitePress.
To supplement the Home later, you need to first run npm install @huyikai/vitepress-helper -D to install the dependency, and then create docs/.vitepress/theme/home.vue and docs/.vitepress/theme/index.js. You also need to modify the layout field in the Frontmatter of the index.md file in the document root (docs/index.md) to custom. This way, the content displayed on the homepage at runtime will be the custom content in home.vue.
TIP
In the home.vue file added by default in VitePress-Helper, an additional <VPDoc /> component exported by VitePress is added. This way, the content in the docs/index.md file will be additionally rendered below the homepage. You can choose to keep or discard this part according to your own needs.
<script setup>
+...
+</script>
+<template></template>...
+import Home from './home.vue';
+
+const theme = {
+ Layout,
+ enhanceApp: ({ app }: any) => {
+ ...
+ app.component('Home', Home);
+ }
+};
+export default theme;---
+layout: custom
+aside: false
+outline: false
+lastUpdated: false
+---Automatically generate navigation bar based on the directory and content under the VitePress running directory.
When creating a project through the scaffolding, the config.js has already configured the navigation bar related settings by default. Just use it directly.
To supplement the function of automatically generating the navigation bar, you need to first run npm install @huyikai/vitepress-helper -D to install the dependency, and then modify the configuration in docs/.vitepress/config.js.
import vitepressHelper from '@huyikai/vitepress-helper';
+export default async () => {
+ const instance: any = await vitepressHelper({
+ directory: 'docs',
+ collapsible: true
+ });
+ return{
+ ...
+ nav: instance.nav,
+ }
+};You can also expand the nav according to your own needs.
export default () => {
+ return {
+ nav: [
+ ...instance.nav,
+ { text: 'other', link: 'https://github.com/huyikai/vitepress-helper' },
+ { text: 'others', items:[...] }
+ ]
+ };
+};Automatically generate sidebar based on the directory and content under the VitePress running directory.
When creating a project through the scaffolding, the config.js has already configured the sidebar related settings by default. Just use it directly.
To supplement the function of automatically generating the sidebar, you need to first run npm install @huyikai/vitepress-helper -D to install the dependency, and then modify the configuration in docs/.vitepress/config.js.
import vitepressHelper from '@huyikai/vitepress-helper';
+export default async () => {
+ const instance: any = await vitepressHelper({
+ directory: 'docs',
+ collapsible: true
+ });
+ return{
+ ...
+ sidebar: instance.sidebar,
+ }
+};npx @huyikai/vitepress-helper initnpx @huyikai/vitepress-helper init