Unlock AnQiCMS: The secret weapon of personalized content layout

In the digital age, websites are not just carriers 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 provides all the tools to achieve this goal with its powerful content model and flexible template mechanism.

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 content architecture of AnQiCMS: Customized foundation

Firstly, you need to understand how AnQiCMS organizes content if you want to customize the layout.It introduces the concept of 'content model', which is like a custom skeleton tailored for different types of content (such as articles, products, events, etc.).Each content model can have its own unique fields, for example, in addition to title and content, the product model 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 select.These fields are the sources from which you call and display data in the front-end template.This flexible content model design is the first step to achieving personalized layouts, 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, stored in the root directory of the website/templatefolder. Each independent template will have its own exclusive folder in this directory, which includes aconfig.jsonFiles, defining the template name, type (adaptive, code adaptation, PC+mobile) and other basic information.

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

  • Home Page： index/index.htmlorindex.html
  • Model home page: {模型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 details,product/detail.htmlUsed for product details)
  • Document List Page： {模型table}/list.htmlor{模型table}_list.html(Used to display the document list under a certain category)
  • Single Page Details Page： page/detail.htmlorpage.html
  • Tab: tag/index.htmlortag_index.html(Tag aggregation page),tag/list.htmlortag_list.html(Document list under the tag)
  • In addition, there aremobile/The directory is specifically used to store mobile template.

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

精细化控制: Specify exclusive templates 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 are editing in the backgroundDocument CategoryYou can find the options 'Category Template' and 'Document Template' in '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 accesses the 'News Center' category, the system will load this specific template.You can even choose to "Apply to child categories", so that all child categories under this category will 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 example,article/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 fora single 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.html[en] Used 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 making content dynamic and achieving a diverse layout 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{{变量}}Use single curly braces and percent signs for logical control tags.{% 标签 %}.

Here are some core tags and their application scenarios:

  1. Global information acquisition:

    • systemLabel: Get the website name, logo, record number, and other global configurations, commonly used in headers and footers.
    • contactLabel: Dynamically display contact information such as phone, address, email, 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 detail:

    • archiveListTag: This is a universal tag for fetching article and product lists, you can get the document list you need based on various conditions such as model ID, category ID, recommended attributes, and sorting method.For example, display the latest articles on the homepage or specific products on the category page.
    • archiveDetailLabel: Used to obtain detailed information of a single document (article or product), including title, content, images, custom fields, etc.
    • categoryListTag: Get category list, which can be used to build multi-level navigation menus or display category trees in the sidebar.
    • categoryDetailLabel: Get details of a single category, such as category name, description, Banner image, etc., commonly used for top display on category pages.
    • pageListandpageDetailTag: Used to obtain the list of single pages and detailed information of individual single pages, commonly used to build independent pages such as 'About Us' and 'Contact Us'.
    • tagListandtagDetailLabel: Used to get the list of labels and details of a single label, convenient for you to build a tag cloud or label aggregation page.

  3. Navigation and Association:

    • navListTag: Dynamically generates website navigation menus based on the navigation categories set in the background, supporting multi-level dropdowns.
    • breadcrumbLabel: Automatically generate breadcrumb navigation to enhance user experience and website structure clarity.
    • prevArchiveandnextArchiveLabel: Display the previous and next documents on the document detail page to guide users to explore further.
    • archiveList with type="related"Retrieve related document lists to enhance the association between content.

  4. Logical control and modularization:

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