How to use Django template engine syntax to efficiently display various dynamic content in AnQiCMS?

In the AnQi CMS, managing website content, you will find that its built-in Django template engine syntax is an extremely powerful and flexible tool, which can help you efficiently convert backend data into vivid and dynamic content on the front-end page.Master this grammar, and you can not only display basic text and images, but also build complex, highly interactive dynamic pages, making your website full of vitality.

The template syntax design of AnQi CMS is very intuitive, it draws on the characteristics of the Django template engine and integrates the concise and efficient features of Go language. You will mainly encounter two core elements: used to output variables{{ 双花括号 }}and used for controlling logic{% 单花括号加百分号 %}Understanding both is the first step to effectively using the security CMS template.

Flexible display of basic website information

Firstly, we start with the most basic dynamic information on the website. The Anqi CMS provides convenient tags to access global configuration and contact information:

• Website global settingsDo you want to display the website name, Logo, filing number, or copyright information at any location on the website?systemTags can be easily implemented. For example, to display the website name in the page title, you can write it like this:<title>{% system with name="SiteName" %}</title>. The image address of the website logo is needed,<img src="{% system with name="SiteLogo" %}" alt="网站Logo" />.
• Contact information：To display the company's contact phone number, address, email, and even WhatsApp or Facebook links,contacttags can be useful. For example, show the contact phone number:电话：{% contact with name="Cellphone" %}.
• Page TDKFor each page, the SEO optimization is crucial for the title (Title), keywords (Keywords), and description (Description).tdkTags can be dynamically generated. For example, setting the page<title>Tags:<title>{% tdk with name="Title" siteName=true %}</title>,“ here is thesiteName=truewill also automatically include the site name suffix you set in the background.

These tags allow you to avoid hardcoding, so when the backend changes, the frontend updates instantly, greatly enhancing operational efficiency.

Core content presentation: articles, products, and custom data

The core value of AnQi CMS lies in its flexible content model. Whether it is articles, products, or any content type you customize, it can be easily displayed with template syntax.

• List Display:

  • To display the latest article list,archiveListTag combinationforLoops are your powerful assistant. For example, to get the latest 10 articles under a specified category:

    
    {% archiveList archives with type="list" categoryId="1" limit="10" %}
        {% for item in archives %}
        <li>
            <a href="{{item.Link}}">{{item.Title}}</a>
            <p>{{item.Description}}</p>
            <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </li>
        {% endfor %}
    {% endarchiveList %}
    

    Here are thearchivesis the variable name you define,itemIt is the object of the current article in each loop. You can access various properties of the article.item.Link/item.TitleIn this way, you can access various properties of the article.stampToDateIt is a practical filter that can format timestamps into readable dates.
  • Similarly,categoryListCan list categories,pageListList single page,tagListList tags. They all follow a similar{% for item in collection %}cyclical pattern.

• Detail page display:

  • When the user clicks on an article in the list to enter the detail page,archiveDetailthe tags will automatically retrieve and display detailed content based on the article ID of the current page. To display the article title, simply<h1>{% archiveDetail with name="Title" %}</h1>. Article content usually requires special processing, as it may contain HTML tags, at which point it needs to be handled appropriately|safeby a filter to ensure that HTML is parsed correctly and not displayed as plain text.

    
    <div>
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>
    

  • categoryDetailandpageDetailTags are also obtained in a similar way for categories and single-page details.
  • Navigation between parts: In the article detail page,prevArchiveandnextArchiveTags can conveniently generate links to the previous and next articles, enhancing the user's browsing experience.
  • Related documents:archiveListlabel combined withtype="related"Parameters can intelligently display related articles to the current article, which is very beneficial for SEO and user retention.

• Custom fields and filtering:

  • The Auto CMS allows you to add custom fields to content models. If you add fields such as "size", "color", to the product model,archiveParamsTags can help you dynamically retrieve and display these custom parameters.
  • For more advanced requirements, such as filtering content based on multiple custom parameters,archiveFiltersThe label can dynamically generate filtering conditions on the list page,配合archiveListoftype="page"Pattern, which can build powerful filtering functions, such as the 'district-type-price' filtering on real estate websites.

Optimize website structure and user experience

• Navigation Menu:navListLabels are a powerful tool for building multi-level navigation menus. You can flexibly display the top, side, or bottom navigation of the website according to the navigation categories set in the background. Through nestingforLoop, easily implement the dropdown menu effect.
• Breadcrumbs navigation:breadcrumbTags can automatically generate the hierarchy path of the current page, helping users understand their position in the website and enhance navigation clarity.
• Pagination featureWhen the content list is long,paginationTags can intelligently generate pagination links, control the number of page numbers displayed, and ensure page loading speed and user-friendliness.

Enhance the reusability and maintainability of templates

The reusability of templates is the key to efficient development. Anqi CMS provides several powerful mechanisms:

• includetags：Extract common parts such as headers, footers, and sidebars into independent template fragments, then refer to them at the required locations to avoid repeated code. You can even{% include "partial/header.html" %}reference them in the places where needed to avoid repeated code. You can evenwithParameters pass specific variables to these fragments.
• extendstags: is used for template inheritance, you can create a basic layout (such asbase.html), defining the page skeleton and replaceableblockArea. Then other pages only{% extends 'base.html' %}and rewrite the correspondingblock, you can quickly build a page with a consistent style.
• macrotags: If some code blocks need to be used frequently and need to accept parameters,macroTags are like functions in templates. Define once, call multiple times, making the code more modular and readable.
• withWithsettagsThese two tags allow you to define temporary variables within templates, used to store calculation results or simplify complex expressions, making the template logic clearer.

Deep Data Processing: The Magic of Filters

Filters are the 'data processors' in the template, through the pipe symbol|Apply to