2.2 Collection browsing page

# 2.2 Project Browsing Page

Clicking a project in the project list on the `MrDoc` homepage will redirect to the project browsing and reading page, as shown in the following figure:

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

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

- The left side is the sidebar for 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. Project document outline

### Document Outline

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

On the project browsing and reading page, the document tree displays only level-1 documents by default. You can click the icon on the right side of a document:fa-chevron-left: to expand the document tree at that level, and then click the icon on the right side of the document:fa-chevron-down: to collapse the document tree at that level.

### Search Box

The search box here is different from the search box on the homepage; it can only search content within the current project. The search results will be displayed in the right layout, as shown in the following figure:

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

## Right Content Body

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

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

We will introduce them one by one below.

### 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, the following icon buttons will be present:

- :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-project-close_1586266762.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's export file (the project creator needs to enable export file download for this project in the personal center).

### Bottom Sharing Bar

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