As an experienced CMS website operation personnel in an information security company, I know that building a user-friendly and powerful multilingual website is crucial for expanding the market.AnQi CMS with its flexible multilingual support allows you to easily provide customized content experiences for visitors from different regions.Today, I will give you a detailed introduction on how to elegantly configure a language switch link with icons or Emojis in your Anqing CMS website navigation.
Preparation before deploying the language switch feature
Before adding language switching functionality to your website navigation, make sure you have already configured multiple language versions of the site in the Anqi CMS backend.The AnQi CMS multi-site management feature allows you to create independent sites for different language versions, each site can set its own default language package and content.tag-/anqiapi-other/10537.htmlMentioned in the document.LanguageName/LanguageEmoji/LanguageIconThe fields, which are defined in the language site configurations, are exactly these. Once the multi-language site settings are completed, Anqi CMS will be able to identify and provide relevant information for these language sites.
Locate the template file and integrate language switching tags
Language switch links are usually placed in prominent positions such as the header navigation, sidebar, or footer of a website, ensuring that users can switch languages at any time conveniently. In Anqi CMS, the code for these common areas is usually located/templateUnder the directorypartial/header.html/partial/footer.htmlorbash.htmlIn general template files. You can choose the template file that is most suitable for your website layout to edit.
Anqi CMS provides a speciallanguagesThe tag used to retrieve information about all configured multilingual sites.This tag does not require any parameters, it will automatically retrieve and return an array object containing detailed information of all language sites.
Firstly, you need to use it in the template file.{% languages %}Label to get the list of language sites. For example, you can store the obtained data in an array namedwebsites.
{%- languages websites %}
{# 语言切换器将在此处渲染 #}
{%- endLanguages %}
Build a language switch link with icons or Emoji
obtaining towebsitesAfter the array, you can useforLoop through this array to generate an independent switch link for each language site. Within the loop, you can useitem.LanguageIconDisplay a preset language icon (such as a flag image), or useitem.LanguageEmojiTo display language corresponding Emoji. If both are configured, you can choose one according to your design preference, or provide a fallback mechanism (for example, prioritize displaying the icon, and if the icon does not exist, display the Emoji).
The following is an example of code to create a language switcher in navigation, which will display the language icon first, and if the icon does not exist, it will display an Emoji along with the language name:
{%- languages websites %}
{%- if websites %} {# 仅当存在多个语言站点时才显示切换器 #}
<div class="language-switcher">
<span>切换语言：</span>
<ul>
{%- for item in websites %}
<li class="language-item">
<a href="{{ item.Link }}" class="language-link">
{%- if item.LanguageIcon %}
<img src="{{ item.LanguageIcon }}" alt="{{ item.LanguageName }}" class="language-icon" />
{%- else %}
<span class="language-emoji">{{ item.LanguageEmoji }}</span>
{% endif %}
<span class="language-name">{{ item.LanguageName }}</span>
</a>
</li>
{%- endfor %}
</ul>
</div>
{%- endif %}
{%- endLanguages %}
In this code block:
item.LinkProvide links to each language version of the site.item.LanguageIconProvided the URL for the language icon.item.LanguageEmojiProvided the Emoji character corresponding to the language.item.LanguageNameProvided the display name of the language (for example, "Simplified Chinese", "English").
You can customize the display for your website design..language-switcher/.language-item/.language-link/.language-icon/.language-emojiand.language-nameAdd the corresponding CSS styles to keep them consistent with the overall style of your website. For example, you can align them horizontally or display them in a dropdown menu.
Improve user experience and SEO
In addition to visual beauty, the language switcher should also consider user experience and search engine optimization. To enhance SEO effects, you can also include on the website's<head>Partially addhreflangLabel. This helps search engines understand that your website has multiple language versions and provides the correct pages for users in different language regions.
The followinghreflangExample code for the label, usually placed in yourpartial/header.htmlIn the file<head>Area:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{ item.Link }}" hreflang="{{ item.Language }}">
{%- endfor %}
{%- endLanguages %}
This code will generate a tag for each language version<link rel="alternate">wherehrefURL pointing to the language version,hreflangThe attribute specifies the language code (for exampleen-US/zh-CN). This is crucial for global deployment of websites.
By following these steps, you can successfully configure a feature-rich and visually elements-based language switch link in the Anqi CMS website navigation, providing your multilingual users with a convenient browsing experience.
Frequently Asked Questions (FAQ)
1. Where did I configure it in the background?LanguageIconandLanguageEmoji?
LanguageIconandLanguageEmojiIt is configured when you create or edit a language site through the multi-site management feature of the Anqi CMS backend.Each language site has a corresponding field that allows you to upload icons or input Emoji characters.Check the "Site Settings" or "Multi-language Settings" modules to find these configuration options.
2. What should I do if the language switch link does not display or the style is chaotic?
First, make sure that your security CMS backend is configured with at least two language sites, otherwise{% languages websites %}The label may not return any content. Secondly, check whether the template file you added is correct and whetherwebsitesWhether the variable is traversed correctly. If the style is chaotic, it is usually due to the lack of CSS styles. You need to add styles to the code inlanguage-switcher/language-itemAdd custom CSS rules to the class name to control its layout and appearance.
3. Will the structure of my page URL change after adding the language switcher?
Yes, when you click the language switch link, the page will jump to the URL of the corresponding language site.These URL structures are generated based on the domain or path rules you configure for each language site in the Anqi CMS backend.For example, if you have Chinese and English sites, the Chinese site may useexample.comand the English site may useen.example.comorexample.com/en/which depends on your multi-site settings.item.LinkVariables will dynamically generate these correct URLs.