How to customize the display layout and style of AnQi CMS

Customizing the display layout and style of website content in Anqi CMS is an indispensable part in building a beautiful and efficient website.The system provides a rich set of tools and flexible mechanisms, allowing users to fully control the visual presentation of the website from content structure, template selection to detailed style.

The cornerstone: Flexible content model and customized backend

The display of website content first depends on its inherent structure.One of the advantages of AnQi CMS is that it provides the 'flexible content model' feature.This means you are not limited to publishing only 'articles' or 'products' as general types, but can create any number and type of 'content models' based on your business needs.For example, you can create independent content models for 'events', 'case studies', 'team members', and so on.

When defining these models, you can add various custom fields to them.For example, a "product" model can have fields such as "priceThese custom fields are not only convenient for you to enter and manage content in the background, but more importantly, they are the basis for displaying personalized layouts on the front end.You can easily retrieve the data of these fields and display them in various corners of the website.

Moreover, AnQi CMS also allows for customized management of categories and single pages.Each category can have an independent introduction, SEO information, even a Banner image and a custom template; single pages (such as "About Us

Unlock visual presentation: Various template structures and adaptive modes

AnQi CMS strictly separates content and display logic, all the layout and style of the front-end pages are controlled through template files. These template files are uniformly stored in the root directory of the system./templateIn the folder. Each independent template will have its own dedicated directory and contain aconfig.jsonfile to define the basic information and type of the template.

On template organization, the system provides two main modes: "folder organization mode" and "flattened file organization mode". These two modes are designed to help you better organize and manage a large number of template files:

• Folder organization mode: Tend to divide the directory according to the functional modules of the website (such as the homepage, model page, detail page, list page) to make the structure clear and easy to search. For example,/index/index.htmlUsed for the homepage,{模型table}/detail.htmlUsed for document detail pages.
• Flat file organization modeThen all the main page templates are placed directly in the template root directory, distinguished by naming conventions (such asindex.html/{模型table}_detail.html), which may be more convenient for small websites or developers who are accustomed to flat structures.

No matter which mode you choose, you can specify a specific template file for different content types, even for a specific document, category, or single page. For example, specify a template file for the "About Us" page.page/about.htmlTemplate, or specify for a product categoryproduct/list-special.htmlTemplate, thus achieving highly personalized page layout.

For access needs of different devices, Anqi CMS is built-in with multiple website modes: adaptive, code adaptation, and PC + mobile independent site mode. Among them, if you choose code adaptation or PC + mobile independent mode, you can create a template in the template directory.mobileSubdirectory, storing templates specifically designed for mobile devices, ensuring that there is also **a good browsing experience on small screen devices.

Precise content control: powerful template tag system

Present the data from the background on the front-end page, AnQi CMS provides a powerful and flexible template tag system.These tags are like bridges connecting backend data with frontend display, allowing you to easily retrieve the required information and format it with preset styles.

• Global Information Tag::LikesystemThis tag can retrieve the website name, Logo, copyright information, etc.;contactThis tag can retrieve contact information, phone number, address, etc.;tdkThe tag is responsible for outputting the page title, keywords, and description (TDK) information, which are key elements for website SEO and user experience.navListandbreadcrumbTags are used to build the website's navigation menu and hierarchical breadcrumb navigation.
• Content list and detail tagsThis is the key to displaying the core content of the website.archiveListTags allow you to flexibly obtain lists of various contents such as articles, products, and support multiple filtering and sorting methods. Whether it's the hot recommendations on the homepage, the latest releases in the sidebar, or the detailed lists on the category page, it can be realized through it. AndarchiveDetail/pageDetail/categoryDetailTags that focus on displaying complete information about a single content, including title, content, images, and custom parameters. In addition, there are alsoprevArchiveandnextArchivetags that make it easy for you to navigate between articles.
• Dynamic Data and Interactive Label:archiveParamsTags can dynamically display various custom parameters you define in the content model, such as product specifications, author information, etc., greatly enhancing the richness of the content.archiveFiltersThe label provides support for complex filtering functions, such as multi-dimensional filtering by price, attributes, etc. in the product list, helping users quickly find the information they need.linkListTags are used to display friendship links,commentListandguestbookTags are used separately to display comment and message forms, facilitating user interaction.
• Logical and structural control tags: To make the template more expressive, the system is built-inifLogical judgment andforLoop through tags, you can decide whether to display content based on the existence of data or whether it meets specific conditions, or loop to output list data.withTags can define temporary variables in templates, which improves code readability.includeandextendsTags also support modular development and inheritance in templates, helping you build reusable, easy-to-maintain template structures.

The details: fine-tuning of style and content presentation

In addition to the macro layout and data retrieval, AnQi CMS also provides the possibility of customization and optimization in many details, making your website visually and functionally more perfect.

• Content editing and Markdown: When content is published, the rich text editor provides rich style tools.For users accustomed to Markdown, the system also provides Markdown editor support.archiveDetail/pageDetailortagDetailYou can also use tags to retrieve content whenrender=trueThe parameter indicates that the system should automatically render Markdown content into HTML to ensure the accuracy of the front-end display.
• Image processing and optimizationThe visual appeal of a website cannot do without high-quality images.The AnQi CMS supports features such as automatically generating thumbnails, automatically compressing large images, and converting to WebP format when uploading images.You can set a uniform thumbnail size and processing method in the background, and can also upload multiple images or set a cover thumbnail for specific content (such as document images, category banners, single-page slideshows), and flexibly retrieve them through template tags to achieve various display effects such as galleries and slideshows.In addition, the images in the document content also support "lazy loading" configuration, which helps to improve page loading speed.
• URL and pseudo-staticsThe URL structure of a website is crucial for user experience and SEO.The AnQi CMS provides powerful static rule management features, you can choose from a variety of preset URL patterns, or completely customize the composition of the URL, such as including model name, category name, ID, or custom filenames, making your website links more friendly and standardized.
• Data formatting and filtersIn the template, when displaying data, you may need to perform text truncation, date formatting, number conversion, and other operations. Anqi CMS is built-in with a variety of filters (Filters), such assafeUsed for safe HTML content output,truncatecharsUsed for truncating strings and adding an ellipsis,stampToDateUsed for formatting timestamps,addUsed for adding numbers or strings,replaceUsed to replace specific content in strings. These filters allow you to finely control the display style of data at the template level without writing complex code.

By these functions and mechanisms, Anqi CMS gives you a great degree of freedom to customize the layout and style of website content.From the organization of content in the backend to the template rendering in the frontend, every link aims to enable you to build a unique, user-demanding, and visually appealing website efficiently and conveniently.

Frequently Asked Questions (FAQ)

1. How to apply different template styles to specific articles or categories?You can edit articles or categories in the background, find the 'Other Parameters' option in the 'Document Template' or 'Category Template' option. Here you can enter the name of your custom template file (for examplespecial-article.htmlorcategory-download.html)