How to achieve high-level customization of the front-end page display of AnqiCMS?

Want to build a unique and powerful website, 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 a high degree of customization 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: Customize the website skeleton and style

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

1. Intuitive file structure:The front-end pages of the website are all.htmlstored in files/templateTemplate folder.This means you can manage your website interface just like you manage regular web page files./public/static/in the directory, with a clear structure and easy to maintain.

2. A variety of template types to choose from:AnqiCMS provides various template types to adapt to different devices and design requirements: English

  • Adaptive template:A single template fits all devices, responsive design is the mainstream choice. English
  • Code adapts to the template: EnglishBased on the access device, different code is dynamically loaded, but some resources are still shared.
  • PC+Mobile Independent Site Mode:Independently designed templates for PC and mobile, meeting the needs of large differences in experience between the two ends. When selecting the latter two modes, you can inmobileCreate a dedicated mobile template under the directory, achieving 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 have createdarticle/detail.htmlEnglish 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,page/about.htmlCan be specially used for the 'About Us' single page, greatly enhancing the flexibility of customization.

Second, powerful content model and data call: display information at will

The website content is the flesh and blood, the flexibility of AnqiCMS in content management is a powerful foundation for achieving highly customized frontend.

1. Flexible content model:

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 backend:

  • Content management tags: archiveListUsed to get article or product lists,archiveDetailResponsible for displaying the detailed information of a single article or product.categoryListandcategoryDetailUsed for category lists 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 according to category ID, model ID, recommendation attributes, sorting methods, etc., to ensure that you can accurately obtain the required data.
  • System and contact information label: systemTags can obtain the website name, LOGO, filing number, and other global settings,contactLabels can be used to retrieve contacts, phone numbers, email addresses, and other contact information. These labels allow the common information of the website to be managed and displayed uniformly in the template.
  • Navigation and友情链接: friendship links: navListTags are used to dynamically generate website navigation menus, supporting multi-level structures.linkListThen, you can easily list friend links.

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

  • Conditional judgment and loops: ifLabels are used to implement conditional judgments, displaying different content based on different situations.forThe tag can iterate over list data, serving as the cornerstone for displaying dynamic content such as article lists, product lists, etc.
  • Filter (Filters):A series of built-in filters allow you to format and process data in the template, such asstampToDateConvert timestamps to readable dates,truncatecharsTruncate string length,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 has enabled the Markdown editor, the template can automatically render Markdown to HTML, even support the display of mathematical formulas and flowcharts (via the introduction of third-party libraries), making the display form of the content more diverse.

English translation: Three, URL structure and mobile adaptation: balancing SEO and user experience

The custom display on the front-end page also cannot do without the fine-grained control of URL structure and mobile experience.

1. Highly customizable pseudo-static rules:

2. English comprehensive mobile adaptation solution:As mentioned before, AnqiCMS supports adaptive, code adaptation, and PC+mobile independent site three modes, ensuring your website provides **an excellent** access experience on any device. Template developers can create independent templates for mobile end.mobileIndex, optimize the layout and interaction specifically.

Summary

Through these functions, AnqiCMS provides a comprehensive front-end customization solution covering the full range from the website skeleton, 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 support.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.

Common Questions (FAQ)

1. Can I set a completely different layout and style for each page of the website?AnqiCMS supports high-level 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 so, it is possible to set unique templates for specific articles, products, or categories.extends）and local introduction（include）Function, you can create unique layouts and styles for specific pages 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?

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 can be used to dynamically set the page Title, Keywords, and Description. For example,<head>tags, using{% tdk with name="Title" siteName=true %}Can get the title of the current page and append the website name,{% tdk with name="Keywords" %}and{% tdk with name="Description" %}Then they are used to output keywords and descriptions.This content can be finely configured in functions such as 'Home TDK Settings', 'Document Classification', 'Page Management', or 'Add Document' on the backend.