Certainly, as an experienced website operation expert, I am willing to deeply analyze the ability of AnQiCMS in the differentiation of navigation menu display and transform it into an article that is easy to understand and practical.

The mystery of PC/moblie terminal differentiated display of AnQi CMS navigation menu

In the era of multi-screen interconnection, users visit websites with a variety of device types.No matter the wide screen on the PC end or the compact interface on the mobile end, users expect to have a smooth and intuitive browsing experience.Among them, the navigation menu acts as a 'guidepost' for the website's content, and its design and presentation are particularly crucial.So, for the efficient and flexible AnQiCMS, can it support displaying different navigation structures according to the device type (PC/Mobile)?The answer is affirmative, and AnQi CMS provides various strategies to achieve this goal, allowing your website to have an excellent navigation experience on different devices.

Why do we need a differentiated navigation structure?

First, let's briefly understand why we need a differentiated navigation structure.PC端通常拥有更大的screen space，can accommodate more complex，hierarchical navigation menus，and even quickly access deep content through multi-level dropdown menus.While mobile devices are limited by screen size, long or overly complex navigation can cause visual confusion and inconvenience.Therefore, mobile navigation often requires a more concise, flat design, or uses drawer-style, bottom navigation bars, etc., which are more in line with touchscreen operation habits.

AnQi CMS is well-versed in this and provides powerful feature support, allowing website operators to provide customized navigation experiences for different devices according to their actual needs.

Strategy one: Independent site mode, a complete separation of PC and mobile terminal

The 'Multi-site Management' function of AnQi CMS provides the most thorough solution for differentiated navigation -PC + Mobile independent site mode.

In this mode, you can set up two separate sites for PC and mobile (usually through different domain names or subdomains, such aswww.yourdomain.comandm.yourdomain.comEach site can have its own template, content display logic, of course, including a completely independent backend navigation menu configuration.

How to achieve this?

  1. Global feature settings:In the Anqi CMS backend "Global Function Settings", you can find the "Mobile End Address" option. Here you can enter your exclusive mobile domain name.
  2. Multi-site management:Utilize the "Multi-site Management" feature to easily create and manage these two independent sites.The PC site and mobile site each have independent backends, can configure their own navigation menus (in "Site Navigation Settings"), and can even load different template themes.
  3. Templates and Navigation:Choose and configure a template suitable for the device type of each site.For example, the PC site uses a PC template and configures the detailed PC navigation structure in its "website navigation settings"; the mobile site uses a mobile template and configures a simple mobile navigation in its "website navigation settings".When the user accesses through a mobile device, the system will automatically redirect to the mobile end address according to the settings and display the corresponding navigation.

Advantage:This approach provides ultimate flexibility and control, allowing you to design completely different user experiences for PC and mobile, including content layout, functional modules, of course, as well as navigation structure.Consider:The management cost is relatively high, and you may need to maintain some settings in two independent backends.

Strategy two: Code adaptation mode, differentiated navigation categories under a single site.

If you want to manage all content under a secure CMS instance but also want to achieve differentiated navigation structures for PC and mobile endpoints, thenCode Adaptation ModeThe combination of AnQi CMS' 'Navigation Category Management' feature is the ideal choice.

AnQi CMS supports setting different template directories for the PC and mobile ends of the same website (for example, the main template is intemplate/yourtheme/, the mobile template is intemplate/yourtheme/mobile/. On this basis, you can use the "website navigation settings" in the background to create multiple sets of navigation.

How to achieve this?

  1. Template structure:Ensure your template supports code adaptation mode, specifically intemplateThere is a directorydefaultDirectory (PC template) andmobileDirectory (mobile template). The system will automatically load the corresponding template based on the user\'s access device.
  2. Create Navigation Category:In the Anqi CMS backend's 'Website Navigation Settings', in addition to the default 'Main Navigation', you can click on 'Navigation Category Management' to add a new navigation category, for example, named 'Mobile End Main Navigation'.
  3. Configure different navigation:
    • In the 'Website Navigation Settings', configure rich navigation items and levels required for the PC end of the 'Main Navigation'.
    • Switch to the "Mobile主导航" category, configure a simplified navigation item suitable for mobile devices, such as only a level 1 menu or links to core functions.
  4. Template call:This is a critical step. In the PC template (for exampledefault/partial/header.htmlordefault/bash.htmlUse it innavListLabel calls PC navigation:
    
{% navList pcNavs with typeId="您的PC主导航ID" %}
    {# 在这里渲染PC端导航结构 #}
{% endnavList %}
    And in the mobile template (for examplemobile/partial/header.htmlormobile/bash.html), call mobile navigation:
    
{% navList mobileNavs with typeId="您的移动端主导航ID" %}
    {# 在这里渲染移动端导航结构，可以设计成抽屉式或底部固定导航 #}
{% endnavList %}
    Please note,typeIdIt is the ID assigned by the system when you create navigation categories in the background, or you can checkhelp-setting-nav.mdthe 'Navigation Category Management' section to learn how to obtain or customize category IDs.

Advantage:All content and part of the settings are centrally managed, which reduces the burden of content maintenance. By coordinating with template and navigation categories, it can flexibly control the differences in navigation structure between PC and mobile endpoints.Consider:A certain template development ability is required, manually modify the template file to adapt to differenttypeId.

Strategy three: Visual optimization under adaptive mode (non-structural differences)

Although the adaptive mode itself does not change the navigation of thestructureThat is the menu item and its hierarchy, but it is the foundation for a good mobile experience.In this mode, websites usually use responsive design, a set of HTML code, adapted to different screen sizes through CSS media queries and JavaScript.

How to achieve this?

  1. single template:The website only uses one adaptive template.
  2. CSS and JS optimization:Hide or display some navigation items through CSS media queries, or change the navigation layout (for example, horizontal menu on PC, folded into a hamburger menu on mobile).Advantage:The development and maintenance cost is the lowest, a single codebase, deployed once.Consider:Cannot truly achieveStructurallyThe differentiation, if the navigation items on the PC端 are too many or the hierarchy is too deep, the visual adaptation on the mobile end may still seem bulky.

Summary of implementation points

No matter which strategy you choose, you need to operate in conjunction with the 'Website Navigation Settings' of the Anq CMS backend.

  • Create Navigation Category:This is the basis for realizing structural differentiation. Create navigation categories for PC and mobile terminals in the "website navigation settings" and configure their menu items separately.
  • Get the navigation category ID:Call in the templatenavListWhen using the tag, you need to pass the navigation categorytypeId. After creating the navigation category in the background, you can find the corresponding ID or customize its identifier.
  • Modify the template file:According to your website architecture (whether a single template or PC/mobile independent template), in the correspondingheader.htmlorbash.htmletc. public header files, use thetypeIdThe parameter'snavListtag to render different navigation structures.
  • Test and optimize:Thoroughly test on different devices after deployment,