Flexible control: How Anqi CMS creates personalized website front-end layout and display structure

In the digital age, the front-end design of the website is the key to user experience and brand image.An efficient content management system that not only allows easy management of content but also provides flexibility in customizing the overall layout and display structure of the front-end page.AutoCMS is well-versed in this, providing us with a powerful and intuitive set of tools, making website customization accessible.

AnQi CMS is an enterprise-level content management system developed based on the Go language. From the very beginning of its design, it fully considers the needs of small and medium-sized enterprises, self-media operators, and multi-site management users, and is committed to providing efficient, customizable, and easy-to-expand solutions.The core concept of its frontend customization lies in allowing 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/templatethe directory..htmlTemplate file to drive.These template files use a syntax similar to the Django template engine, allowing us to present background data on the front-end page in a concise and clear manner.

Each template folder contains oneconfig.jsonThe file, which is like an 'ID card' of a template, defines the template's name, version, and most importantly, the template type. AnQi CMS supports three types of website modes to adapt to different devices and user experience requirements: English

  • 自适应模式 (Responsive)：一套模板代码即可在不同设备上自动调整布局，这是当前主流的响应式设计。
  • Code Adaptation：Allow different CSS or JavaScript code to be used on PC and mobile devices, but share the same HTML structure.
  • PC+手机独立站点模式 (PC + Mobile Independent Site)This provides the greatest flexibility as the name implies, with completely independent template files for both PC and mobile ends, and even different domain bindings are possible. For independent mobile sites, we just need to create amobile/Folder, where template files will be stored specifically for mobile device display.

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 frontend, we usually start with the overall 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 the website (header) and the footer (footerSuch parts that are universally applicable across all pages are usually concentrated inbash.htmlSuch a file. The advantage of this is that once it is necessary to modify the header or footer, you only need to edit one file, and all the pages that reference it will be synchronized updated.
  • 代码片段 (Snippets)：像侧边栏、面包屑导航、文章列表项等可复用的UI组件，可以放置在partial/目录下。通过{% include "partial/sidebar.html" %}Such tags, we can introduce these code snippets anywhere we need, greatly enhancing the reusability and development efficiency of the templates.
  • 特定页面 (Specific Pages)：对于首页 (Home)index/index.html)、模型首页 (Model Home){模型table}/index.html)、文档详情页 (Document Detail){模型table}/detail.html)、文档列表页 (Document List){模型table}/list.html) and single page detail page (page/detail.html) etc., the Safe CMS has predefined file naming conventions. This means that as long as our template files adhere to these conventions, the system can automatically recognize and apply them.

The most commendable thing is that, Anqi CMS also supportsCustomize the template file name. For example, if we have a single page "About Us" that requires a unique design, we can create one in the template directorypage/about.htmlFile it, then in the single-page management in the background, specify the 'About Us' page as this template.Similarly, for specific categories or documents, we can also set independent templates to achieve highly refined page customization.This mechanism allows us to create a unique visual and functional experience for each important page of the website.

Data Presentation: The Magic of Tags and Filters

The content of a website is 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 bridge connecting backend data with the frontend page, allowing us to present the content vividly in various forms:

  • System and contact information: Through{% system with name="SiteName" %}We can easily obtain the global settings such as website name, Logo, filing number, etc.{% contact with name="Cellphone" %}Then you can call the contact phone number, email, WeChat QR code and other contact methods, which can be conveniently embedded in the header, footer or "Contact Us" page.
  • Content Aggregation and Details:{% archiveList %}Tags can flexibly query articles and product lists, supporting filtering by category ID, model ID, recommendation attributes, sorting method, and even search keywords, to achieve multiple content aggregations such as homepage recommendations, category lists, and related articles.{% archiveDetail %}Then it is used to display the detailed content of a single document, including title, description, text, thumbnail, etc., and can be accessed through|safeThe filter ensures the correct rendering of HTML content, throughstampToDateFilter format timestamp.
  • Navigation and categorization:{% navList %}Tags can help us build multi-level navigation menus, whether it's top bar navigation, sidebar navigation, or footer navigation, they can be flexibly configured in the background and called here.{% categoryList %}and{% pageList %}Then it is used to display the category list and single page list, convenient for us to build the website structure.
  • Custom fields and parameters：English CMS allows us to customize additional fields for content models (such as articles, products) and categories. These custom fields can be througharchiveDetailorarchiveParamsLabel is called and displayed in the front-end template, for example, showing more parameters of products, the author and source of articles, etc., greatly expanding the possibilities of content display.
  • A powerful filterEnglish: In addition to tags, various filters (such as|safe/|truncatechars/|upper/|date（English）Let us process and format the output data further to ensure that the content is presented in the most elegant and design-compliant manner possible.

For a more modern content display, Anqi CMS even supports