Is there a difference or best practice in the calling method of `categoryList` between mobile template and PC template?

As an experienced website operation expert, I deeply understand the powerful functions and essence of content operation of Anqi CMS, and I am very happy to analyze it in depth for youcategoryListThe tag's calling method in the mobile and PC templates of Anqi CMS, as well as how to utilize its features to achieve efficient and user-friendly content presentation.

On a day when content marketing and user experience are increasingly important, the performance of a website on different devices is crucial.AnQi CMS knows this, as can be seen from its project advantages and core functions, it provides various website modes such as "adaptive, code adaptation, PC+mobile independent sites", aiming to meet the needs of different operation strategies.This explores for uscategoryListThe application in different device templates provides a good foundation.

AnQi CMS template mechanism overview: the foundation of understanding device adaptation.

Further incategoryListBefore making the specific call, we must first have a clear understanding of AnqiCMS's template mechanism. AnqiCMS supports various device adaptation schemes, which directly affects the loading logic of template files:

  1. Responsive Design (Adaptive Mode): In this mode, the PC and mobile ends share the same set of template files.All style and layout adjustments are implemented through CSS media queries and JavaScript to adapt to different screen sizes.This means, yourcategoryListThe tag needs to be called once in a template file, and then controlled on different devices through front-end technology.

  2. Code Adaptation Mode (Adaptive Design)：In this mode, AnqiCMS dynamically loads different template files based on the type of device accessing (PC or mobile). The core of it is that you need to create a file named in the template root directory.mobilethe subdirectory. When mobile users visit, the system will prioritize searchingmobilefor the corresponding template file under the directory to render the page.

  3. PC + Mobile independent site modeThis is the most thorough separation scheme, which allows different domain names to be bound for PC and mobile terminals, and to load completely independent template files. Similar to the code adaptation mode, the mobile terminal template is still stored inmobileIn the catalog, but it has a stronger independence, and can be customized more in terms of content and function design.

It is not difficult to see that, whether it is code adaptation or PC+Mobile independent site mode,mobileTable of contentsAll are the key to achieve the independence of mobile template. This means that for these two modes, you can create two different template files for the same page (such as the category list page): one set in the normal template directory for PC, and the other set inmobileUsed for mobile on the directory.

categoryListThe core function of the tag and unified calling method.

categoryListTags are an important tool in AnQi CMS used to obtain category list data. Its design essence lies in providing a unified and powerful data acquisition interface, regardless of the device mode your website is running in, itsThe calling syntax of the tags is completely consistent..

categoryListThe basic usage method is as follows:

{% categoryList categories with moduleId="1" parentId="0" limit="10" %}
    {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            <p>{{ item.Description }}</p>
            {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />{% endif %}
            {# 更多item字段，如item.Id, item.ParentId, item.HasChildren等 #}
        </li>
    {% endfor %}
{% endcategoryList %}

Here, categoriesIs the custom variable name you use to store the classified list data obtained.withParameters are used to specify the conditions for data retrieval:

  • moduleId: Specify the category list of the content model to be retrieved (for example, article model ID 1, product model ID 2).
  • parentId: Specify the parent category ID. Set to"0"Means to get the top-level category; set to"parent"Means to get the sibling category of the current category; if not set, the default is to get the child category of the current category.
  • limit: Limit the number of categories returned, which can control how many categories are displayed at one time.
  • siteId: In the multi-site management scenario, specify which site to retrieve data from, usually no manual entry is required.

categoryListThe tag itself does not contain any parameters related to the device type (such as PC, mobile end).It is responsible for querying and returning categorized data based on the conditions you provide.It returnsitemFields (such asTitle/Link/Logo/Thumbare also unified, not differing according to the device.

Templates in mobile and PC endcategoryListThe same and different practices called ****

SincecategoryListThe tag's syntax is unified, then where do the differences and **practice manifest when the mobile and PC templates use it?

Core point: unified data layer and tag logic

No matter if you are calling it in the PC template/template/your_template/list.htmlCalling incategoryListor in the mobile template/template/your_template/mobile/list.html} itsTag syntax, parameter passing methods, and accessibility are all consistentitemFields are all consistentThis means that you do not have to learn two different label usages for different devices, which greatly simplifies development and maintenance work.categoryListThe essence lies in providing a unified data acquisition interface, separating data logic from display logic.

The main difference: different presentation layers and layout strategies

The core of the difference lies inThe Anqi CMS will load different template files according to the device type. When the system detects a mobile device visit, it will prioritize to gomobileFind the corresponding template file under the directory to render the page. This allows you to design different layouts and styles according to thecategoryListdata obtained, with different layouts and styles:

  1. The layout and style have been completely rebuilt: On the PC template, you may use complex grid layouts, large image displays, and rich interactive effects to display categories.In the mobile template, you can simplify it to a single-column list, small images, or even plain text links to ensure clarity and quick loading on small screens.For example, the PC side may display categories.LogoLarge image, while the mobile end only displaysThumbThumbnail or only displayTitle.

  2. Fine control of data volume: AlthoughcategoryListThe device itself does not have any parameters, but since it is a different template file, you can set a smaller value for the parameters in the mobile template.limitFor example, set a smaller value for the parameters:

    • PC template (list.html):{% categoryList categories with moduleId="1" parentId="0" limit="20" %}
    • Mobile template (mobile/list.html):{% categoryList categories with moduleId="1" parentId="0" limit="8" %}So, mobile users can see a more streamlined category list, reducing scrolling.

  3. Differentiation of interaction methods: Mobile templates can be optimized for touchscreen operationscategoryListInteractive, for example, supporting sliding, accordion folding, etc., while the PC end may focus more on mouse hover effects.

**Practical suggestions:

  • Unified data source, diverse displayThis is the core idea of using Anqi CMS independent template.categoryListResponsible for providing data, while the template is responsible for presenting according to the characteristics of the device.
  • Maintain consistent core logic.In PC and mobile templates, try to letcategoryListofmoduleId