How to customize the content display layout of the Anqi CMS homepage?

Your website's homepage is the first impression for visitors, as well as the window to show brand image and core content.How can this 'front door' be both aesthetically pleasing and efficient in conveying information, which is a concern for every website operator.AnQiCMS (AnQiCMS) is a content management system that emphasizes customization and flexibility, providing us with a very convenient way to freely create a dedicated home page layout.

To customize the Anqie CMS homepage content display layout, we mainly focus on its powerful template system and content tags.The core concept of system design is to allow users to easily present the backend data dynamically on the front-end page, while supporting highly flexible layout adjustments.

Deep understanding of the template file structure

The homepage layout of AnQi CMS, the core lies in its flexible and powerful template system. The presentation of all website pages cannot do without the location of/templatetemplate files in the directory. Usually, we will find the template folder we are currently using here, for exampledefault.

in your template folder,index/index.html(or under a flat structure,index.htmlIt is the entry file of the homepage. It is the place where the overall structure and content display logic of the homepage are defined.

The template syntax of AnqiCMS is similar to the Django template engine, it is very easy to get started. Data variables are defined using double curly braces.{{变量}}Print, while logical tags such as conditional judgment and loop control use single curly braces and percent signs.{% 标签 %}and require corresponding end tags, such as{% if 条件 %}...{% endif %}.

We usually useextendsandincludethese auxiliary tags.extendsTags allow us to inherit a basic template (such asbase.htmlThus, it can reuse common page headers, footers, sidebars, etc., to avoid rewriting code.includeTags can embed some small, reusable code snippets (such as news list modules, product display blocks) into the main template, making the code more modular, easier to manage and maintain.

Utilize the powerful tags of Anqi CMS to obtain content

It is not enough to have just a static HTML skeleton; we need to dynamically display the content of the backend management on the homepage.AnQi CMS provides a series of powerful template tags, which are like data movers, helping us to retrieve various types of content from the background and display them according to our layout requirements.

First, the basic information of the websiteis indispensable. We can usesystemTag to get the global settings information of the website, such as:

<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />

Next, the navigation menuIs an important element to guide visitors to browse the website.navListThe label can conveniently retrieve the menu items configured in the "navigation settings" of the background, support multi-level navigation, and allow us to easily build the main navigation or footer navigation of the website:

{% navList navs %}
<ul>
    {% for item in navs %}
        <li><a href="{{ item.Link }}">{{item.Title}}</a></li>
    {% endfor %}
</ul>
{% endnavList %}

For the visual focus on the homepage, such as the carousel,bannerListLabels can be put to use. It will retrieve the homepage Banner list configured in the background, allowing us to display attractive slides on the homepage:

{% bannerList banners %}
    {% for item in banners %}
        <a href="{{item.Link}}"><img src="{{item.Logo}}" alt="{{item.Alt}}" /></a>
    {% endfor %}
{% endbannerList %}

If the homepage needs to display articles or products under a specific category,categoryListandarchiveListTags are our powerful assistants. For example, we want to display the latest articles under the "News and Information

{# 展示文章模型下ID为1的分类（如新闻资讯）的最新10篇文章 #}
{% archiveList archives with moduleId="1" categoryId="1" limit="10" order="id desc" %}
    {% for item in archives %}
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description|truncatechars:100}}</p>
    {% endfor %}
{% endarchiveList %}

{# 展示产品模型下ID为2的分类（如热门产品）的图片列表 #}
{% archiveList products with moduleId="2" categoryId="2" limit="8" flag="c" %}
    {% for item in products %}
        <div><img src="{{item.Thumb}}" alt="{{item.Title}}" /><p>{{item.Title}}</p></div>
    {% endfor %}
{% endarchiveList %}

BymoduleIdSpecify content model (article or product),categoryIdSpecify categorylimitLimit the number of displayed itemsorderControl sorting method,flagWe can accurately control the display of various content on the homepage by filtering recommended attributes.

For static content such as 'About Us' or 'Contact Information'.If they exist in a single-page form,pageDetailthe tags can be directly retrieved and displayed. While if this information is configured through the background "Contact Information Settings", thencontactTags can help us retrieve the corresponding fields.

{# 展示ID为1的单页面内容，例如“关于我们” #}
{% pageDetail pageDetail with id="1" %}
    <h2>{{pageDetail.Title}}</h2>
    <p>{{pageDetail.Description}}</p>
{% endpageDetail %}

{# 展示联系电话 #}
<p>联系电话：{% contact with name="Cellphone" %}</p>

Further customization: content model and custom fields.

The "Flexible Content Model" of AnQi CMS is a core strength, allowing us to customize content models and fields according to business needs. This means that if the built-in article, product fields cannot meet your display requirements, you can create new fields (such as adding custom parameters like "material", "size" for products), and then use them in templates byarchiveParamsTags or go through directlyarchiveDetail with name="自定义字段名"In order to obtain and display this additional data. This is crucial for building highly specialized product display pages or rich service introduction modules.

At the same time, combiningifLogical judgment andforLooping through tags, we can implement more complex layout logic.For example, determine whether a certain area has content, and display it if it does, or hide it if it does not; or display different styles based on the data type.filters(Filters) can also format content during output, for exampletruncatecharsused to truncate text,safeused to safely output HTML content, making the presentation of the page more refined.

Back-end management is the foundation for front-end customization

Although we focus on the code level, do not forget that all of these front-end custom displays are inseparable from the detailed configuration of the background. In the Anqi CMS background management interface, the following areas are closely related to the customization of the home page content:

  • Backend Settings -> Global Function SettingsHere you can set the website name, Logo, record number, mobile end address, etc., this information will be called throughsystemtags on the front end.
  • Background settings -> Navigation settings: Manage the navigation menu structure of the website, which directly affectsnavListThe output of tags.
  • Content management -> Document classification & Content model & Document managementThis is the source of all dynamic articles and product content. Custom models and fields, creating categories, publishing documents, and more will be completed here, and byarchiveList/categoryListthese tags are retrieved.
  • **Page Resources -> Page Management