Building a global website on AnQiCMS, allowing content to be presented in multiple languages to users worldwide, has become the only way for many enterprises to expand into the international market.Navigation menus serve as the first threshold for user interaction with a website, and their smooth switching and precise adaptation in multilingual environments are undoubtedly the key to improving user experience and optimizing SEO performance.Today, let's delve into how to cleverly implement the language switching and adaptation of navigation menus in the AnQiCMS multilingual site.
The foundation of AnQiCMS for multilingual: Tailor-made for global users
AnQiCMS is a system that deeply understands the needs of enterprise-level content management, and its 'multilingual support' function is one of the core advantages for building an internationalized website.It is not just a simple translation of content, but also about providing a mechanism that allows the structure, URL, and even navigation of a website to seamlessly adapt to the habits of users in different languages.
In the AnQiCMS backend settings, we can easily configure the "default language package", which lays the foundation for the entire website's language base.It is also worth mentioning that AnQiCMS's powerful "multi-site management" feature also provides flexible deployment options for multilingual sites.We can manage each language as an independent site, for example, deploying the English site onen.yourdomain.comDeployed on the Chinese sitecn.yourdomain.comIn this mode, each language site can have its own domain, content, and even customized templates, thus achieving more refined operation and management.This architecture naturally supports the independent configuration and management of navigation menus, allowing each language's navigation to be fully independent and adapted to its content system.
Flexible construction of multilingual navigation menus:navListIntelligent application of
AnQiCMS provides a powerful template tag system, wherenavListLabels are the tools to build navigation menus. To achieve accurate adaptation of navigation menus in multilingual sites, you first need to make detailed configurations in the AnQiCMS backend.
Generally, under the "Background Settings" and in the "Navigation Settings" area, we manage navigation links based on different navigation categories (such as top main navigation, footer navigation, etc.).In a multilingual, multi-site AnQiCMS environment, this means that each language site will have its own independent navigation settings.For example, on the English site backend, we will configure the corresponding English menu items and links for "Main Navigation";In the background of the Chinese site, the Chinese menu items and links are configured for the main navigation.
In the template file, we usenavListtags to dynamically render these menus. For example:
{% navList navs with typeId=1 %} {# typeId=1 通常代表主导航 #}
<ul>
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 如果有子菜单 #}
<dl>
{%- for inner in item.NavList %}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
ThisnavListThe label will automatically read and display the navigation menu configured under the current site context (i.e., the language site being accessed).item.TitleWill display the navigation name corresponding to the language configured in the background, anditem.LinkThis will point to the correct language version of the page link. This mechanism ensures that whether it is an English site or a Chinese site, the main navigation will display content in the respective language and link correctly to the corresponding page.
Implement a language switcher:languagesA seamless bridge for tags
It is not enough to have navigation in each language, users also need a intuitive and convenient switcher to freely switch between different language versions. AnQiCMS provides this for users.languagesThe label acts as a seamless bridge between different language sites.
languagesThe tag can retrieve all the multi-language site information configured under the current AnQiCMS instance, including their language names, language codes, and even the Emoji or icon links used to beautify the interface.This allows us to very conveniently build a language switch dropdown menu or icon list in the template.
We usually place the language switcher in a prominent position on the page, such as the upper right corner of the header or the footer. Here is an example of a typical language switcher implementation:
{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
<span>切换语言：</span>
{%- for item in websites %}
<a href="{{item.Link}}" {% if item.Language == system.Language %}class="current-lang"{% endif %}>
{%- if item.LanguageIcon %} {# 如果有自定义语言图标 #}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
{%- else %} {# 否则使用Emoji #}
{{item.LanguageEmoji}}
{% endif %}
{{item.LanguageName}}
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}
In this example,websitesThe variable contains data from all language sites. We traversewebsitesto create a link for each language site.item.LinkThe field is particularly important, as it directly points to the link corresponding to the current language version, ensuring that users can immediately jump to the translation page of the same content after switching languages, rather than returning to the homepage.system.LanguageIt can be used to determine the currently active language, making it convenient to add special styles to the current language.
To further optimize the SEO performance of multilingual websites, AnQiCMS also supports throughlanguagestag generationhreflangProperty.hreflangThe tag can tell search engines that your website has multiple language versions, and these versions are interlinked, thus avoiding duplicate content issues and guiding search engines to display the correct language version of the page. We usually place it on the page.<head>Area:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
In this way, we not only provide users with a convenient language switching function, but also provide clear guidance for search engines, greatly enhancing the internationalization competitiveness of the website.
The fusion and practice in the template: creating a smooth user experience
Effectively integrating multilingual navigation menus and language switchers in the template is crucial for ensuring a smooth user experience.
Imagine, the user visits your English site, the navigation menu clearly displays options such as 'Home', 'Products', 'About Us', and so on.When the user clicks the 'Chinese' switch at the top right corner of the page, the page will immediately jump to the corresponding Chinese site, at this time the navigation menu will also automatically change to 'Home', 'Products', 'About Us', etc. in Chinese, and the content will also change to Chinese.The process was natural and smooth, with no abruptness.
In actual operation, we need to ensure:
- Uniform template structure:Although the content and language are different, the basic template structure of each language site should be consistent, which can ensure the stability of page layout when switching languages, and reduce the cost of users learning.