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

As an experienced website operations expert, I am well-versed in the powerful functions and essence of content operations of Anqi CMS, and I am very happy to delve into it for youcategoryListLabel calling method in the mobile and PC templates of the Anqi CMS, as well as how to use its features to achieve efficient and user-friendly content presentation.

Today, with the increasing importance of content marketing and user experience, the performance of websites on different devices is crucial.autoCMS knows this well, as is evident from its project advantages and core functions. It provides various website modes such as 'adaptive, code adaptation, PC+mobile independent site' to meet the needs of different operation strategies.categoryListThe application in different device templates provides a good foundation.

Overview of the Anqi CMS template mechanism: the cornerstone of device adaptation.

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

  1. Adaptive Mode (Responsive Design)In this mode, the PC and mobile ends share the same template file.All style and layout adjustments are made through CSS media queries (Media Queries) and JavaScript to adapt to different screen sizes.categoryListThe label needs to be called only once in a template file, and then the display effect on different devices is controlled by front-end technology.

  2. Code Adaptation Mode (Adaptive Design)：In this mode, AnqiCMS will dynamically load different template files based on the type of device accessing (PC or mobile). The core is that you need to create a file namedmobileThe subdirectory. When mobile users visit, the system will first look formobilethe corresponding template file in the directory to render the page.

  3. PC+Mobile independent site modeThis is the most thorough separation plan, which allows different domain names to be bound for PC and mobile end, and to load completely independent template files. Similar to the code adaptation mode, the mobile end template is still stored inmobileIn the catalog, but with stronger independence, it can be customized for more specific content and function design.

It is not difficult to see that whether it is code adaptation or the PC+Mobile independent site mode,mobileDirectoryThis is the key to achieving independent templates for mobile devices. 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 placed in the normal template directory for PC, and the other placed inmobileThe directory for mobile usage.

categoryListThe core function of tags and unified calling method.

categoryListLabels are an important tool in Aiqi CMS for obtaining category list data. Their essence lies in providing a unified and powerful data acquisition interface, regardless of the device mode your website is running in.The syntax of the label's call 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 variable name you define, used to store the obtained category list data.withThe parameter is used to specify the conditions for data retrieval:.

  • moduleIdSpecify the category list of the content model to be retrieved (for example, article model ID is 1, product model ID is 2).
  • parentId：Specify the parent category ID."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 categories 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 obtain data from, usually no manual entry is required.

categoryListThe label itself does not contain any parameters related to the device type (such as PC, mobile).It is responsible for querying and returning categorized data from the database based on the conditions you provide.itemField (such asTitle/Link/Logo/Thumbetc.) is also unified, not differing due to the device

in the mobile and PC templatecategoryListsimilarities and differences in calls, as well as **practice**

SincecategoryListThe syntax for the label call is uniform, then where are the differences and **practice reflected when it is used on mobile and PC templates?

核心相同点：统一的数据层与标签逻辑

无论您是在PC端模板（/template/your_template/list.html）中调用categoryList，还是在移动端模板（/template/your_template/mobile/list.html）中调用，其Label syntax, parameter passing methods, and accessibleitemfields are all consistentThis means that you do not have to learn two different label usages for different devices, which greatly simplifies the development and maintenance work.categoryListThe essence lies in providing a unified data access interface, separating data logic from display logic.

Main differences: different presentation layers and layout strategies

The core of the difference lies inEnglish CMS will load different template files according to the device type. When the system detects a mobile device access, it will prioritize to gomobileLooking for the corresponding template file in the directory to render the page. This allows you to have different layouts and styles in various template files.categoryListThe data obtained, design completely different layouts and styles:

  1. Layout and style completely reconstructedIn 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 fast loading on small screens.LogoLarge image, while only displayed on mobileThumbThumbnail or only displayTitle.

  2. Fine control of data volumeAlthoughcategoryListThe device parameters are not available, but since it is a different template file, you can set a smaller value on the mobile template.limitSet a smaller value for the parameters, such as:

    • 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 concise category list and reduce scrolling.

  3. Differentiation in interaction methods: Mobile templates can be optimized for touch screen operationscategoryListThe interaction, such as support for sliding, accordion folding, etc., while the PC side may focus more on mouse hover effects.

**Practical suggestion:**

  • Unified data source, diverse displayThis is the core idea of using the independent template of AnQi CMS.categoryListIt is responsible for providing data, and the template is responsible for presenting it according to the characteristics of the device.
  • Maintain consistent core logicIn PC and mobile templates, try to makecategoryListofmoduleId