2.1 Home page

# 2.1 Home Page

The home page of `MrDoc` is the list page of projects.

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

The home page of `MrDoc` mainly consists of the following parts:

- Header: contains the `MrDoc` logo, the search box for projects, the button for creating a new document, and the user-related hover list;
- Main body: contains the list of projects that the current user (guest not logged in or logged-in user) has permission to view, and the pagination bar of the project list;
- Footer: contains the copyright notice of `MrDoc`;

## Header

### Project Search

`MrDoc` provides a search box in the header of the home page for searching projects. The search scope includes the projects that the current user has permission to view, and the search term will match the title and description of the projects. If there are search results, they will be displayed, as shown in the figure below:

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

If there are no results matching the search criteria, `MrDoc` will give you a prompt as shown in the figure below:

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

### New Document Button

On the home page, we provide a convenient link for writing documents, allowing users to quickly enter the document editing page.

If the user is already logged in, clicking the "New Document" link in the header will open the document editing page in a new tab.

If the user is not logged in, clicking the "New Document" link in the header will open the user login page in a new tab.

### User-related Hover Button List

On the far right of the home page header, there are several user-related hover buttons, which are marked with a black half-body person icon regardless of whether the user is logged in or not.

If the user is already logged in, hovering the mouse here will display:

- Admin management; (if the user is the site administrator of `MrDoc`)
- Personal center;
- Change password
- Log out;

Clicking the button links will enter the corresponding pages and invoke the corresponding functions.

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

Conversely, if the user is not logged in, hovering the mouse here will display:

- Log in
- Register

Two button links, clicking them will jump to the login page and registration page respectively.

## Main Body

### Project List

The project list on the home page is arranged in the form of 3 per row on the PC side and 1 per row on the mobile side when the number of projects is sufficient.

Each project block displays the following information about the project:

- The name of the project;
- The creator of the project
- The name of the most recently edited document in the project;
- The description of the project;

If the project name, the name of the most recently edited document in the project, and the project description exceed the length, they will be omitted in the form of `……`; when the mouse stays on the corresponding data, the complete content will be displayed, as shown in the figure below:

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

### Project Pagination

The project list on the home page displays a maximum of 12 projects per page, and projects beyond that need to be displayed through pagination.