AnQiCMS (AnQiCMS) is an efficient and customizable content management system, with its powerful template engine as the core of diversified website display.The template engine adopted by the system is highly similar to Django's syntax rules, which allows users familiar with web development to get started faster, even beginners can gradually master the skills of template writing through the guidance of this article.

Mastering the writing of AnQiCMS templates requires understanding its basic syntax structure and file organization, then delving into various functional tags and filters, and finally being able to flexibly present data on the website front-end.

Familiar with the core syntax of template engines

AnQiCMS template language mainly interacts with dynamic data and logic through two tags: variable output and logical control.

1. Variable output: double curly braces{{ }}When you need to display data from the backend on the page, such as article titles, category names, system settings, etc., you will use double curly braces{{ }}. For example, to display the title of a document, you would write{{archive.Title}}. Here,archiveis a variable name,TitleIt is an attribute of the variable. Variable names in AnQiCMS usually follow camelCase notation, starting with an uppercase letter, for examplearchive.Id/category.Link.

2. Logical control: single curly braces and percentage signs{% %}This part is used to implement complex logic such as conditional judgment, loop traversal, and including other template files in the template. Unlike variable output, logic control tags need to appear in pairs, that is,{% 标签名 %}Following{% end标签名 %}For example, a simple conditional judgment:{% if archive.Id == 10 %} 这是文档ID为10的文档 {% endif %}.

3. Comment:{# #}and{% comment %}To maintain the clarity and maintainability of template code, you can use comments to explain the code. Single-line comments use{# 这是单行注释 #}and multi-line comments use{% comment %} 这里可以写多行注释 {% endcomment %}These comments are not output to the final HTML when rendering the page.

4. Encoding and file extensionsAll template files are with.htmlSuffix, and use UTF-8 encoding uniformly. If the encoding is incorrect, the page may appear garbled.

Organization and conventions of template files

AnQiCMS has a set of conventions for the storage location and naming of template files, which helps the system automatically identify and apply the correct template.

1. Template root directory and configurationAll templates are stored in/templatethe directory. Each independent template set needs to have its own subdirectory in this directory, and the subdirectory must contain aconfig.jsonFile. This file describes the template name, version, author, type (adaptive, code adaptation, PC+mobile end), and other basic information.

2. Storage of static resourcesThe CSS styles, JavaScript scripts, images, and other static resources used in the template should be stored separately in/public/static/the directory for unified system management and optimization.

3. Common Template File NamingAnQiCMS supports two file organization modes: folder organization and flat organization. Regardless of which one you choose, the system pre-sets some default template names, and if you create these files, the system will automatically apply them based on the context:

  • Home: index/index.htmlorindex.html
  • Model Home: {模型table}/index.htmlor{模型table}_index.html(For example)article/index.htmlFor article model home)
  • Document detail page: {模型table}/detail.htmlor{模型table}_detail.html
  • Document list page: {模型table}/list.htmlor{模型table}_list.html
  • Single page detail page: page/detail.htmlorpage.html
  • Error page: errors/404.htmlorerrors_404.htmlIn addition, you can create custom templates for documents, categories, or single pages with specific IDs, such asarticle/detail-10.htmlWill be used specifically for the article detail page with ID 10, orpage/about.htmlUsed for the single page of "About Us".

4. Mobile templateIf your website needs to provide a separate template for mobile devices, you can create it in the template root directorymobile/Subdirectory. The directory structure and file naming of the mobile template are consistent with the PC side, and the system will automatically select the corresponding template according to the access device.

Flexible application of core function tags

AnQiCMS provides rich built-in tags for retrieving and displaying various data. These tags are usually used in the form{% 标签名 参数 %}and{% end标签名 %}end.

1. System and General Information

  • systemTag: Get website name{{system.SiteName}}, Website Logo{{system.SiteLogo}}, Record number{{system.SiteIcp}}And global settings.
  • contactTag: Call contact{{contact.UserName}}Phone{{contact.Cellphone}}Address{{contact.Address}}Contact information.
  • tdkTag: Used to output the current page's SEO title<title>{% tdk with name="Title" siteName=true %}</title>Keywords and description.

2. Content structure and list

  • categoryListLabel: Get the category list of articles or products. You can specifymoduleIdto get the category under a specific model, orparentIdTo get the sub-categories. For example, get all the top-level categories under the article model:
    
{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endcategoryList %}
  • archiveListTags: used to get the document list, supports categorizationcategoryId, ModelmoduleId, Recommended propertiesflag, Sortingorder, Display QuantitylimitWith multiple condition filtering. It can also be used to retrieve related documentstype="related"Or to implement search functionalityq="关键词".
    
{% archiveList articles with categoryId="1" limit="5" order="views desc" %}
    {% for item in articles %}
        <li><a href="{{item.Link}}">{{item.Title}}</a><span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span></li>
    {% endfor %}
{% endarchiveList %}
  • pageListTag: Get all single page lists, commonly used to build footer navigation or sidebar links.

3. Display details page data

  • archiveDetailTags: Used on the document detail page to get the current document ID{{archive.Id}}, headings{{archive.Title}}、Content{{archive.Content|safe}}、Thumbnail{{archive.Thumb}}etc.|safeThe filter is very important here, it ensures that HTML content is parsed correctly rather than being escaped.
  • categoryDetailTag: Get the details of the current category, such as the category title{{category.Title}}Description,{{category.Description}}.
  • pageDetailLabel: Get detailed content of the current single page, such as the title of the single page{{page.Title}}、Content{{page.Content|safe}}.

4. Navigation and breadcrumbs

  • navListLabel: Build the navigation menu of the website, supporting multi-level navigation and custom navigation categories.
  • breadcrumbLabel: Automatically generate breadcrumb navigation from the current page to the homepage, improving user experience and SEO.

5. Pagination function

  • paginationLabel: WitharchiveListUsed together