CMS Frontend (zheng-ui)

The zheng-cms-web frontend is the public-facing user interface for the Zheng Content Management System. Described as "the simplest content management system," its primary purpose is to render and display content managed by the backend. This includes various content types such as news, blogs, Q&A, topics, and static pages.

The frontend is built using a combination of server-side templating with Thymeleaf and client-side technologies like Bootstrap and jQuery. It provides a responsive layout for different devices and includes features for content browsing, searching, and basic user interaction like commenting.

Architecture and Technology Stack

The frontend is a web application that relies on a Java backend for data processing and rendering. The HTML templates are processed on the server using Thymeleaf before being sent to the client.

The following diagram illustrates the basic rendering flow.

This diagram shows the server-side rendering process where user requests are handled by a controller, data is fetched, and Thymeleaf renders the final HTML.
Sources: zheng-ui/zheng-cms-web/index.html, zheng-cms/zheng-cms-web/pom.xml

Key Technologies

Page Structure and Layout

All pages within the zheng-cms-web application share a consistent layout, which is composed of three main parts: a header navigation bar, a main content area, and a fixed footer.

• Header (<nav>): A responsive, fixed-top navigation bar containing the site logo, dynamic menu items, a search dropdown, and user-related actions (Login, Register, Profile).
• Main Content (<div class="container">): This is the primary area where page-specific content is rendered. The content is dynamically populated by Thymeleaf variables like ${topic.description}, ${page.content}, or a list of articles.
• Footer (<footer>): A simple, fixed-bottom footer displaying copyright information.

This diagram shows the common layout structure found across all template files.
Sources: zheng-ui/zheng-cms-web/topic/index.html:23-143, zheng-ui/zheng-cms-web/page/index.html:24-144

Core Features

Content Modules

The frontend is organized into several distinct content modules, each with its own set of pages for listing and viewing details.

Sources: zheng-ui/zheng-cms-web/news/index.html, zheng-ui/zheng-cms-web/blog/index.html, zheng-ui/zheng-cms-web/qa/index.html, zheng-ui/zheng-cms-web/search/index.html

Dynamic Navigation

The main navigation bar is generated dynamically based on a ${menus} collection provided by the backend. It only renders top-level menu items (where pid is null).

<ul class="nav navbar-nav">
    <li th:each="menu : ${menus}" th:if="${menu.pid} == null">
        <a th:href="@{${menu.url}}" th:target="${menu.target}" th:text="${menu.name}">菜单</a>
    </li>
</ul>

Sources: zheng-ui/zheng-cms-web/index.html:47-51

Content Display and Organization

Content is primarily organized using categories and tags. Users can navigate to list pages that filter articles based on a selected category or tag.

• Category Listing: ...<a ... th:href="@{'/news/category/' + ${category.alias}}">...
• Tag Listing: ...<a ... th:href="@{'/blog/tag/' + ${tag.alias}}">...
• Article Detail: ...<a ... th:href="@{'/news/article/' + ${article.articleId}}">...

Pagination is also a key feature on list pages, with the HTML for the paginator being injected directly via th:utext="${paginator.html}".

Sources: zheng-ui/zheng-cms-web/news/index.html:142, zheng-ui/zheng-cms-web/blog/index.html:146, zheng-ui/zheng-cms-web/qa/index.html:146

User Interaction: Comments and Answers

Article detail pages for News, Blog, and Q&A modules include a form for users to submit comments or answers. This interaction is handled asynchronously using jQuery's AJAX capabilities.

The following sequence diagram illustrates the process of submitting an answer on a Q&A page.

This flow demonstrates a client-side POST request to the server. Upon a successful response, the page reloads to display the new content.
Sources: zheng-ui/zheng-cms-web/qa/question/index.html:150-163, zheng-ui/zheng-cms-web/news/article/index.html:149-162, zheng-ui/zheng-cms-web/blog/details/index.html:149-162