How to use the Django template engine of Anqi CMS to create highly customized content display pages?

Today, with the increasing importance of digital content, how a website efficiently and beautifully presents its content is directly related to user experience and brand image.AnQiCMS (AnQiCMS) leverages its flexible and powerful Django template engine, providing endless possibilities for highly customized content display pages.This article will delve into how to utilize the core capability of Anqi CMS to create content display pages that meet business needs and are unique in craftsmanship.

The foundation of AnQi CMS template system

First, let's understand the working principle of AnQi CMS templates.The AnQi CMS adopts the Django template engine syntax loved by developers, making template writing both intuitive and powerful.

• Variable output:Using double curly braces{{ 变量名 }}To display data passed from the backend, for example, displaying the article title{{ archive.Title }}.
• Logical and control:Use single curly braces and percentages{% 标签 %}To implement complex logic such as conditional judgment, loop iteration, and introducing other templates, for example, conditional judgment{% if condition %}or loop list{% for item in list %}.

All template files are stored in the root directory/templateIn the folder. For easy management and theme switching, each independent template theme will have its own dedicated directory and include aconfig.jsonFiles are used to describe topic information. For static resources such as CSS, JavaScript, images, etc., they are placed in one place./public/static/Under the directory, it ensures clear resource management and efficient loading.

The template system of Anqi CMS also supports various organization modes, such as folder organization by function (such asindex/index.html/{模型table}/detail.html), can also be a more flattened file organization pattern (such asindex.html/{模型table}_detail.html)。It is more thoughtful that it allows us to define exclusive template files for specific document IDs, category IDs, or single page IDs, such as creating one for the "About Us" page.page/about.htmlThis provides convenience for achieving high customization.

Core customization tool: flexible and powerful template tags and filters

The powerful customization capabilities of AnQi CMS largely come from its rich built-in template tags and data filters. They are the bridge connecting backend data with frontend display.

1. Accurate content call: Various data tags

AnQi CMS provides detailed tags to obtain various content data from the website:

• Document content tags (archiveDetail/archiveList):This is the core of the website, which can be used to display detailed information pages of articles or products, or to display content lists on the homepage or category pages.It can not only call basic fields such as document ID, title, content, thumbnail, but also flexibly read various custom fields for different content models (such as article models, product models) on the background, such as product properties such as color, size, etc.moduleId/categoryId/flagWith parameters, it can easily filter out specific content sets such as 'Hot Articles', 'Latest Products', or 'Slide Recommendations.'
• Category page label (categoryDetail/categoryList):Used to display detailed information about categories or list the category list under a specified model. Whether it is creating hierarchical navigation or displaying subcategories under a large category, it is very proficient.
• Single page tab (pageDetail/pageList):For independent pages such as "About Us" and "Contact Us", these tabs can conveniently retrieve page content and configuration.
• Tab page tab (tagDetail/tagDataList):Used to display the details of a specific tag and the list of all documents associated with the tag, which helps to build a content association network.
• Content model tag (moduleDetail):At a deeper level, you can obtain meta information of the content model through model tags, which is very useful when building highly dynamic content displays.
• Global auxiliary tags: systemThe tag can retrieve the website name, Logo, filing number, and other global configurations;contactThe tag is used to display contact information;tdkThe tag can dynamically set the title, keywords, and description required for SEO on each page;navListThe tag is used to build multi-level website navigation;breadcrumbTags can generate clear page paths and enhance user navigation experience.

2. Logical control and data processing: structured tags and filters

In addition to content calls, the Anqi CMS template engine also provides powerful logic control capabilities:

• Conditional judgment and loop (if/for):Use{% if 条件 %}and{% for item in 列表 %}It can easily achieve conditional display of content and iteration of list data. For example, display different content based on whether the user is logged in, or loop to display multiple product images.forLoops also supportemptyClause, displays default content when the list is empty, as well asforloop.Counteretc., convenient for implementing numbering, odd and even row styles, etc.
• Variable definition (with/set): {% with 变量名="值" %}or{% set 变量名="值" %}It is convenient to define temporary variables in templates, avoiding repeated calculations or making the code more concise, especiallyincludevery useful when introducing public templates.
• time formatting (stampToDate):Easily convert timestamps to easily readable date or time formats to meet display needs in different scenarios
• Template reuse (include/extends/macro): {% extends "base.html" %}Can define the page skeleton and inherit to achieve unified global styles and layout;{% include "partial/header.html" %}Can split and reuse common modules (such as header, footer, sidebar); and{% macro %}It allows the definition of reusable code snippets (similar to functions),配合importCan be shared between different templates.

To further refine data, Anqi CMS also built-in richFilter (Filters)such as|safeUsed to safely output HTML content (such as article detail rich text);|truncatechars:100Used to truncate long text and add an ellipsis;|join:", "Used to concatenate array elements into a string;|add:10Used for simple addition of numbers;|loweror|upperUsed for text case conversion;|date:"2006-01-02"Used for date formatting;|floator|integerUsed for type conversion;|trimUsed to remove leading and trailing spaces or specified characters. These filters allow flexible and accurate processing of data before display.

Achieve highly customized paths

Understood these template features, we can then start to create highly customized content display pages.

1. Plan the content model, enrich the data source:In the background "Content Model", create or modify models according to your business needs and add various custom fields.For example, if you want to display real estate information, you can add custom fields such as 'house type', 'area', 'price', 'location', and so on to the 'real estate model', which will become the data foundation for the front-end page.
2. Build the page skeleton and implement modularization:UtilizeextendsTags, design a general for the website:base.htmlScaffold, define the header, footer, navigation, and other public areas, and use:{% block 名称 %}Mark the area that can be replaced.This way, all pages will share the basic layout and can flexibly fill in content in their own templates.includeLabel, extract it into an independent file and import as needed.
3. Refined content display, creating a unique style:
   • Customization of detail pages:Utilize in article or product detail pages,archiveDetailLabels, not only can display the main content of the article (through{{ archive.Content|safe }}), and can also be used in loops{% archiveParams params %}Dynamically display all custom fields, such as a detailed technical parameter list for a product. For the image carousel, you can use{{ archive.Images }}to get the image group andfordisplay in a loop.
   • Customization of the list page:applyarchiveListTags, combined withmoduleIdandcategoryIdParameters, can easily build 'news list', 'latest products', and so on. If your content model defines filterable parameters (such as 'real estate model' in 'area' and 'house type'), thenarchiveFiltersThe tag will shine, it can automatically generate filtering conditions, cooperatearchiveListImplement complex content filtering function. Don't forgetpaginationTags, it can automatically generate pagination links, ensuring smooth browsing of large amounts of content.
   • Customization of the homepage and special topic pages:The home page and special theme pages often require richer content combinations. You can use multiplearchiveListTags, combined withflagParameters such asflag="c"to indicate recommendations,flag="f"to indicate slides) to display content modules in different areas.categoryListIt can also be used to build a featured classification area.
4. Optimize user experience and SEO:
   • Page meta information:In each template's<head>section, using{% tdk with name="Title" %}/{% tdk with name="Keywords" %}/{% tdk with name="Description" %}tags, ensure that each page has accurate SEO meta information to improve search engine friendliness.
   • Navigation and Path:UsenavListBuild a clear main navigation and sidebar navigation usingbreadcrumbTags to generate breadcrumb navigation, helping users understand their current location and improve website usability.
   • URL Structure:Coordinating with the static rule configuration of the AnQi CMS backend, as well as the custom URL features for documents, categories, single pages, and tags in the template, it is possible to create URL structures that are more in line with SEO standards and user habits.
   • Responsive design:Leveraging the adaptive, code compatibility, and PC+mobile independent site features supported by Anqí CMS, responsive layouts or separate mobile-end templates (placed in the selected template type according to the selected template type)mobileDevelop under the directory) to ensure a good browsing experience on different devices.

By using the above method, you will be able to fully utilize the Django template engine of AnQi CMS, from data models to front-end display, creating a highly customized, feature-rich, and user-friendly content display page.

Frequently Asked Questions (FAQ)

Q1: How to create a new content type (such as "Real Estate Information") in Anqi CMS and display it on the front end?

A1:On the Anqi CMS backend, you can create a new content type through the 'Content Management' module's 'Content Model' feature.First, click 'Add New Model', define the model name (such as 'Real Estate'), table name, and URL alias.Then, you can add exclusive custom fields for the 'housing model', such as 'type' (drop-down selection), 'area' (numeric), 'price' (numeric), 'location' (single-line text), and so on.After creating the model, add categories for the "Property Model" in "Document Classification" and publish the "Property" content in "Document Management".