How to customize the display layout of different types of content in AnQiCMS?

Unlock AnQiCMS: The secret weapon for personalized content layout

In the digital age, a website is not just a carrier of information, but also the core of brand image and user experience.A system that can flexibly customize the display layout of content, which is undoubtedly the key to improving operational efficiency and user attraction for small and medium-sized enterprises, self-media operators, and multi-site managers.AnQiCMS with its powerful content model and flexible template mechanism provides us with all the tools to achieve this goal.

Today, let's delve into how to customize the display layout of different types of content in AnQiCMS, making your website content shine with unique charm.

Understand the AnQiCMS content structure: the custom basis

Want to customize the layout, first you need to understand how AnQiCMS organizes content.It introduced the concept of 'content model', which is like a customized skeleton tailored for different types of content (such as articles, products, events, etc.).Each content model can have its own unique fields, such as, the product model, in addition to the title and content, can also have fields such as "price", "stock", etc., while the article model may only need "author", "source".

When you create or edit content in the background, the system will display the corresponding fillable fields based on the content model you choose.These fields are the source of data you call and display in the front-end template.This flexible content model design is the first step in achieving personalized layout, ensuring that you can define the most suitable structure for each content type according to your business needs.

Master the template files and directory structure: the canvas of layout

AnQiCMS template files are unified in use.htmlSuffix, placed in the root directory of the website/templateIn the folder. Each independent template will have its own dedicated folder in this directory, which contains aconfig.jsonFile, defines the name, type (adaptive, code adaptation, PC + mobile) and other basic information of the template.

Inside the template folder, you can use two organization modes: folder mode or flattened file mode. Regardless of the mode, AnQiCMS provides some default template naming conventions, such as:

• Home: index/index.htmlorindex.html
• Model Home: {模型table}/index.htmlor{模型table}_index.html(For example:)article/index.htmlUsed for article list page,product/index.htmlUsed for product list page)
• Document Details Page: {模型table}/detail.htmlor{模型table}_detail.html(For example:)article/detail.htmlUsed for article detail,product/detail.htmlUsed for product detail)
• Document List Page: {模型table}/list.htmlor{模型table}_list.html(Used to display the document list under a certain category)
• Single page detail page: page/detail.htmlorpage.html
• Tab Page: tag/index.htmlortag_index.html(Tag aggregation page),tag/list.htmlortag_list.html(Document list under tag)
• Additionally, there aremobile/The catalog is specifically used to store mobile template.

It is crucial to understand these default naming rules, as they determine which template the system will load to display your content when no special specification is made.

Fine-tuning control: Specify a dedicated template for specific content

The strength of AnQiCMS lies in the fact that it not only supports default template rules, but also allows you to specify unique display templates for specific categories, documents, or even individual pages.This is like putting a custom-made outfit on your content, making it stand out on the website.

When you edit in the backgroundDocument CategoryYou can find the options 'Category Template' and 'Document Template' in the 'Other Parameters'.

• Category template:If you want the list page of a category (such as "News Center") to be different, you can enter a custom template filename here (for example,article/news-list.html)。So, when the user visits the "News Center" category, the system will load this specific template.You can even choose to "apply to subcategories", so that all subcategories under this category also follow this template style.
• Document template:Similarly, if you want all documents under a certain category to use a unified detail page layout, you can specify a document template here (for examplearticle/news-detail.html)

Forsingle page(such as "About Us", "Contact Us"), the "Single Page Template" option is also provided in the page editing interface. If you want the "About Us" page to have a special design, you can create one likepage/about.htmlThe template file, and specify it here.

And forSingle documentWhen publishing or editing, you can find the "Document Template" in the "Other Parameters" to specify an independent template for this particular article or product, for examplearticle/download.htmlUsed to display a unique layout for a download page.

Through these backend settings, you can easily achieve layout customization from global to local, meeting various complex content display needs.

Dynamic data rendering: unlock the powerful capabilities of template tags

Custom template files are just the first step; the key to bringing content to life and achieving diverse layouts lies in the rich template tags provided by AnQiCMS.These tags allow you to retrieve and display various data on the website programmatically, and perform logical judgments and loop operations.

AnQiCMS template tag syntax is similar to Django template engine, variables are enclosed in double curly braces{{变量}}Logic control labels use single curly braces and percent signs{% 标签 %}.

The following are some core labels and their application scenarios:

1. Global information acquisition:

   • systemLabel: Get the global configuration of the website name, LOGO, filing number, etc., commonly used in the header and footer.
   • contactLabel: Dynamically display contact information, phone numbers, addresses, email addresses, etc., making it convenient for customers to find you at any time.
   • tdkLabel: Flexibly set the page's Title, Keywords, and Description, which is the foundation of SEO optimization.

2. Content list and details:

   • archiveListLabel: This is a universal tag for retrieving articles and product lists. You can obtain the required document list based on various conditions such as model ID, category ID, recommended attributes, sorting method, and more.For example, display the latest articles on the homepage or specific products on the category page.
   • archiveDetailLabel: Used to obtain detailed information about a single document (article or product), including title, content, images, custom fields, etc.
   • categoryListLabel: Get the category list, which can be used to build multi-level navigation menus or display the category tree in the sidebar.
   • categoryDetailLabel: Get details of a single category, such as category name, description, Banner image, etc., often used for top display on category pages.
   • pageListandpageDetailLabel: Used to retrieve the list of single pages and the details of a single page, commonly used to build independent pages such as "About Us", "Contact Us", etc.
   • tagListandtagDetailTags: Used to retrieve tag lists and details of individual tags, making it convenient for you to build tag clouds or tag aggregation pages.

3. Navigation and Association:

   • navListLabel: Dynamically generates website navigation menus based on navigation categories set in the background, supports multi-level dropdowns.
   • breadcrumbTag: Automatically generate breadcrumb navigation to enhance user experience and website structure clarity.
   • prevArchiveandnextArchiveTag: Display previous and next documents on the document detail page to guide users to delve deeper into browsing.
   • archiveList with type="related"：Get related document lists, enhance the correlation between content.

4. Logical control and modularization：

   • if else endifLabel: Implement condition judgment, displaying different content or style based on different conditions. For example, determine whether there is a thumbnail to decide whether to display the image.
   • for empty endforLabel: Traverse array or list, commonly used to display article lists, product lists, image groups, etc.
   • includeLabel: Integrate common code snippets such as headers, footers, sidebars, etc. into different templates to achieve code reuse and improve maintenance efficiency.
   • extendsLabel: Implement template inheritance, you can create a base skeleton template (such asbase.html), define the common structure, and then in other page templates