How to use AnQiCMS template tags to dynamically display content data on the front-end page?

Ease the handling of AnQiCMS template tags: bring the website content to life!

In today's digital world, a website that can dynamically display content is far more attractive to visitors and improves user experience than a static page.AnQiCMS (AnQiCMS) provides us with a powerful and intuitive template tag system that allows us to present backend data flexibly on the website front end without writing complex code.This is like having a series of magic spells, just a few taps, and the website content comes to life.

The template tag design of AnQiCMS draws on the syntax of the Django template engine, making it familiar to developers who are familiar with this pattern, and even new users can quickly get started. It mainly operates through two forms of tags:

  • {% ... %}These tags are used to control the logic flow, such as conditional judgment (if), loop iteration (for), invoking specific content blocks or functional tags.
  • {{ ... }}These tags are used to directly output data, such as article titles, website names, image links, etc.

You have mastered these two tags, and you can achieve dynamic data display and flexible page layout in the AnQiCMS front-end template.

Turn on dynamic content display: from global information to navigation menu

Firstly, we usually start with the global information of the website. AnQiCMS provides a series of convenient tags to easily call system-level configurations:

  • Website basic information: Use.{% system ... %}Label, you can easily get the website name, Logo, filing number, copyright information, and other global settings. For example, to display the website name, just write it in the template.{{ system("SiteName") }}. Display the record number and copyright information at the footer, that is all.{{ system("SiteIcp") }}and{{ system("SiteCopyright")|safe }}Such a concise statement (note that the copyright content may contain HTML, using|safeThe filter ensures it is parsed correctly).
  • Contact Information: Pass{% contact ... %}Label, contact information, phone number, address, email, WeChat, and other information set in the background can be dynamically displayed at any location on the page. For example, the phone number to be displayed is{{ contact("Cellphone") }}.
  • SEO optimization information:{% tdk ... %}Tags focus on the SEO elements of the page, including Title, Keywords, Description.These tags can automatically obtain the corresponding content based on the current page type (home page, article detail page, category page, etc.), ensuring that the SEO settings of each page are optimal.For example, in<head>Set page title in tag:<title>{{ tdk("Title", siteName=true) }}</title>.siteName=trueWill automatically append the website name to the end of the title, in line with SEO**practice.

In addition to this global information, the website's navigation menu is also a key to dynamically displaying content. Through{% navList navs %}Label, you can retrieve and iterate over the navigation items configured on the back-end.This makes updating the menu extremely simple, no need to modify the template file, just adjust it in the background.Multi-level navigation can also be accessed via tagsNavListattributes can easily achieve nested display.

Core content presentation: articles, products, and custom fields

The core value of a website is often reflected in the articles, products, or other types of content it publishes. AnQiCMS provides extremely flexible and powerful tags in this regard:

  • Content list display:{% archiveList archives with ... %}It is a tool for displaying article or product lists. You can precisely control the content to be displayed with various parameters:
    • moduleId="1"ormoduleId="2": Specify the content model, such as article (1) or product (2).
    • categoryId="10": Specify the content under a specific category to be displayed.
    • limit="5": Control the number of items displayed.
    • order="views desc": Sort by the number of views in descending order.
    • type="page": Turn on pagination mode and cooperate{% pagination pages %}Tags can enable full page turning functionality. You can use{% for item in archives %}to cycle through each item in the list and through{{ item.Title }}/{{ item.Link }}/{{ item.Thumb }}Use properties to call titles, links, thumbnails, etc.
  • Content detail page.: On the article or product detail page,{% archiveDetail with name="Title" %}Tags can directly obtain detailed information about the current content. For example, to display the article content, you can use{{ archiveDetail("Content")|safe }}. Please note that the content field usually contains HTML, so|safeThe filter is indispensable, it tells the template engine to parse this text as HTML rather than as plain text output.
  • Previous and related content:{% prevArchive prev %}and{% nextArchive next %}Tags can easily implement the previous and next navigation of the article detail page. And{% archiveList archives with type="related" limit="3" %}it can intelligently list related recommended content based on the current article, greatly enhancing user stickiness.
  • Flexible content model and parameters: AnQiCMS's 'Flexible Content Model' is one of its highlights. If you add custom fields such as 'price', 'model', etc. to the product model, you can through{% archiveParams params %}The label loops to display these additional parameters on the detail page, even through direct calling.{{ archiveDetail("您自定义的字段名") }}This makes the website adaptable to various complex business needs.

In addition to articles and products,single page(such as "About Us", "Contact Us") can also be done through{% pageList pages %}and{% pageDetail ... %}tags for management and display, their usage is similar to articles, simple and intuitive.

Enhance Interactivity: Tags, Comments, and Friendship Links

An active website cannot do without user interaction and information interconnection:

  • Tag Cloud and Tag List:{% tagList tags %}Tags can help you display popular tags on your website or tags related to the current content. Users click on tags after,{% tagDataList archives with tagId="..." %}It can display all associated content lists based on the tag ID, making it convenient for users to quickly find the information they are interested in.
  • Message form: Pass{% guestbook fields %}The tag allows you to easily generate a dynamic feedback form. The custom fields (such as name, contact information, feedback content) are automatically generated by this tag to form corresponding form elements, greatly facilitating user information submission.
  • Friendship Link:{% linkList friendLinks %}Tags are used to display the background set links, facilitating interconnection among websites.

Master the control of flow and data refining: conditions, loops, and filters.

To make the template more intelligent and powerful, AnQiCMS also provides general process control tags and data processing filters:

  • Conditional judgment(if/elif/else)This is the most basic logic control in the template. For example, you can determine whether an image exists before deciding whether to display it:
    
{% if item.Thumb %}
    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
{% else %}
    <img src="/static/images/default.jpg" alt="默认图片" />
{% endif %}
  • Loop traversal(for/empty)When displaying list data,forLoops are indispensable. They can iterate over each item in an array or slice. If the loop body is empty,{% empty %}Tags can be used to display a "No content available" prompt, enhancing user experience.
    
{% for item in archives %}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
    <li>当前没有文章。</li>
{% endfor %}
    You can also use in a loop to utilizeforloop.Counterto get the current loop index, to achieve the effect of numbered display, etc.
  • Data filter (|filter): Filters are used to format or process variables, using|symbols.
    • {{ item.CreatedTime | stampToDate("2006-01-02") }}: Format timestamps as "year-month-day" date format.
    • {{ item.Content | safe }}Ensure that the HTML content is parsed correctly.
    • {{ item.Description | truncatechars:100 }}: Truncate the first 100 characters of the description and automatically add an ellipsis. Flexibly use these filters to make your content display more professional and standardized.

Summary and Practical Suggestions

The AnQiCMS template tag system aims to simplify the dynamic display of website content, allowing content operators and template developers to focus on content creation and the enhancement of user experience. By flexibly using these tags, you can: