How to use AnQiCMS built-in tags to control content display logic?

In AnQiCMS, the built-in tag system is the core tool you use to control the display logic of website content.It provides a powerful and flexible syntax that allows you to control the acquisition, filtering, sorting, formatting, and final layout of content in template files without writing complex backend code.This system is similar to the Django template engine syntax, easy to learn, and can help you convert technical details into intuitive display effects.

Basic structure of AnQiCMS tags

The AnQiCMS tag system mainly consists of two basic elements:

1. Variable output tag ({{ 变量名 }}): It is used to display data directly on the page, such as obtaining the article title{{ item.Title }}.
2. Logical control label ({% 标签名 参数 %}): Used to handle various logic, such as conditional judgments, loop traversals, file imports, etc. These tags usually require a{% end标签名 %}Close it.

Understanding these two tags is the key to deeply using AnQiCMS templates. All tags and variables are strictly case-sensitive and must be consistent when used.

Retrieve and display content: data-driven display logic

AnQiCMS provides various tags to retrieve different types of content, you can choose the appropriate tag according to your needs:

• List data acquisition:

  • archiveList: Used to obtain document lists under articles, products, and other models. You can setmoduleIdSpecify models (such asmoduleId="1"obtain articles),categoryIdFilter categories,limitControl the quantity,type="page|list"Choose pagination or a regular list,orderDefine sorting rules, etc.
  • categoryList: Get the category list. Often used to display navigation menus or sidebar categories. You can accessparentIdSpecify the parent category, even get the subcategory or sibling category of the current category.
  • pageListGet the single page list, such as "About Us", "Contact Us", etc.
  • tagListGet the tag list, often used to build popular tag clouds or related tags.
  • navListGet the website navigation menu configured in the background. Supports multi-level navigation.

  After you get the list data, you will usually combine{% for %}Loop tags to iterate and display one by one:

  {% archiveList archives with type="list" categoryId="1" limit="5" %}
      {% for item in archives %}
          <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
      {% empty %}
          <li>当前分类下暂无内容。</li>
      {% endfor %}
  {% endarchiveList %}
  

  The code will display the titles of the first 5 articles with category ID 1, if the list is empty, it will display 'No content under the current category.'

• Detail-oriented data acquisition:

  • archiveDetailGet the detailed information of a single document. On the article detail page, it is usually not necessary to specify the ID, as it will automatically retrieve the document information of the current page. You can specifyname="Title"Get the title,name="Content"to get content, etc.
  • categoryDetailGet detailed information of a single category, such as category title, description, link, etc.
  • pageDetailGet detailed information of a single page.
  • tagDetailGet detailed information of a single tag.
  • systemGet global system settings, such as website nameSiteName, Website LogoSiteLogo, Record numberSiteIcpetc.
  • contactGet contact information configured in the background, such as phone numberCellphonephone, contact emailEmailetc.
  • tdkGet SEO information of the current page, such as titleTitle, keywordsKeywordsDescription,Description.

  These tags are usually used for page header SEO settings, detail page content display, or footer information display:

  <title>{% tdk with name="Title" siteName=true %}</title>
  <meta name="keywords" content="{% tdk with name="Keywords" %}">
  <meta name="description" content="{% tdk with name="Description" %}">
  
  <h1>{% archiveDetail with name="Title" %}</h1>
  <div>{{ archiveDetail with name="Content" | safe }}</div>
  

Logical control and conditional display

In content display, we often need to decide whether to display an element or what kind of content to display based on specific conditions.{% if %}Tags are the core of this logic:

• Conditional judgment:

  {% if item.Thumb %}
      <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
  {% else %}
      <img src="{% system with name="DefaultThumb" %}" alt="默认图片">
  {% endif %}
  

  This code will determine if the article has a thumbnail, if it does, it will display it, otherwise, it will display the default system thumbnail.

• Multi-condition judgmentYou can use{% elif %}and{% else %}Handle more complex logic, such as determining user permissions, content types, etc.

Data formatting and conversion

AnQiCMS provides a series of filters (|) and dedicated tags to handle data formatting, ensure that content is presented in **style: World

• Date and Time:stampToDateLabels can format timestamps into readable date and time strings. It should be noted that the format parameters follow the specific time formatting standards of the Go language (such as2006-01-02 15:04:05)

  <span>发布日期：{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
  

• Text content processing:

  • |safeThis is a very important filter used to display content in a rich text editor or strings containing HTML tags.It can prevent HTML tags from being escaped, ensuring that the page renders correctly.
  • |truncatechars:N: Truncate the string to a specified number of characters and add "..." at the end
  • |default:"默认值": Display a predefined default value when the variable is empty or does not exist.
  • |render: If your content is in Markdown format, this filter can render it into HTML.
  • |replace:"旧词,新词": Replace a specific substring in a string.
  • |split:"分隔符"and|join:"分隔符": Used for conversion between strings and arrays.

  <p>{{ item.Description | truncatechars:100 }}</p> {# 截取前100个字符 #}
  <p>{{ item.Content | render | safe }}</p> {# 渲染Markdown内容并确保HTML正确显示 #}
  

Reusability and organization of template code

To improve efficiency and maintainability, AnQiCMS supports template inheritance, inclusion, and macro definitions:

• {% include "路径/文件名.html" %}Insert the content of another template file at the current position. This is very suitable for reusing common modules such as headers, footers, and sidebars. You can also usewithPass the parameter to the included template.
• {% extends "基础模板.html" %}and{% block 名称 %}: Implement template inheritance. You can define a basic layout (such as)base.html), which contains the page skeleton, and then the child template rewritesblockFill specific content without needing