Building a global website with AnQiCMS, allowing content to be presented in multiple languages to users around the world, has become the necessary path for many enterprises to expand into the international market.While the navigation menu is the first threshold for users to interact with a website, its smooth switching and precise adaptation in a multilingual environment are undoubtedly key to enhancing user experience and optimizing SEO performance.Today, let's delve into how to cleverly implement the language switching and adaptation of navigation menus in AnQiCMS multilingual sites.
AnQiCMS's multilingual foundation: Tailor-made for global users
AnQiCMS as a system deeply understanding the needs of enterprise-level content management, its 'multilingual support' feature is one of the core advantages for building an internationalized website.It is not just about translating content; it is more about providing a mechanism that allows the structure, URL, and even navigation of the 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 language foundation for the entire website.It is particularly worth mentioning that AnQiCMS' powerful "Multi-site Management" feature also provides flexible deployment options for multilingual sites.en.yourdomain.comChinese site deployed incn.yourdomain.com
Flexible construction of multilingual navigation menus:navListWisdom application of
AnQiCMS provides a powerful template tag system, wherenavListTags are the tools to build navigation menus. To achieve precise adaptation in multilingual sites, it is necessary to make detailed configurations in the AnQiCMS backend first.
Usually, under the "Navigation Settings" area in the "Background Settings", we manage navigation links based on different navigation categories (such as top main navigation, footer navigation, etc.).This means that each language site will have its own independent navigation settings in a multi-language, multi-site AnQiCMS environment.For example, on the English site's backend, we will configure the corresponding English menu items and links for 'Main Navigation'; while on the Chinese site's backend, we will configure Chinese menu items and links for '主导航'.
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 %}
ThisnavListTags will be automatically read and displayed according to the current site context (i.e., the current language site being visited), showing the navigation menu configured under that site.item.TitleIt will display the navigation name corresponding to the configured language in the background.item.LinkThe link will point to the correct language version of the page.This mechanism ensures that whether it is an English site or a Chinese site, the main navigation will display content in their respective languages and correctly link to the corresponding pages.
Implement the language switcher:languagesA seamless bridge for tags
Not enough to have navigation in each language, users also need a intuitive and convenient switcher to freely switch between different language versions. AnQiCMS provideslanguagesTags, it acts as a seamless bridge between sites in different languages.
languagesTags 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 for beautifying the interface.This allows us to very conveniently build a language switch dropdown menu or icon list in templates.
Generally, we would place the language switcher in a prominent position on the page, such as the top 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 crucial as it directly points to the link corresponding to the current page in the language version, ensuring that users can immediately jump to the translated page of the same content after switching languages, rather than returning to the homepage.system.LanguageIt can be used to judge the currently active language, making it convenient to add special styles for the current language.
To further optimize the SEO performance of multilingual websites, AnQiCMS also supportslanguagesTag Generationhreflangproperties.hreflangTags can tell search engines that your website has multiple language versions and that these versions are interconnected, 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's<head>area:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
This way, we not only provide users with a convenient language switching function, but also offer clear guidance to search engines, greatly enhancing the international competitiveness of the website.
Fusion and Practice in Templates: Crafting a Smooth User Experience
Effectively integrating multilingual navigation menus and language switches within the template is crucial for ensuring a smooth user experience.
In actual operation, we need to ensure:
- Unified template structure:Even though 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, reducing the cost of user learning.