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 deeply explore 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 basics

In AnQiCMS templates, 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 when rendering the page.

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 contentContentsuch properties:<h2>{{ archive.Title }}</h2> <div>{{ archive.Content }}</div>

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

Dynamic Data Retrieval: The Power of Tags (Tags)

In addition to directly accessing some global variables, AnQiCMS provides rich "Tags" (Tags){% tag %}) To dynamically retrieve data from the database. These tags perform 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 for getting the configuration information of the entire website or the current site,system/contact/tdkThese tags, usually referred to as Title, Description, Keywords (TDK). They are usually specified by parameters to indicate the fields to be obtained.nameSpecify the fields to be retrieved by parameters:

• Website system settings: {% system with name="SiteName" %}It will display the website name you have configured in the "Global Settings" on the backend. 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 entered in the "Contact Information Settings" on the backend will be displayed.
• Page TDK: {% tdk with name="Title" %}Get the title of the current page. 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 get the detailed information of the current content.These tags will automatically identify 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 get the information of the specified document through.idortokenParameters to obtain information about the specified document.
• Category details: {% categoryDetail with name="Title" %}Display the name of the current category.{% categoryDetail with name="Description" %}Display the description of the category.
• Single page details: {% pageDetail with name="Content" %}Used to display content for single pages like "About Us".

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

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

When you use list tags to get data, 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 %}

Here are thearticlesis the one you pass througharchiveListThe set of articles obtained by label.articleThe variable for each article in the loop.

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

仅仅获取原始数据往往不够，我们还需要对数据进行格式化、截取或者转换。AnQiCMS提供了“过滤器”机制，通过在变量名后添加竖线||auto. And filter name, you can finely control the display of variables.

auto. 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 within it, displaying them as<p>内容</p>Instead of rendering the style.|safeFilter, tells the template engine that this content is safe and can be directly output as HTML:<div>{{ archive.Content|safe }}</div>

2. Format date and time:stampToDateAnQiCMS中存储的时间戳通常是10位数字。为了将其显示为人类可读的日期格式，您可以使用stampToDate函数：<span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span> <span>更新时间：{{ stampToDate(article.UpdatedTime, "2006-01-02 15:04:05") }}</span>请注意，日期格式字符串2006-01-02 15:04:05This is 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 abstract or a 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 a string.
• |length：获取字符串、数组或对象集合的长度。
• |join:", "：将数组元素用逗号和空格连接成一个字符串。

灵活的变量定义：withandsettags

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

• {% with ... %}:Used to define temporary, block-scoped variables in module blocks, often used with tags to pass parameters to the imported templates.includeCombined with tags, to pass parameters to the templates being imported.

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

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