How to define and use variables in AnQiCMS templates to display dynamic content?

When building a website, we all hope that the content can change flexibly according to different pages and different data, rather than unchanging static text.AnQiCMS with its high-performance architecture based on the Go language and flexible Django-like template engine, provides us with powerful dynamic content display capabilities.The core of all this, cannot be separated from the definition and use of 'variables'.

Master how to define and use variables in AnQiCMS templates, just like you've unlocked the key to dynamic vitality on your website.This is not just a technical operation, but also a key step to achieve content marketing, SEO optimization, and user experience enhancement.

Core: Basic definition and usage of variables

AnQiCMS's template syntax is concise and intuitive, it follows a style similar to the Django template engine. The most direct way is to use double curly braces{{ 变量名 }}To display dynamic content. When the system renders the page, it will look for the variable names within these braces and replace them with the actual data.

Variable naming usually follows camelCase, for examplearchive.Idorarchive.Title. Here,archiveusually represents the articles, products and other content entities loaded on the current page, andIdandTitleare the properties of the entity.

Get data from system built-in tags

AnQiCMS has preset a large number of template tags for us, which implicitly inject data from the background configuration or database into the template environment when called, allowing us to use it in the form of variables.

1. Global site and contact information:If you want to display the company name, phone number, filing number, and other global information at any location on the website, you can usesystemandcontacttags. For example, to display the website name:{% system siteName with name="SiteName" %}{{ siteName }}. Here,systemThe label obtained the system configuration named “SiteName” and assigned it tositeNamevariable, then we use{{ siteName }}Display it. Similarly, to display the contact number, you can do it like this:{% contact cellphone with name="Cellphone" %}{{ cellphone }}.

2. Page-specific information (TDK):The page title (Title), keywords (Keywords), and description (Description) are crucial for SEO.tdkTags can dynamically retrieve this information. For example, in<title>The tag displays the page title:<title>{% tdk with name="Title" siteName=true %}</title>. Here,siteName=trueIt means that the website name will be automatically added to the page title, enhancing brand recognition.

3. Content detail page:When we visit a specific article or product page, the main content of the page is the most typical dynamic information.archiveDetailThe tag is used to retrieve detailed data of the current document, which can be accessed directly byarchive.属性名in the form of, for example{{ archive.Title }}It will display the title of the article,{{ archive.Content }}The article content will be displayed. For example, on an article detail page, we can display the content like this:

   <h1>{{ archive.Title }}</h1>
   <div>
       发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}
       阅读量：{{ archive.Views }}
   </div>
   <div class="article-content">
       {{ archive.Content|safe }}
   </div>
   

   Herearchive.Title/archive.CreatedTimeandarchive.ViewsThey are all directly usable variables.archive.Contentthe following|safeIt is a filter that tells the template engine that this content is safe HTML, does not need to be escaped, thereby ensuring that formatted content in rich text editors is displayed correctly.

Define and use variables in a loop

Websites often need to display list data, such as article lists, product lists, and so on.forLoop tags are a powerful tool for handling such dynamic content, they assign the data of the current item to a temporary variable during each iteration.

For example, display a list of articles:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description|truncatechars:100 }}</p>
            <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </a>
    </li>
    {% empty %}
    <li>目前还没有任何文章。</li>
    {% endfor %}
{% endarchiveList %}

In this example,archivesIsarchiveListThe article collection obtained by the tag,{% for item in archives %}The statement makesitemThe current article object in each loop. We can access the properties of each article throughitem.Link/item.Titleand so on to access the properties of each article.item.Description|truncatechars:100Demonstrates how to usetruncatecharsFilter to extract description content, prevent it from being too long.

Advanced: Create and operate variables within the template.

In addition to obtaining data from built-in tags, we can also declare and operate variables directly in the template, which brings greater flexibility to template design.

UsewithTags define temporary variables.

{% with ... %}Tags allow you to define temporary variables within a local scope, which are only valid between the start and end of the tag. This is useful when you need towithspecify certain blocks or sections.includePassing parameters to template fragments is very convenient.

{% with headerTitle="我的博客首页" headerKeywords="技术,分享,CMS" %}
    <head>
        <title>{{ headerTitle }}</title>
        <meta name="keywords" content="{{ headerKeywords }}">
    </head>
{% endwith %}

here,headerTitleandheaderKeywordsonlywithAvailable within tags. If we pass them to a commonheader.htmlTemplate, it can be written like this:{% include "partial/header.html" with title=headerTitle keywords=headerKeywords %}

UsesetTags declare more flexible variables

{% set ... %}The tag provides broader variable declaration capabilities. It defines variables that are available in the current template file, not just limited to a block, which is very useful for performing some calculations or storing intermediate results.

`twig {% set greeting = "Welcome to the AnQiCMS world!" %}

{{ greeting }}

{#