How to customize the front-end content display layout of Anqi CMS website?

AnQiCMS provides highly flexible front-end content display layout customization capabilities, allowing the website to present unique visual effects and information structures according to specific needs.This not only concerns the appearance of the website, but also lies in how to convey content efficiently and accurately to visitors.By understanding the template mechanism and various functions of AnQiCMS, users can easily achieve fine-grained control from the overall theme style to the display of individual content.

The template is the core of front-end layout

In AnQiCMS, the front-end layout of the website is mainly implemented through templates (Templates). These template files are usually in.htmlWith the suffix, they are stored uniformly in the system's/templatedirectory. Each website theme has an independent template folder, which includes oneconfig.jsonThe file defines the name, type, and other basic information of the topic.AnQiCMS uses a syntax similar to the Django template engine, which allows users familiar with web development to quickly get started.{{变量}}), conditional judgments ({% if %}）、looping over（{% for %}A variety of control structures provide strong support for dynamic content display.

On the template type, AnQiCMS provides three modes: adaptive (responsive), code adaptation, and independent PC + mobile sites.This means that no matter what type of device your website's target users mainly use, you can find an appropriate template strategy to optimize their access experience.

Customize the level and method of content display.

AnQiCMS's front-end layout customization can be expanded from multiple levels:

1. Switch the overall site theme and layout:Imagine your website as a stage, and the template is the overall scenic design of this stage.By selecting different template themes in the background, you can switch the overall style and layout of the website with one click.config.jsonFile, defines the characteristics of the theme. If you want to develop a completely new theme, just create a new folder under/templatedirectory and organize the files according to the conventions.

2. Page-level general layout adjustment:Each page type on the website (such as the homepage, article list page, article detail page) has its corresponding template file. For example,index/index.htmlCorresponding to the homepage,{模型table}/detail.htmlContent detail page,{模型table}/list.htmlContent list page. To improve the reusability of the template, you can extract the commonly used parts such as header, footer, sidebar, and place them inpartial/Under the directory, then pass through where needed{% include "partial/header.html" %}Reference the label easily. This modular design makes maintenance and updates more efficient.

3. Content model and deep customization of custom fields:The strength of AnQiCMS lies in its 'flexible content model' feature.It allows you to create or modify content models based on business needs, not just limited to traditional articles and products.You can define unique fields for each content type (such as news, products, cases, services, etc.), for example, add custom attributes such as 'color', 'size', 'material' to the 'product' model.{% archiveParams %}Or directly through{{archive.自定义字段名}}To call and display in this way, achieving personalized content display.

4. Fine-grained layout control down to the layout of individual content:If you want to have a unique layout design for a specific article, a category page, or even a single page, AnQiCMS also provides such granularity control.When publishing or editing content (articles, products, single pages, categories), the backend provides options for 'document templates', 'category templates', or 'single page templates'.download.htmlThis content will no longer use the default template, but will load the file you specify to display.This allows you to provide fully customized design for some special pages (such as landing pages, event pages) without affecting the general layout of other pages.

5. Use template tags to dynamically display data:Truly bringing the layout of the front-end to life is the rich template tags provided by AnQiCMS. These tags are the bridge connecting the template and the background data, allowing you to dynamically retrieve and display various information:

   • Global Information Tags:{% system %}Can retrieve website name, LOGO, filing number, and other global configurations;{% contact %}Can retrieve contact information;{% tdk %}Help you manage the page's SEO title, keywords, and description;{% navList %}Used to build flexible and variable navigation menus.
   • Content display tags:{% archiveList %}and{% archiveDetail %}Used for displaying articles or product lists and details;{% categoryList %}and{% categoryDetail %}Handle the list and details of category information;{% pageList %}and{% pageDetail %}Used for list and details display on a single page;{% tagList %}and{% tagDataList %}Used for displaying tags and their associated content.
   • Logical and auxiliary tags：Performing logical judgments within the template ({% if %}) or looping output ({% for %}) is equally simple and intuitive.{% pagination %}Tags can easily implement content pagination functionality,{% prevArchive %}and{% nextArchive %}Convenience in implementing the previous/next function. In addition, there is alsostampToDateUsed for time formatting, as well asinclude/extendsandmacroAnd tags, used for template reuse and structuring.

6. Optimization of content display details:In addition to the structural layout, the visual presentation details of the content are also important.AnQiCMS provides image processing options in the content settings, such as whether to automatically convert uploaded images to WebP format to optimize loading speed, whether to automatically compress large images, and various thumbnail generation methods (proportional scaling by the longest side, padding by the longest side, and cropping by the shortest side), and allows you to customize the thumbnail size.These features can help websites improve page loading performance while ensuring visual effects.Moreover, the system is built-in with Markdown editor support, as well as through integrating third-party libraries to support the rendering of mathematical formulas and flowcharts, making the content display more diverse.

Through the above multi-level, multi-dimensional customization methods, AnQiCMS grants users great freedom, allowing them to design the website's front-end layout in a way that conforms to the brand image and meets user experience, thus better achieving the goal of website content operation.

Frequently Asked Questions (FAQ)

1. Where should I place my custom template file? What are the naming conventions for them?Your custom template file should be placed in/templateUnder the directory, each topic has an independent subfolder. AnQiCMS follows a set of conventions to match template files:

• Public code snippets: Can be placed in the topic folder.partial/In the catalog, such asheader.html/footer.html.
• Home:index/index.htmlorindex.html.
• Content model home page:{模型table}/index.htmlor{模型table}_index.html.
• Document list page:{模型table}/list.htmlorlist-{分类ID}.htmlCan also bepage/{单页面ID}.html. *