Masterfully Navigate: How Anqi CMS Creates Personalized Website Front-end Layouts and Display Structures

In the digital age, the front-end design of a website is the key to user experience and brand image.An efficient content management system, not only to be able to manage content easily, but also to be able to flexibly customize the overall layout and display structure of the front-end page.AnQi CMS is well-versed in this, providing us with a powerful and intuitive set of tools, making website customization easily accessible.

AnQi CMS is an enterprise-level content management system developed based on the Go language, which fully considers the needs of small and medium-sized enterprises, self-media operators, and multi-site management users from the beginning of its design, and is committed to providing an efficient, customizable, and easy-to-expand solution.The core concept of its customized front-end is to allow users to freely control the presentation from macro layout to detailed content.

Template System: The Foundation of Front-end Customization

The powerful front-end customization ability of AnQi CMS is first reflected in its flexible template system. All front-end page layouts and displays are stored in/templateUnder the directory.htmlTemplate files to drive. These template files use a syntax similar to the Django template engine, allowing us to present backend data on the frontend in a concise and clear manner.

Each template folder contains oneconfig.jsonA file, which is like an "identity card" of a template, defining the name, version, and most importantly, the template type. Anqi CMS supports three website modes to adapt to different devices and user experience requirements:

  • (Responsive) adaptive mode: A set of template codes can automatically adjust the layout on different devices, which is the mainstream responsive design at present.
  • Code Adaptation Mode (Code Adaptation): It is allowed to use different CSS or JavaScript code for the PC and mobile端, but share part of the HTML structure.
  • PC + Mobile Independent SiteThis means that it provides the greatest flexibility, where the PC and mobile ends can have completely independent template files, and even bind different domain names. For an independent mobile site, we just need to create amobile/A folder containing template files for display on mobile devices.

This flexible template type selection means that no matter what preferences or specific requirements we have for responsive design, Anqi CMS can provide the corresponding support.

Page Layout: From Common Components to Exclusive Content

When customizing a website's frontend, we usually start with the macro structure of the page. The template directory structure design of Anqi CMS provides us with clear guidance:

  • Public Code (Global Components): Like the header (of aheader) and Footer (footer) Common parts that are usually concentrated on all pages, usually concentrate onbash.htmlIn such a file. The advantage of this is that once you need to modify the header or footer, you only need to edit one file, and all the pages that reference it will be updated synchronously.
  • Code Snippets (Snippets): Such as sidebars, breadcrumb navigation, article list items, etc., reusable UI components that can be placed inpartial/the directory. Through{% include "partial/sidebar.html" %}Such tags, we can introduce these code snippets anywhere, greatly improving the reusability and development efficiency of templates.
  • Specific Pages (Specific Pages): For the home page (index/index.html) Model home ({模型table}/index.html) Document detail page ({模型table}/detail.html), Document List Page ({模型table}/list.html) of single page detail pagepage/detail.html) etc, AnQi CMS has predefined file naming conventions. This means that as long as our template files follow these conventions, the system can automatically identify and apply them.

What is most commendable is that Anqi CMS also supportsCustom template file nameFor example, if we have a single-page "About Us" that needs a unique design, we can create one in the template directory.page/about.htmlFile, then in the background single page management, specify the 'About Us' page as this template.Similarly, for specific categories or documents, we can also set up independent templates to achieve highly refined page customization.This mechanism allows us to tailor unique visual and functional experiences for each important page of the website.

Data presentation: the magic of tags and filters.

The content of a website may be rich, but if it cannot be effectively displayed, its value will be greatly reduced. Anqi CMS is built-in with rich template tags and filters, which are the bridges connecting backend data with the frontend page, allowing us to present the content vividly in various forms:

  • System and contact information: Pass{% system with name="SiteName" %}We can easily obtain the website name, Logo, filing number, and other global settings;{% contact with name="Cellphone" %}Can call contact phone number, email, WeChat QR code and other contact information, which can be conveniently embedded in the page header, footer or "Contact Us" page.
  • Content aggregation and details:{% archiveList %}The tag can flexibly query articles and product lists, supporting filtering by category ID, model ID, recommended attributes, sorting method, even search keywords, to achieve various content aggregations such as home page recommendations, category lists, and related articles.{% archiveDetail %}It is used to display the detailed content of a single document, including title, description, text, thumbnail, etc., and can pass|safeThe filter ensures the correct rendering of HTML content, and can passstampToDateFilter format timestamp.
  • Navigation and classification:{% navList %}Tags can help us build multi-level navigation menus, whether it's top navigation, sidebar navigation, or footer navigation, they can be flexibly configured in the background and called here.{% categoryList %}and{% pageList %}It is used to display category lists and single-page lists, making it convenient for us to construct the website structure.
  • Custom fields and parameters: AnQi CMS allows us to customize additional fields for content models (such as articles, products) and categories. These custom fields can be accessed througharchiveDetailorarchiveParamsTags can be called in front-end templates and displayed, such as showing more parameters of products, the author's source of articles, etc., greatly expanding the possibilities of content display.
  • Powerful filter：except tags, various filters such as|safe/|truncatechars/|upper/|dateLet us process the output data further to ensure that the content is presented in the most elegant and design-compliant manner.

For a more modern content display, Anqi CMS even supports