Introduction to Software Interface

• 1. Navigation bar
• 2. Document toolbar
• 3. Document directory tree
• 4. Document editor area
• 5. Basic configuration of the current document

Create a New Project

Click "Document toolbar - Add Icon - New Project"

After clicking, the following interface will pop up:

1. Project name (also the folder name of the project, it is recommended to use English)
2. Project description
3. Select the directory to store the project (Final project directory: selected directory + project name)

After creating the project, the newly created project will be automatically opened, and you can start document operations as shown in the following figure:

In the red box is the basic configuration of the currently opened document, which is available for every document.

Online Preview

1. Go to the project root directory to install dependencies and run the project

# Go to the project root directory, not the original directory
npm install
npm run dosc:dev

Access the browser: http://localhost:5173 to achieve online preview. If everything goes well, you will see the following interface.

# After editing is completed, use the following command to build
npm run dosc:build

Tip: You can enter the project's root directory by clicking on the folder icon in the toolbar.

Navigation Configuration

You can edit the top navigation of the website as shown below

Document Management

Creating a New Document

1. Create a new document in the root directory as shown in the following figure:

2. Create a new document in the specified folder: right-click the folder - New Document

Basic Document Configuration

As shown in the above figure, you can configure individual settings for the document.

The following fields are specifically explained:

Outline Display Level: When set to 0, the outline is not displayed; when set to 3, the outline can be displayed up to the third level.

Document as Homepage

If you want the previously edited document to be the homepage, you can click the "Homepage" tab on the right side, and select "Homepage" as the page type.

Configure the basic information and features of this homepage.

Document Code

In VitePress, each Markdown file is compiled into HTML and treated as a Vue single-file component. This means that you can use any Vue features in Markdown, including dynamic templates, Vue components, or adding logic to the Vue component of the page by adding <script> tags.

Code refers to the code in the script and style tags of the document. The program will automatically recognize the code in these two tags and fill it into the code area (the entire document should not have multiple script or style tags, as unexpected events may occur during parsing).