What are the basic syntax rules of the AnQiCMS template engine used to display content?

AnQiCMS provides a user-friendly and powerful template engine, its design philosophy is to make the display of website content both flexible and easy to use.If you are familiar with template syntax such as Django or Blade, then AnQiCMS's template engine will be very familiar to you.It is committed to presenting complex backend data in a clear and readable manner on the website front end, allowing content operators to focus on content creation and optimization, rather than getting bogged down in code details.

Core syntax of template engine: The foundation for building content display

The basic syntax of AnQiCMS template engine revolves around two types of tags:

  1. Variable output:When you need to display data or content directly on the page, you will use double curly braces{{ 变量名称 }}For example, you may see the name of the website displayed.{{ siteName }}Such a mark. It is worth noting that variables in the template usually follow the camel case naming convention, that is, the first letter of each word is capitalized, for examplearchive.Titleorcategory.Link.

  2. Logic and control flow:For more complex display logic, such as conditional judgment (if a certain condition is met, a certain section of content is displayed) or loop (traversing a group of data and displaying each one in turn), the template engine provides a single curly brace and percentage sign marking method{% 标签名 参数 %}These tags usually need to appear in pairs, and if there is a start tag, there must be an end tag, such as{% if 条件 %}...{% endif %}or{% for item in list %}...{% endfor %}This ensures the integrity of the logical block.

On the organization of template files, AnQiCMS agrees to use.htmlas the suffix of template files, and store them uniformly in the site's/templateIn the directory. While images, CSS styles, JavaScript scripts, and other static resources are stored separately./public/static/In the catalog. To ensure the page displays normally, all template files should use UTF8 encoding.

Flexible content display: common tags and practices

The strength of AnQiCMS lies in its rich built-in tags, which make it easy to display various types of content:

Get global information of the website

  • System settings tag (system):Used to get the global configuration such as website name, logo, filing number, and basic URL.
    
<title>{{% system with name="SiteName" %}}</title>
<img src="{{% system with name="SiteLogo" %}}" alt="网站Logo" />
  • Contact information label (contact):Easily retrieve contact, phone, address, email, and other information from the website backend settings.
    
电话：{{% contact with name="Cellphone" %}}
地址：{{% contact with name="Address" %}}
  • Universal TDK tag (tdk):It is crucial for SEO, it can automatically generate or obtain the settings according to the current page type (home page, article, category, etc.)title/keywordsanddescription.
    
<meta name="description" content="{{% tdk with name="Description" %}}">

Build navigation and page structure

  • Navigation list tags (navList):Used to generate the top, bottom, or side navigation menu of a website. It can handle multi-level navigation and highlight the selected item based on the current page state.
    
<ul>
{% navList navs %}
    {% for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        </li>
    {% endfor %}
{% endnavList %}
</ul>
  • Breadcrumbs navigation tag (breadcrumb):Automatically generate the hierarchical path from the current page to the homepage, enhancing user experience.
    
{% breadcrumb crumbs with index="首页" %}
    {% for item in crumbs %}
        <span><a href="{{ item.Link }}">{{ item.Name }}</a></span>
    {% endfor %}
{% endbreadcrumb %}

Display content categories and single pages

  • Category list label (categoryList):Get the category list under the content model of articles, products, etc., which supports filtering by model ID and parent category ID.
    
{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
    {% endfor %}
{% endcategoryList %}
  • Category detail tag (categoryDetail):Get detailed information of a specific category, such as category title, description, thumbnail, etc.
    
<h1>{{% categoryDetail with name="Title" %}}</h1>
<div>{{% categoryDetail with name="Description" %}}</div>
  • Single page list (pageList) and details (pageDetail):Similar category tags, but used to display independent single-page content such as 'About Us', 'Contact Us', etc.

Core content: articles and product display

This is the core of website content operation, AnQiCMS provides powerful tags to handle the list and details of articles and products.

  • Document list tag (archiveList):This is one of the most commonly used tags, used to retrieve lists of articles or products. It supports various filtering and sorting methods:
    • By model ID and category ID: moduleId="1" categoryId="1"
    • Sorting: order="id desc"(Latest release),order="views desc"(Most viewed)
    • List type: type="list"(Normal list),type="page"(Paged list),type="related"(Related articles)
    • Quantity limit: limit="10"
    • Search keywords: q="关键词"
    {% archiveList archives with type="page" moduleId="1" limit="10" %}
    {% for item in archives %}
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description }}</p>
            <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </a>
    {% endfor %}
{% endarchiveList %}
  • Document details tag (archiveDetail):Used to display the detailed content of a single article or product. You can directly output the title, text, view count, and custom fields of the document.
    
<h1>{{% archiveDetail with name="Title" %}}</h1>
<div class="content">{{% archiveDetail with name="Content" lazy="data-src" %}|safe}}</div>
<span>浏览量：{{% archiveDetail with name="Views" %}}</span>
  • Previous document (prevArchive) And the next document (nextArchive):Convenient for users to switch content while reading details.