How to standardize the use of variables and control tags in AnQiCMS templates to ensure the correct display of content?

In AnQiCMS, the template is the core of website content display.No matter whether it is to build a corporate website or operate a content-rich blog, the correct display of content cannot be separated from the standardized use of variables and control tags in the template.Mastering these basic knowledge not only helps us customize the website interface flexibly, but also effectively avoids potential display errors, ensuring the stable and efficient operation of the website.

The template syntax design of AnQi CMS draws inspiration from the Django template engine, which focuses on distinguishing variable output and logical control. Variables are usually enclosed in double curly braces{{变量}}Perform definition and output, while logical operations such as conditional judgment and loop control use single curly braces and percentage signs{% 标签 %}Understanding this basic rule is the first step in our standardized use of templates.

The standardized use of variables: Accurately acquire and display data

In AnQiCMS templates, variables carry the dynamic data of the website, such as article titles, category names, system settings, etc. To ensure that the content is displayed correctly, we need to pay attention to the following aspects:

1. Understand the origin and context of variables:

   • Direct data field:When iterating through list data, such as{% for item in archives %},itemThe variable will contain multiple data fields of the current loop item, such as{{item.Title}}Used to display the article title,{{item.Link}}Used to display article links. Here, the variable nameitemfollowed by a point., followed by a field name (such asTitle/Link), this method is concise and efficient.
   • specific tag'snameparameters:Some labels, such assystem(System settings),contact(Contact information),archiveDetail(Document Details),categoryDetail(Category details) etc., allowing us toname="字段名称"get the value of a single specific field. For example,{% system with name="SiteName" %}The website name will be output directly. If we want to assign this value to a temporary variable for subsequent use, we can write it like this: {% system siteNameVar with name="SiteName" %}{{siteNameVar}}This approach provides great flexibility, especially when it comes to retrieving specific information.
   • Camel case naming convention and strict case sensitivity:AnQiCMS template variable names follow camel case naming conventions, for exampleitem.CreatedTimeInsteaditem.created_timeWhat's more, the template engine strictly distinguishes between variable names and tag names in terms of case sensitivity.{{item.Title}}and{{item.title}}It will be treated as a different variable, if the case does not match, it is likely to cause the content to not display or report an error.

2. Data structure and calling method:

   • Object properties:Most detail page data (such asarchiveDetailreturnedarchiveobjects) and list items (such asarchiveListin the loopitem) are objects, we can access their internal data by对象名.属性名.
   • Array/slice:List labels, such asarchiveList/categoryList) usually return a dataset and need to be paired with{% for ... %}Loop tags to process item by item. Some fields may also be image arrays, such asImagesfield, it also needs to be displayed through a loop.

The art of controlling labels: mastering template logic and structure

The control tag is the key to implementing logical judgment, loop, modularization, and code reuse in AnQiCMS templates.The correct use directly relates to the accuracy of page layout and data display.

1. Conditional judgment:if/elif/else/endifWhen we need to display or hide content based on specific conditions,ifThe tag is indispensable. It allows us to check if a variable exists, whether it is true, or if it is equal to a certain value, etc. For example, display the image only if it exists:{% if item.Thumb %}<img src="{{item.Thumb}}" alt="{{item.Title}}"/>{% endif %}This helps to avoid displaying empty image placeholders or page structure chaos caused by missing data.

2. Loop traversal:for/empty/endforFor displaying list data,forThe loop is the core. It iterates over each element in the collection and allows us to access the current element within the loop body. A commonly used auxiliary tag isemptywhen the collection is empty,emptyThe content within the tags will be displayed. This is very useful for handling situations such as "No content", improving user experience. In addition,forloop.CounterBuilt-in variables can help us control the sequence number or specific style in the loop.

3. Variable assignment and scope:with/set withTags are used to define temporary variables within specific blocks of a template, these variables are only valid within{% with %}and{% endwith %}. This helps to avoid name conflicts and maintain code clarity. For example:{% with tempTitle = item.Title|upper %}{{tempTitle}}{% endwith %}HoweversetTags can be declared at any position in the current template, and their scope is usually larger, until the template rendering is complete.

4. Template reuse and inheritance:include/extends/macro

   • include:Used to introduce content from other template files, which is the most direct way to achieve modular layout. For example, the header and footer can be extracted as independent files and then used in each page.{% include "partial/header.html" %}.includeIt can also be done throughwithPass parameters, even usingif_existsTo avoid errors caused by templates that do not exist.
   • extends:To implement template inheritance, define a basic skeleton (such asbase.html), other pages through{% extends 'base.html' %}Inherit and overwrite the definedblockblock. This is crucial for maintaining consistency in the overall style of the website, improving development efficiency, and reducing maintenance costs.
   • macro:Functions similar to programming language functions, which can define reusable code blocks in templates and pass data through parameters. Macros can be defined in separate files, throughimportIntroduce. It provides a more advanced code reuse mechanism, especially suitable for generating repetitive HTML structures with slightly different parameters.

Use filters wisely: for fine data processing

Filters are a powerful tool in AnQiCMS templates for converting and formatting variable values, used|The symbols connect variables and filters. They ensure that data is displayed in the format we expect, further enhancing the accuracy and aesthetics of the content.

1. Safe output:|safeWhen a variable contains HTML code (such as the content generated by a rich text editor), if it is output directly, the template engine may escape it to plain text for security reasons. At this time, we need to use|safeThe filter tells the engine that this content is safe and can be rendered directly as HTML. For example:{{archive.Content|safe}}Remember, abuse.|safeMay introduce XSS risk, use only where HTML rendering is truly needed.

2. Time formatting:stampToDateTimestamps obtained from the database are usually hard to read.stampToDateLabels can convert timestamps into human-friendly date and time formats.For example: `{{stampToDate(item.CreatedTime, "20"}]}