2.3 Document browsing page

# 2.3 Document Browsing Page

Clicking the link of a document in the outline of the `MrDoc` project browsing and reading page will jump to the document browsing and reading page, as shown in the figure below:

![](/media//202004/mrdoc-doc_1586267334.png)

The project document browsing and reading pages of `MrDoc` all use a two-column layout, in which:

- The left side is the sidebar of the project document content;
- The right side is the main body of the project document content;

## Left Outline

The left side of the project browsing and reading page consists of three parts:

1. Project content search box
2. Project name
3. Document outline of the project

### Document Outline

The left layout displays the hierarchical relationships of all documents under the project, thereby forming the document outline of the project (also called the document tree). `MrDoc` currently supports up to 3 levels of documents, which means that only level-2 documents can serve as parent documents.

On the document browsing and reading page, the document tree by default only displays the level-1 documents and the level at which the current document is located. At the same time, the link of the current document in the document outline is displayed in blue to indicate the position of the currently browsed and read document in the project outline.

You can click the icon on the right side of the document:fa-chevron-left: to expand the document tree at this level, and then you can click the icon on the right side of the document:fa-chevron-down: to collapse the document tree at this level.

### Search Box

The search box here is different from the search box on the homepage. It can only search the content of documents within this project. The search results will be displayed in the right layout, as shown in the figure below:

![](/media//202004/mrdoc-project-search_1586265878.png)

## Right Content Body

The right side of the page is the main body of the document content, which consists of the following 3 parts:

1. Top control bar
2. Middle content bar
3. Bottom sharing bar

At the same time, there are also two floating blocks:

- Document table of contents floating box
- Back to top floating icon

Below we introduce them one by one.

### Top Control Bar

The top control bar is used to control the page layout and perform additional management. Regardless of whether the user visiting this page is logged in, there will be the following icon buttons:

- :fa-align-justify: Used to collapse and expand the left outline;
- :fa-text-height: Used to switch the page font type (serif and sans-serif)
- :fa-font:-+ Used to adjust the page font size

![](/media//202004/mrdoc-doc-close_1586267676.png)

### Middle Content Bar

The middle content bar will display, from top to bottom, the project name, the project introduction, the document outline links under the project (clickable to jump to the corresponding document), and the download of the project export file (the project creator needs to enable the download of this project's export file in the personal center).

### Bottom Sharing Bar

At the very bottom is the social sharing bar, which integrates sharing buttons for common social platforms to facilitate users to quickly share the project.

### Document Table of Contents Floating Box

Used to quickly locate and jump to each heading and subheading in the document. At the same time, this floating box can also be minimized, maximized, and closed.

### Back to Top Icon

When there is too much document content, the page content will be very long. At this time, if you need to return to the top of the document, the best way is to click the "**Back to Top**" icon.