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

Managing website content in Anqi CMS, you will find that its built-in Django template engine syntax is an extremely powerful and flexible tool, which can help you efficiently convert background data into vivid and dynamic content on the frontend page.Master this grammar, and you will not only be able to display basic text and images, but also build complex, interactive dynamic pages, bringing vitality to your website.

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

Flexible display of website basic information

Firstly, we start with the most basic dynamic information on the website. Anqi CMS provides convenient tags to retrieve 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:<img src="{% system with name="SiteLogo" %}" alt="网站Logo" />.
• Contact Information：Display the company's contact phone number, address, email, and even WhatsApp or Facebook links,contactTags can be useful. For example, to display contact phone number:电话：{% contact with name="Cellphone" %}.
• Page TDK: The title (Title), keywords (Keywords), and description (Description) are crucial for the SEO optimization of each page,tdkTags can be dynamically generated. For example, setting the page's<title>Tags:<title>{% tdk with name="Title" siteName=true %}</title>.siteName=truewill also automatically include the website name suffix you set in the background.

These tags allow you to avoid hardcoding, with changes made in the background, the front-end updates immediately, greatly enhancing operational efficiency.

The core of dynamic content presentation: articles, products, and custom data

The core value of AnQi CMS lies in its flexible content model. Whether it's articles, products, or any custom content type you define, it can be easily displayed through template syntax.

• List display:

  • To display the latest article list,archiveListLabel combinationforLoop is your powerful assistant. For example, 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 %}
    

    HerearchivesIs the variable name you defined,itemis the object of the current article in each loop. You can accessitem.Link/item.Titlein this way to access various properties of the article.stampToDateIt is a practical filter that can format timestamps into readable dates.
  • Similarly,categoryListCan list categories,pageListList single pages,tagListList tags. They all follow a similar{% for item in collection %}cyclical pattern.

• Display on detail page:

  • 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 needs special processing because it may contain HTML tags, at which point you should use|safea 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 retrieved in a similar manner to categories and single-page details.
  • Navigation between partsIn the article detail page,prevArchiveandnextArchiveTags can conveniently generate links to the previous and next articles, enhancing the user's browsing experience.
  • Related documents:archiveListLabel collaborationtype="related"Parameters can intelligently display other articles related to the current article for you, which is very beneficial for SEO and user retention.

• Custom fields and filtering:

  • AnQi CMS allows you to add custom fields to content models. If you add fields such as "size", "color", and so on 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,archiveFiltersTags can dynamically generate filtering conditions on the list page,配合archiveListoftype="page"patterns, which can build powerful filtering functions, such as the 'area-type-price' filtering on real estate websites.

Optimize website structure and user experience

• Navigation menu:navListTags 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. By nestingforLoop, easily implement the dropdown menu effect.
• Breadcrumbs navigation:breadcrumbTags can automatically generate the hierarchical path of the current page, helping users understand their position in the website and improve navigation clarity.
• Pagination featureWhen the content list is long,paginationTags can intelligently generate pagination links, control the number of page numbers displayed, ensuring 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:

• includeTag: Extract the common parts such as headers, footers, sidebars into independent template fragments, and then reference them where needed to avoid repeated code. You can even use{% include "partial/header.html" %}in the places where it is needed, to avoid duplicate code. You can even usewithParameters pass specific variables to these segments.
• extendsTag: is used for template inheritance, you can create a basic layout (for example)base.html), defining the page skeleton and replaceable elements.blockArea. Then other pages only need{% extends 'base.html' %}and rewrite accordinglyblock, you can quickly build a page with a consistent style.
• macroTag: If some code blocks need to be used frequently and require parameters,macroTags are like functions in templates. Defined once, called multiple times, making the code more modular and readable.
• withwithsetTagThese two tags allow you to define temporary variables within the template, 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 pipeline symbol|Apply to