How does AnqiCMS implement highly customized display of the website front-end page?

I want to build a unique and powerful website, and the flexible control of the front-end page is the key.AnqiCMS fully understands this, it not only provides an efficient and stable backend management, but also endows users with extremely high customization capabilities on the front end.This is due to its exquisite template design, flexible content organization, and rich tag system, allowing users to fully build and present websites according to their own imagination.

I. Flexible template system: Customizing the website skeleton and style

The front-end customization capability of AnqiCMS is first reflected in its highly open and user-friendly template system.The system uses a syntax similar to the Django template engine, which allows even users with some experience in front-end development to quickly get started.

1. Intuitive file structure:All the front-end pages of the website are in.htmlfile format existing/templateIn the template folder. This means you can manage your website interface like you would manage ordinary web files.Style files, JavaScript scripts, and images, etc., are stored in a unified location/public/static/in the directory, with clear structure and easy maintenance.

2. A variety of template type choices:AnqiCMS provides various template types to meet the needs of different devices and design requirements:

  • Adaptive template:A single template adapts to all devices, responsive design is the mainstream choice.
  • Code Adaptation Template:Load different code dynamically based on the access device, but still share some resources.
  • PC+Mobile independent site mode:Design independent templates for PC and mobile separately to meet the large difference in experience between the two. When choosing the last two modes, you canmobileCreate a dedicated mobile template under the directory to achieve accurate user experience.

3. Conventional naming conventions: To simplify the operation, AnqiCMS also supports some default template naming rules. For example, for the article detail page, if you createdarticle/detail.htmlThe system will automatically recognize and apply. Furthermore, you can even create personalized templates for specific articles or categories, such asarticle/detail-10.htmlwill be used for the article with ID 10, andpage/about.htmlCan be specifically used for the "About Us" single-page, greatly enhancing the flexibility of customization.

Second, powerful content model and data calling: show information as you wish.

Website content is the flesh and blood, AnqiCMS's flexibility in content management is a powerful foundation for front-end highly customized.

1. Flexible content model:AnqiCMS allows users to customize content models according to business needs, whether it is articles, products, activities, or any other type of information, it can be organized by creating independent models.Each model can have exclusive custom fields, such as adding "color", "size", "material", and other fields to the "product" model.This means that the front-end template can display rich and structured product information based on these custom fields.

2. Rich data call tags:In the template, AnqiCMS provides a series of intuitive and easy-to-use tags (Tag) to help you easily call various data from the background:

  • Content management tags: archiveListUsed to obtain a list of articles or products,archiveDetailResponsible for displaying detailed information of a single article or product.categoryListandcategoryDetailUsed for category list and category details,pageListandpageDetailcorresponding to a single page.tagList/tagDataListandtagDetailLabels make it easy to display tag clouds and related content.These tags support rich parameter settings, such as flexible filtering based on category ID, model ID, recommended attributes, sorting methods, etc., to ensure that you can accurately obtain the required data.
  • System and contact information label: systemTags can obtain website name, LOGO, filing number, and other global settings,contactTags can retrieve contact information, phone numbers, email addresses, and other contact details. These tags allow the common information of the website to be managed and displayed uniformly in the template.
  • Navigation and friendly links: navListTags are used to dynamically generate website navigation menus, supporting multi-level structures.linkListYou can easily list the links.

3. Advanced data processing and logic control:In addition to direct data calls, AnqiCMS templates also support complex logic control and data processing, further enhancing the front-end customization level:

  • Conditional judgment and loop: ifTags are used to implement conditional judgments, displaying different content according to different situations.forTags can iterate over list data, serving as the foundation for displaying dynamic content such as article lists, product lists, and more.
  • Filters (Filters):A series of built-in filters allow you to format and process data in the template, such asstampToDateConvert timestamps to readable dates,truncatecharsTruncate the length of strings,safeUsed for safely outputting HTML content,addUsed for adding numbers or strings,replaceUsed for string replacement, greatly enriching the possibilities of data display.
  • Markdown support:If the content enables the Markdown editor, the template can automatically render Markdown to HTML, even support the display of mathematical formulas and flowcharts (by introducing third-party libraries), making the content presentation more diverse.

Section 3: URL structure and mobile adaptation: balancing SEO and user experience

Custom display on the front-end page also depends on the fine control of URL structure and mobile experience.

1. Highly customizable pseudo-static rules:AnqiCMS provides flexible pseudostatic rule management functions, allowing users to define the URL composition form of the website according to their needs.In addition to the built-in number pattern, model naming pattern, and category naming pattern, you can also enter the "custom mode" to finely configure the URL rules for document details, lists, single pages, tabs, and other pages.This not only helps to improve the SEO performance of the website, but also makes the URL more readable and logical.

2. Comprehensive mobile adaptation solution:As previously mentioned, AnqiCMS supports adaptive, code adaptation, and PC+mobile independent site modes, ensuring that your website can provide **access experience** on any device. Template developers can create independent sites for mobile devices.mobileDirectory, optimize the layout and interaction targetedly.

Summary

Through these functions, AnqiCMS provides a comprehensive front-end custom solution for website framework, content structure to dynamic data presentation.Whether it is to quickly build a responsive website or pursue pixel-perfect personalized design, AnqiCMS can provide powerful tools to support it.It encapsulates complex technical details in easily understandable and operable tags and configurations, allowing content managers and front-end developers to efficiently realize their creativity and create websites that are both beautiful and practical.

Frequently Asked Questions (FAQ)

1. Can I set completely different layouts and styles for each page of the website?AnqiCMS supports high customization, you can define different template files for different types of pages (such as the homepage, article detail page, product list page, and single page).Even the template for a specific article, product, or category can be set uniquely.By inheriting the template (extends(and local introduction)include）Function, you can create a unique layout and style for a specific page while maintaining a consistent overall style.

2. If I want to integrate a custom external API data on my website, does AnqiCMS's front-end template support it?The front-end template of AnqiCMS is mainly used to display data generated or aggregated through its backend management system.Although the template itself does not support direct calls to external APIs, you can achieve this in two ways: one is to use AnqiCMS's 'Content Collection and Bulk Import' feature to pre-import data from external APIs into AnqiCMS's content model, and then display it through template tags.Secondly, write front-end JavaScript code in the template, make asynchronous requests to external API data through Ajax on the client side, and dynamically render it to the page.

3. How to modify the Meta Title, Keywords, and Description in AnqiCMS templates for better SEO optimization?AnqiCMS provides powerful SEO features. You can usetdkTags to dynamically set the page Title, Keywords, and Description. For example,<head>tag, using{% tdk with name="Title" siteName=true %}Can retrieve the title of the current page and append the website name,{% tdk with name="Keywords" %}and{% tdk with name="Description" %}These are used to output keywords and descriptions. This content can be fine-tuned in the "Homepage TDK Settings", "Document Classification", "Page Management", or "Add Document" functions in the background.