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

轻松驾驭AnQiCMS模板标签：让网站内容鲜活起来！English

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

AnQiCMS's template tag design borrows the syntax of Django template engine, which is familiar to developers who are familiar with this pattern, and even beginners can quickly get started. It mainly operates through two forms of tags:

  • {% ... %}：This type of tag is used to control the logical flow, such as conditional judgment (if), loop iteration (for), calling specific content blocks or functional tags.
  • {{ ... }}This label is used to directly output data, such as article titles, website names, image links, etc.

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

Start 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 allow you to easily call system-level configurations:

  • Basic website information: Use{% system ... %}Labels, 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 filing number and copyright information at the footer, which is just{{ system("SiteIcp") }}and{{ system("SiteCopyright")|safe }}such a concise statement (note that the copyright content may contain HTML, use|safeFilter can ensure it is parsed correctly).
  • Contact information: Through{% contact ... %}Tags, contact information, phone numbers, addresses, email addresses, WeChat, and other information set in the background can be dynamically displayed at any location on the page. For example, displaying the contact phone number 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 according to the current page type (home page, article detail page, category page, etc.), ensuring that the SEO settings of each page are optimized.<head>Set page title in label:<title>{{ tdk("Title", siteName=true) }}</title>,“ here is thesiteName=trueWill automatically append the site 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 dynamic display content. Through{% navList navs %}Label, you can get 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.NavListeasily achieve nested display with properties.

Core content presentation: articles, products, and custom fields

网站的核心价值往往体现在其发布的文章、产品或其他类型的内容上。AnQiCMS在这方面提供了极其灵活和强大的标签：English

  • Content list display:{% archiveList archives with ... %}It is a powerful tool for displaying article or product lists. You can precisely control the content to be displayed through various parameters:
    • moduleId="1"ormoduleId="2"：Specify the content model, such as article (1) or product (2).
    • categoryId="10"：Specify content under a specific category to be displayed.
    • limit="5"：Control the number of items displayed.
    • order="views desc"：Sort in descending order by view count.
    • type="page"：Turn on pagination mode,配合{% pagination pages %}tags to enable full page turning function. You can use{% for item in archives %}to cycle through each item in the list, and through{{ item.Title }}/{{ item.Link }}/{{ item.Thumb }}Call the title, link, thumbnail, and other properties.
  • Content detail pageIn the detail page of an article or product,{% 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 instead of outputting it as plain text.
  • Previous and next chapters and related content:{% prevArchive prev %}and{% nextArchive next %}Labels can easily realize the previous and next navigation on the article detail page.{% 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 have added custom fields such as 'Price', 'Model' to the product model, you can{% archiveParams params %}Labels are displayed in the detail page in a loop with these additional parameters, even directly through{{ archiveDetail("您自定义的字段名") }}This allows the website to adapt to various complex business needs.

In addition to articles and products,single page(such as "About Us{% pageList pages %}and{% pageDetail ... %}Tags can be used for management and display, with a simple and intuitive usage method.

Enhance Interactivity: Tags, Comments, and Friendship Links

A vibrant website cannot be separated from user interaction and information connectivity:

  • Tag Cloud and Tag List:{% tagList tags %}Tags can help you display popular tags on the website, or tags related to the current content. When users click on a tag,{% tagDataList archives with tagId="..." %}This will display all associated content lists based on the tag ID, making it convenient for users to quickly find information they are interested in.
  • Message form: Through{% guestbook fields %}Label, you can easily generate a dynamic feedback form.The custom fields (such as name, contact information, message content) on the back-end will automatically generate corresponding form elements with this tag, greatly facilitating user information submission.
  • Friendship Link:{% linkList friendLinks %}Tags are used to display the background settings of friend links, facilitating interconnection between websites.

Master process control and data refinement: 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 if 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 a slice. If the loop body is empty,{% empty %}Labels can be used to display a 'No content available' prompt, enhancing the user experience.
    
{% for item in archives %}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
    <li>当前没有文章。</li>
{% endfor %}
    You can also use it in a loopforloop.Counterto get the current loop index and achieve the effect of numbered display.
  • Data filter (|filter)English: The filter is a tool used to format or process variables, using|symbols to concatenate.
    • {{ item.CreatedTime | stampToDate("2006-01-02") }}English: Format the timestamp into a date format of “year-month-date”.
    • {{ item.Content | safe }}：Ensure that the HTML content is parsed correctly.
    • {{ item.Description | truncatechars:100 }}Extract the first 100 characters of the description and automatically add an ellipsis. Skillfully apply these filters to make your content more professional and standardized.

Summary and practical suggestions

The AnQiCMS template tag system is designed 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: