How to display variables in AnQiCMS templates?

In AnQiCMS templates, how to effectively display variable data is a core skill that every website operator and template creator needs to master.AnQiCMS uses a syntax similar to the Django template engine, making data calls and display both intuitive and flexible.This article will delve into various ways to display variables in AnQiCMS templates, helping you accurately present dynamic information such as background configuration data and article content on the website front end.

Core Concept: Double Curly Braces{{ }}With variable base

In the AnQiCMS template, the most basic way to display any dynamic data is to use double curly braces{{ 变量名 }}. This is an intuitive syntax, the template engine will automatically replace the variables within the double curly braces with actual data.

For example, if you want to display the name of the website in a template, it may be defined as a variableSiteNameYou can call it like this:<h1>{{ SiteName }}</h1>

If a variable is an object containing multiple properties (such as an article, a category), you can use a dot.to access its internal properties. For example, a document object usually has a titleTitleand contentContentproperties:<h2>{{ archive.Title }}</h2> <div>{{ archive.Content }}</div>

It should be noted that variable naming in AnQiCMS usually follows the camel case naming convention, that is, the first letter of each word is capitalized (for exampleSiteName,CreatedTime)

Dynamically retrieve data: The power of tags (Tags)

In addition to directly accessing some global variables, AnQiCMS provides rich \{% tag %}) to dynamically retrieve data from the database. These tags execute specific logic, and assign the retrieved data to variables in the template for further display.

1. Get global or site-level information:AnQiCMS provides some tags to retrieve the configuration information of the entire website or the current site, such assystem/contact/tdk(TDK refers to Title, Description, Keywords). These tags are usually specified throughnameParameters specify the fields to be retrieved:

• Website system settings: {% system with name="SiteName" %}It will display the website name you have configured in the background “Global Settings”. Similarly,{% system with name="SiteLogo" %}It will return the image address of the website logo.
• Contact Information: {% contact with name="Cellphone" %}The contact phone number you filled in the background "Contact Settings" will be displayed.
• Page TDK: {% tdk with name="Title" %}Retrieve the current page title. When you need to combine the website title with the website name, you can use{% tdk with name="Title" siteName=true %}.

2. Get content details:When you are on the article detail page, category detail page, or single page, you can directly use the corresponding detail tag to obtain detailed information about the current content.These tags will automatically recognize the context of the current page.

• Document details: {% archiveDetail with name="Title" %}It will display the title of the current article. Similarly,{% archiveDetail with name="Content" %}The article content will be displayed. You can also use parametersidortokento obtain information about a specified document.
• Category details: {% categoryDetail with name="Title" %}to display the name of the current category,{% categoryDetail with name="Description" %}and display the description of the category.
• Single page details: {% pageDetail with name="Content" %}Content for displaying "About Us" type of single-page.

3. Get content list:For scenarios that require displaying multiple data (such as article lists, product lists, category navigation), you need to use list tags and combine{% for %}Loop tags to iterate and display each item of data.

• Document list: {% archiveList archives with type="list" categoryId="1" limit="10" %}Will get 10 articles under the specified category. In the loop, you can{{ item.Title }}access the title of each article.
• Category list: {% categoryList categories with moduleId="1" parentId="0" %}Will retrieve all top-level categories under the article model. You can use it in a loop.{{ item.Title }}and{{ item.Link }}To build the navigation.

When you retrieve data using list tags, you usually organize the code like this:

{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
        <p>{{ article.Description }}</p>
        <span>发布时间：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
    {% empty %}
        <p>暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

HerearticlesIs the one you get througharchiveListThe article set obtained by the tag,articleIt is the variable for each article in the loop.

Fine control: Use filters (Filters) to optimize variable display.

It is often not enough to simply obtain raw data; we also need to format, truncate, or convert the data. AnQiCMS provides a "filter" mechanism, by adding a vertical bar after the variable name|With the filter name, you can finely control the display of variables.

1. Process HTML content:|safeWhen you enter rich text (such as article content) in the background editor that contains HTML tags, if you output it directly{{ archive.Content }}To ensure safety, the template engine may escape HTML tags and display them as<p>内容</p>instead of the rendered style. In this case, you need to use|safeA filter that tells the template engine that this content is safe and can be output directly as HTML:<div>{{ archive.Content|safe }}</div>

2. Format dates and times:stampToDateThe timestamp stored in AnQiCMS is usually a 10-digit number. To display it in a human-readable date format, you can usestampToDateFunction:<span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span> <span>更新时间：{{ stampToDate(article.UpdatedTime, "2006-01-02 15:04:05") }}</span>Please note the date format string2006-01-02 15:04:05Is a Go-specific reference time format, used to represent year, month, day, hour, minute, and second.

3. Extract text:|truncatecharsor|truncatewordsWhen you need to display an article summary or brief description, you can use the truncation filter to limit the number of characters or words, and it will automatically add an ellipsis at the end:{{ item.Description|truncatechars:100 }}(Truncated to the first 100 characters){{ item.Description|truncatewords:20 }}(Extract the first 20 words)

4. Other common filters:

• |lower/|upper: Convert a string to lowercase/uppercase.
• |add:数字: Add a specified number to the variable.
• |replace:"旧词,新词": Replace specific content in the string.
• |lengthGet the length of a string, array, or object collection.
• |join:", "Join array elements into a string with commas and spaces.

Flexible variable definition:withandsetTag

Sometimes, you may need to define some temporary variables within the template to make the code clearer or to avoid repeated calculations. AnQiCMS provideswithandsetto achieve this purpose.

• {% with ... %}:Used to define temporary, block-scoped variables in template blocks, often combined withincludetags to pass parameters to the imported template.

  
  {% with pageTitle="我的自定义页面标题", pageKeywords="关键字1,关键字2" %}
      {% include "partial/header.html" with title=pageTitle keywords=pageKeywords only %}
  {% endwith %}
  

• {% set ... %}:Used to define within the current template