How to use the `LanguageIcon` field to switch interfaces in a multilingual site?

Make global visitors identify at a glance: Anqi CMS multilingual switching onLanguageIconThe skillful use of

In today's global internet environment, a website that can provide multilingual content undoubtedly has more competitiveness.AnQiCMS (AnQiCMS) is a content management system designed specifically for enterprises and content operation teams, fully aware of the importance of multilingual support.It not only allows you to post content in different languages, but also provides an intuitive and friendly language switching mechanism.LanguageIconThe field plays a crucial role, allowing your global visitors to quickly identify the target language among many options, greatly enhancing user experience.

How can one skillfully use the language switch interface of Anqi CMS in a multilingual site?LanguageIconWhat about the fields? Let's delve into it together.

languagesTag: Entry to obtain multilingual site information

The template engine of AnQi CMS provides powerful for developerslanguagesLabel, this is the unified entry point for obtaining information about all multi-language sites that have been configured.When you enable the multilingual feature in the background and add different language sites, this tag can help you dynamically display these language options on the front-end page.

UselanguagesThe tag is very direct, it does not require any additional parameters, and it will default return an array object containing detailed information of all multilingual sites. Usually, we will assign it to a variable, such aswebsitesThen proceedforLoop through this site information.

InlanguagesEach site looped by the tag (item) you will be able to access a series of key fields, including:

• LanguageName: The full name of a language, such as 'Simplified Chinese', 'English'.
• Language: The language code is usually used forhreflangAttribute or CSS class, such as “zh-CN”, “en-US”.
• Link: The link address of the language site, click to switch to the corresponding language version.
• LanguageEmoji: Emoji related to the language, such as national flag icons, for example🇨🇳/🇺🇸.
• LanguageIcon: The focus of this article, a URL pointing to a language-specific icon
• Name: The display name of the site
• Remark: Site remark information.
• Nofollow: Add to link whether.nofollowProperty.

Skillfully useLanguageIconBuild an intuitive language switcher

Now, let's reveal.LanguageIconThe specific application in the language switch interface.Imagine when users visit your website, they want to quickly find a language version they are familiar with.Text lists are effective, but a representative icon (such as a flag) can instantly capture the user's attention and greatly simplify the selection process.

The following is to implement the language switcher in Anqi CMS template and use it first.LanguageIconExample code snippet:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" class="language-option">
        {%- if item.LanguageIcon %} {# 优先判断是否存在自定义图标 #}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} 国旗图标" class="language-flag-icon" loading="lazy" />
        {%- else %} {# 如果没有自定义图标，则退回使用Emoji表情 #}
        <span class="language-flag-emoji">{{item.LanguageEmoji}}</span>
        {% endif %}
        <span class="language-name">{{item.LanguageName}}</span>
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

In this code, we first use{% languages websites %}Get information about all language sites. Then, through{% for item in websites %}Traverse each language option.

The key point is the conditional judgment.{%- if item.LanguageIcon %}. It intelligently detects whether the current language site is configuredLanguageIcon. If it exists, we use a<img>tag to display this exclusive icon, and fill throughitem.LanguageNamefillingaltProperties ensure accessibility and SEO-friendliness. This method allows users to quickly locate through visual symbols, such as seeing the Japanese flag and knowing it is the Japanese version.

IfLanguageIconNot set (for example, you may not have uploaded exclusive icons for all languages), the system will gracefully fallback to usingitem.LanguageEmojiTo display an Emoji, this ensures that even without uploading a custom icon, the language switcher can still provide visual cues to maintain consistency in the user experience. Finally,item.LanguageNameIt was textually confirmed in the form of language, providing double confirmation.

LanguageField: The intangible assistance of SEO optimization.

In addition to what the user can see.LanguageIcon,languagesTag provided.LanguageThe field is also crucial for a website's search engine optimization (SEO), especially on multilingual sites. It is often used forhreflangAttribute, inform the search engine of the corresponding relationship between different language versions of your website.

Place the following code snippet on your website<head>In the region, it can help search engines better understand the structure of your multilingual content:

{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}

Byhreflang="{{item.Language}}"You can tell search engines like Google that a page has versions in other languages or regions, thus avoiding duplicate content penalties and ensuring that users are directed to the page that is most suitable for their language and region.

Operation strategy and **practice

Reasonably utilize in practical operationLanguageIconNeed some planning. You can upload unique icons for each language site in the corresponding settings of AnQi CMS, such as the national flag of the corresponding country or a specific symbol representing the language.Choose clear, moderately sized, and style-unified icons, which will make your language switch interface look professional and easy to use.

At the same time, considering the performance of web pages, it is recommended to compress and optimize the loading strategy of icon images (such as usingloading="lazy"To ensure that the page loading speed is not slowed down by the icon.

Conclusion

Provided by Anqi CMSlanguagestags and theirLanguageIcon/LanguageEmojiandLanguagefield, you can easily build a beautiful and efficient multilingual switch interface. This not only greatly improves the user experience, but also helps standardizehreflangSet, to lay a solid foundation for your website's SEO performance globally.The Anqi CMS is committed to providing strong support for your content operations, allowing your website to stand out in the global market.

Frequently Asked Questions (FAQ)

Q1: Where can I configure my language site?LanguageIcon?A1:LanguageIconThe configuration is usually performed in the multilingual site management or global settings of AnQi CMS backend.When you create or edit a language site, the system will provide an option for you to upload or select an image file as the icon for the language.Please refer to the specific backend interface instructions of your AnQi CMS, or find the upload entry for the 'Language icon' or 'Flag icon' in the language settings module.

Q2: What if my site is not configured?LanguageIconvalue":"How will the language switch interface be displayed?A2: As shown in the example code in the article, if you have not configured a language site forLanguageIconthe system will intelligently revert to usingLanguageEmojifield. This means that the language option will still display an Emoji (usually a flag), and be paired withLanguageNameText. This design ensures that even without custom icons, the language switch function still has visual cues.

Q3:LanguageIconandLanguageEmojiWhat is the difference? How should I choose?A3:LanguageIconThis refers to the custom image icon you uploaded (for example.png/.webpformat of the national flag image), which provides greater design flexibility and brand consistency. AndLanguageEmojiAre system built-in Unicode emojis, usually flag emojis. The choice depends on your design needs: If you pursue highly customized visual effects and brand consistency, and are willing to invest time in designing and uploading icons, thenLanguageIconIs a better choice; If you want to deploy quickly, or prefer a concise inline style,LanguageEmojiit is more convenient and practical. Both can be used together,LanguageIconas the preferred choice,LanguageEmojias an elegant alternative solution.