AnQiCMS如何设置并显示多语言切换链接？

📅 👁️ 92

在全球化日益盛行的今天，网站多语言支持已成为拓展国际市场、服务多元用户群体的关键。AnQiCMS 充分考虑了这一需求，提供了灵活的多语言设置和切换功能，让网站能够轻松地为不同语言的用户提供本地化的内容体验。本文将详细介绍如何在 AnQiCMS 中设置并显示多语言切换链接，并探讨相关的实践策略。

一、理解 AnQiCMS 的多语言机制

在 AnQiCMS 中，多语言功能通常与多站点管理紧密结合。这意味着，如果您的网站需要提供完全独立的、内容也各不相同的多语言版本，最常见且推荐的做法是为每种语言设置一个独立的站点。AnQiCMS 的核心优势之一就是支持“多站点管理”，允许您在同一套系统下，轻松创建和维护多个语言站点。每个站点可以拥有自己的域名（或子域名/子目录）、独立的语言包和对应语言的内容。

当我们需要在网站前端提供“多语言切换链接”时，这些链接实际上会引导用户访问您的不同语言版本的站点。

二、后台配置：为多语言网站打下基础

要实现多语言切换，首先需要在后台进行相应的配置。这主要涉及到两方面：系统语言包的设置，以及多语言站点的创建。

设置默认语言包（针对后台界面和系统提示） 进入 AnQiCMS 后台，在左侧导航栏找到“后台设置”，点击“全局设置”。在这里，您会看到“默认语言包”选项。您可以选择“中文”、“英文”或其他已支持的语言。这个设置主要影响 AnQiCMS 后台的管理界面语言以及网站中由系统自动生成的提示信息。它并不会自动翻译您发布的文章、产品等动态内容。
创建多语言站点（针对前端内容） 这是实现前端多语言内容展示和切换的关键步骤。如果您需要一个独立的英文网站来展示英文内容，您需要在 AnQiCMS 后台的“多站点管理”中创建一个新的站点。
- 在后台左侧菜单中找到“多站点管理”，然后点击“添加新站点”。
- 在新站点创建页面，您可以填写诸如“站点名称”（如：AnQiCMS English Site）、“站点根目录”、“网站地址”（如：en.yourdomain.com 或 www.yourdomain.com/en/）等信息。
- 重要的是，您可以为这个新站点选择不同的“默认语言包”，并配置其独立的数据库（或复用主站的数据库但使用不同的表前缀，以实现数据隔离）。
- 完成站点创建后，您就拥有了一个独立的英文版本站点，您可以在此站点下发布专属的英文文章、产品等内容。对于其他语言版本，也依此方法创建。

通过这种方式，您为每种语言创建了一个逻辑上独立的“空间”，它们通过独立的域名或路径来访问，并承载各自语言的内容。

三、前端展示：如何显示多语言切换链接

一旦后台的多语言站点结构搭建完成，接下来就是在网站的前端模板中添加多语言切换的链接。AnQiCMS 提供了一个非常便捷的模板标签 languages 来实现这一点。

使用 languages 标签获取语言站点列表

languages 标签能够获取所有已配置的多语言站点信息。您可以在网站的公共部分，例如页头（header.html）或页脚（footer.html），使用这个标签来生成语言切换器。
```
{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" class="lang-item">
        {%- if item.LanguageIcon %} {# 如果后台配置了语言图标，则显示图标 #}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} Flag" class="lang-flag" />
        {%- else %} {# 否则显示 Emoji 或语言名称 #}
        {{item.LanguageEmoji}} {# 显示语言的 Emoji 符号，如 🇨🇳 #}
        {% endif %}
        {{item.LanguageName}} {# 显示语言名称，如 中文 #}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}
```
- websites 是一个数组对象，包含了每个语言站点的详细信息。
- item.Link：这是最重要的属性，它会生成指向该语言站点的完整 URL。
- item.LanguageName：语言的显示名称（如“中文”、“English”）。
- item.LanguageEmoji：语言对应的 Emoji 符号（如 🇨🇳、🇬🇧），可以增加视觉效果。
- item.LanguageIcon：如果后台为语言配置了图标，这里会输出图标的 URL。
这段代码会循环遍历所有已配置的语言站点，并为每个站点生成一个链接，用户点击即可跳转到对应的语言版本网站。
为 SEO 优化配置 Hreflang 标签

为了更好地指导搜索引擎理解您网站的不同语言版本，并将其展示给正确的用户，建议在网站的 <head> 部分添加 hreflang 标签。这对于提升国际化 SEO 至关重要。

您可以将以下代码放置在您的模板文件（通常是 bash.html 或 header.html）的 <head> 区域：
```
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}
```
- hreflang="{{item.Language}}" 会输出正确的语言代码（如 zh-cn、en），帮助搜索引擎区分不同语言的页面。

四、内容翻译：超越界面层面的多语言

虽然 languages 标签提供了站点间的切换链接，但实际的内容翻译仍然需要您手动管理。

翻译模板中的静态字符串 对于模板中固定的文本，例如导航菜单项、版权声明、“联系我们”按钮等，您可以使用 AnQiCMS 的 tr 翻译标签结合语言包文件来实现。
- 在模板目录下创建 locales 文件夹，并在其中为每种语言创建对应的子文件夹（如 zh-cn、en-us）。
- 在这些子文件夹中放置 default.yml（或其他您自定义的 .yml 文件），并定义键值对，例如 “yourLocation”: “您的位置”。
- 在模板中，使用 {% tr "yourLocation" %} 即可根据当前站点的语言设置显示对应的翻译。
翻译动态内容（文章、产品等） 对于文章、产品等动态内容，您需要为每个语言站点独立创建和发布内容。例如，在您的中文站点下发布中文文章，然后在英文站点下发布对应的英文文章。AnQiCMS 的多站点管理功能使得这种内容隔离和管理变得非常高效。

五、一些实用的小建议

直观的视觉指示：在语言切换器中使用国旗图标（通过 LanguageIcon 或 Emoji LanguageEmoji）和语言名称相结合的方式，能让用户更直观地选择。
默认语言设置：确保新用户或无法识别语言的用户能够访问您网站的默认语言版本。
用户体验：将语言切换器放置在网站的显眼位置，如页头右上角或页脚，方便用户查找。

通过以上步骤，您就可以在 AnQiCMS 网站上设置并显示多语言切换链接，有效拓展网站的国际影响力，并为全球用户提供更友好的访问体验。

常见问题 (FAQ)

Q1：为什么我设置了后台的“默认语言包”，但网站前端的文章内容仍然是中文？ **A1

AnQiCMS如何设置并显示多语言切换链接？

一、理解 AnQiCMS 的多语言机制

二、后台配置：为多语言网站打下基础

三、前端展示：如何显示多语言切换链接

四、内容翻译：超越界面层面的多语言

五、一些实用的小建议

常见问题 (FAQ)

相关文章

如何在AnQiCMS模板中显示面包屑导航以优化用户体验？

AnQiCMS如何实现多站点内容的统一管理和前端显示？

如何在AnQiCMS中管理和显示友情链接列表？

AnQiCMS如何获取并展示单页面内容，例如“关于我们”？

如何在AnQiCMS中配置图片水印功能以保护原创内容显示？

AnQiCMS如何自动将图片转换为WebP格式以加快前端加载速度？

如何在AnQiCMS中控制大图的自动压缩和缩略图的生成方式？

AnQiCMS如何显示自定义的联系方式信息（如WhatsApp、Facebook链接）？