As an experienced CMS website operation personnel in the security industry, I am well aware that building a user-friendly and powerful multilingual website is crucial for expanding the market.Auto CMS with its flexible multilingual support allows you to easily provide customized content experiences for visitors from different regions.Today, I will introduce how to elegantly configure a language switch link with icons or Emoji in your security CMS website navigation.
Preparation before deploying the language switch function
Add language switching functionality to your website navigation before ensuring that you have configured multiple language versions of the site in the AnQi CMS backend.The multi-site management function of AnQi CMS allows you to create independent sites for different language versions, and each site can set its own default language package and content.tag-/anqiapi-other/10537.htmlDocument mentionedLanguageName/LanguageEmoji/LanguageIconThese fields are defined in the configuration of these language sites. Once the multilingual site settings are completed, Secure CMS will be able to recognize and provide relevant information for these language sites.
Locate template file and integrate language switch tags
Language switch links are usually placed in 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/templatethe directory.partial/header.html/partial/footer.htmlorbash.htmlIn general template files. You can choose the template file that is most suitable for your website layout for editing.
Anqi CMS provides a speciallanguagesLabel, used to retrieve information about all configured multilingual sites.This tag requires no parameters, it will automatically retrieve and return an array object containing detailed information of all language sites.
Firstly, you need to use the template file in{% languages %}Label to get the list of language sites. For example, you can store the obtained data in a file namedwebsites.
{%- languages websites %}
{# 语言切换器将在此处渲染 #}
{%- endLanguages %}
Build language switch links with icons or Emoji
Get towebsitesAfter the array, you can use toforLoop through this array, generate a separate switch link for each language site. Inside the loop, you can useitem.LanguageIconShow preset language icons (such as a flag image), or useitem.LanguageEmojiShow the language corresponding Emoji expression.If both are configured, you can choose one based on your design preference, or provide a fallback mechanism (for example, display the icon first, and if the icon is not available, 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 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 the site link for each language version.item.LanguageIconProvide the URL for the language icon.item.LanguageEmojiProvide the Emoji character corresponding to the language.item.LanguageNameProvided the display name of the language (for example, "Simplified Chinese
You can design your website according to your own needs..language-switcher/.language-item/.language-link/.language-icon/.language-emojiand.language-nameAdd the corresponding CSS styles to maintain consistency with your website's overall style. For example, you can align them horizontally or display them in a dropdown menu.
Optimize user experience and SEO
In addition to visual aesthetics, the language switcher should also consider user experience and search engine optimization. To enhance the SEO effect, you can also include the website<head>some additionshreflangLabel. This helps search engines understand that your website has multiple language versions and provides the correct page for users in different language regions.
The followinghreflangSample code for the label, usually placed in yourpartial/header.htmlFile in<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">tag for each language site,hrefpoints to the URL of this language version,hreflangThe attribute specifies the language code (for exampleen-US/zh-CN)This is crucial for the globalization deployment of websites.
Through these steps, you can successfully configure a feature-rich language switch link with visual elements in the navigation of the Anqi CMS website, providing your multilingual users with a convenient browsing experience.
Common Questions and Answers (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 will have corresponding fields that allow you to upload icons or enter Emoji characters.Please check the 'Site Settings' or 'Multilingual Settings' modules to find these configuration options.
2. What should I do if the language switch link does not display or the style is confused?
Firstly, please make sure that your security CMS backend has been configured with at least two language sites, otherwise{% languages websites %}The label may not return any content. Next, check whether the template file you added the code to is correct andwebsitesVariable is being traversed correctly. If the style is chaotic, this is usually due to the lack of CSS styles. You need to provide the style for the code inlanguage-switcher/language-itemAdd custom CSS rules to the class name to control its layout and appearance.
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 have configured for each language site in the Anqi CMS backend.example.com，而英文站点可能使用 Englishen.example.comorexample.com/en/，具体取决于您的多站点设置。item.Link变量会动态生成这些正确的URL。