AnQiCMS as an efficient and flexible content management system provides a solid foundation for users in global content promotion, with its built-in multilingual support being the key to achieving this goal. Properly display language switch options on your website and configure for search engineshreflangAttributes, not only can greatly enhance the user experience, but also an important step for international SEO optimization.
I. Preparation: Enable the multilingual capability of AnQiCMS.
AnQiCMS itself has powerful multilingual support capabilities, allowing you to provide customized content for websites in different languages.To make full use of this feature, you first need to ensure that your system is ready to handle multiple languages.
In the AnQiCMS backend settings, you can find the 'Default Language Pack' option, which defines the current main language of the website.But to achieve a full display and switch of multilingual websites, more in-depth configuration usually involves front-end templates and content organization.
The AnQiCMS template system supports implementing multilingual content through a specific directory structure. For example, create under your template root directorylocalesFolder, and create a corresponding subfolder for each language inside it (such aszh-cn/en-us). Each language folder can containdefault.ymlfiles, used to store the frontend text translations for that language. This structure allows you to centrally manage the static text of the website interface, making it convenient for multilingual adaptation.
Second, display language switching options on the front-end page
Providing a user-friendly language switcher is the first step in enhancing the usability of a multilingual website. AnQiCMS features built-inlanguagesTags, which can easily generate such toggle options in front-end templates.
You can use the following code to display the language switcher in common positions such as the header, footer, or sidebar of the website:
{%- languages websites %}
{%- if websites %}
<div>
<span>切换语言：</span>
{%- for item in websites %}
<a href="{{item.Link}}">
{%- if item.LanguageIcon %}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
{%- else %}
{{item.LanguageEmoji}}
{% endif %}
{{item.LanguageName}}
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}
This code first retrieves the latest 5 articles by{% languages websites %}Label fetches all configured multi-language site information and stores it inwebsitesthe variable. Then, it will iterate overwebsiteseach of themitemRepresents a language version, and generate a link for each language.
EachitemContains several key properties:
item.LinkThis is the complete URL of the versioned language site, which will redirect the user to the corresponding language page when clicked.item.LanguageIconIf the background has uploaded an icon for this language, the icon will be displayed.item.LanguageEmojiIf no icon is uploaded but the language Emoji (such as 🇺🇸, 🇨🇳) is configured, the Emoji will be displayed.item.LanguageNameShow the name of the language (such as “Simplified Chinese”, “English”).
Through such design, you can choose to display language icons, Emoji, or directly show language names according to the overall style of the website, providing users with a clear switching entry.
Three, configure the hreflang attribute for search engines
hreflangAttributes are an important part of SEO optimization, telling search engines that your website has multiple language versions and that these versions are interlinked. Proper configurationhreflangIt can prevent search engines from treating content in different languages as duplicate and ensure that users see the page most suitable for their language and regional preferences when searching.
hreflangTags are usually placed in the HTML document's<head>area. In AnQiCMS, you can also use thelanguagestag to dynamically generate these attributes:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
This code also passes throughlanguagesLabel retrieves all language versions of the information and then generates one for each language version.<link>Label.
Here,item.LinkIt is still the URL of the page for that language version.item.LanguageIt provides the corresponding language code (e.g.,enRepresents English,zh-CNRepresents Simplified Chinese).base.htmlthe file<head>Place this code in your website template's part, to ensure that every page of the website correctly declares its multilingual versions.
Four, Flexible Application: Custom Multi-language Templates and Content
In addition to the language switcher,hreflangproperty configuration, AnQiCMS also provides deeper multi-language customization capabilities.
- Dynamic text translationYou can use this translation tag for some fixed text on the interface in the template file,
{% tr "您的位置" %}such as this.localesfolder.default.ymlFile, you can provide corresponding translated text for different language versions to achieve full localization of the interface. - Content independent managementAnQiCMS allows you to publish independent content for different languages.This means that your articles, products, single pages, etc. can all have their own language versions.In the background content management module, you can create and manage these multilingual content, ensuring that each language version provides high-quality and localized information.
By combining the above features, you can not only achieve a beautiful and practical language switching function on the AnQiCMS front page, but also effectively optimize the international SEO performance of the website, attracting global users.
Common Questions (FAQ)
How to add or manage different language versions in AnQiCMS backend?Answer: AnQiCMS supports Chinese and English language packages by default, you can set the default language in 'Background Settings' -> 'Global Function Settings'.If you need to create multilingual versions of content (such as articles, products), simply select the corresponding language when adding or editing the content.The multi-site management feature of AnQiCMS also allows you to set independent subdomains or directories for different language versions, achieving more refined multi-language site management.
My website currently only has one language version. Do I need to configure properties?
hreflangattributes?Answer: If your website currently has only one language version, then strictly speaking,hreflangThe attribute is not required. However, considering that the website may be expanded to support other languages in the future, it is advisable to reserve space in the template in advance.hreflangCode structure is a good habit. This way, when you add a new language version, you just need to configure the corresponding language URL and content in the backend, the front-endhreflangTags can automatically take effect, reducing the complexity of later modifications.Question: Where should I place the language switcher on the website?Answer: The placement of the language switcher should prioritize user convenience.通常，the top navigation bar (header) or footer of a website is the **location** to place the language switcher.For websites with a large amount of content, it can also be provided in the sidebar or pop-up menu to ensure that users can easily find and switch languages on any page.It is important to maintain its visibility and consistency.