作为一位资深的网站运营专家，我深知构建一个能够触及全球用户的多语言网站，是企业拓展国际市场、提升品牌影响力的重要策略。而AnQiCMS，凭借其高效、灵活的架构和强大的多站点、多语言支持能力，无疑是实现这一目标的首选工具。今天，我们就来深入探讨如何在AnQiCMS模板中，巧妙地动态生成一个实用且友好的多语言站点导航切换器。
AnQiCMS的多语言机制概览
在AnQiCMS中，构建多语言站点并不仅仅是简单的文本翻译。它提供了一种更为强大和灵活的“多站点管理”能力，这意味着您可以为每种语言配置一个独立的站点（例如，en.yourdomain.com 用于英文站，fr.yourdomain.com 用于法文站），每个站点拥有独立的URL结构、内容、甚至特定的模板配置。这种设计不仅保障了内容管理的清晰性，也为SEO本地化策略提供了极大的便利。
在后台的“全局功能设置”中，虽然有一个“默认语言包”选项，但它主要影响的是后台界面和部分内置提示信息的语言显示。对于我们前端展现的多语言站点，AnQiCMS提供了一套专门的模板标签，能够动态获取并展示您配置的所有语言站点信息，这正是构建语言切换器的核心所在。
第一步：规划与配置多语言站点
在着手模板设计之前，您需要在AnQiCMS的后台进行多语言站点的规划与设置。通常，这会涉及到以下几个方面：
- 多站点创建与绑定： 利用AnQiCMS的“多站点管理”功能，为每一种目标语言创建一个独立的站点。每个站点会关联一个唯一的域名或子域名（例如
en.yourdomain.com,fr.yourdomain.com）。在创建过程中，您可以为每个站点指定其默认的语言（例如，英文站的默认语言设置为英语）。这确保了每个语言版本的内容是独立存储和管理的。 - 内容本地化： 在每个语言站点下，您需要针对目标语言创建或翻译相应的内容，包括文章、产品、单页面等。AnQiCMS强大的内容模型和灵活的内容编辑功能，能够很好地支持不同语言内容的精细化管理。
- 翻译文件准备（针对静态文本）： 对于网站UI界面中不属于动态内容（如导航名称、按钮文本、页脚版权信息等）的静态文本，AnQiCMS支持通过
locales目录下的YAML文件进行翻译。您需要在模板目录下创建locales文件夹，并在其中为每种语言（例如en-us、zh-cn）创建default.yml文件，存储对应的键值对翻译。例如，zh-cn/default.yml中可能包含"yourLocation": "您的位置"，而en-us/default.yml中则是"yourLocation": "Your Location"。在模板中，您可以通过{% tr "yourLocation" %}这样的标签来调用这些翻译后的文本。
第二步：在模板中构建语言切换器
现在，我们来到最核心的部分——如何在AnQiCMS模板中动态生成多语言导航切换器。AnQiCMS为此提供了languages标签，它能够帮我们获取所有已配置的多语言站点信息，进而生成切换链接。
假设您希望在网站的页眉部分放置一个语言切换器，用户点击后可以跳转到对应语言的站点。您可以在模板的bash.html（通常是包含网站公共头部的文件）或具体页面的头部区域添加如下代码：
{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
<span>{% tr "switchLanguage" %}:</span> {# 假设 "switchLanguage" 在您的翻译文件中 #}
<ul>
{%- for item in websites %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{item.Link}}">
{%- if item.LanguageIcon %}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}" class="language-icon" />
{%- else %}
{{item.LanguageEmoji}} {# 如果没有设置图标，显示emoji，例如 🇺🇸 🇨🇳 #}
{% endif %}
{{item.LanguageName}} {# 显示语言名称，例如 English, 中文 #}
</a>
</li>
{%- endfor %}
</ul>
</div>
{%- endif %}
{%- endlanguages %}
这段代码首先使用{% languages websites %}标签获取所有已配置的语言站点列表，并将其赋值给websites变量。接着，它会遍历websites数组中的每一个item（代表一个语言站点）。
在循环内部：
item.Link：这是AnQiCMS为每个语言站点生成的完整URL，点击后可以直接跳转到对应语言的站点首页。item.LanguageIcon：如果您的后台为语言配置了图标，这里会显示图标。item.LanguageEmoji：一个方便的备选，显示对应语言的旗帜Emoji。item.LanguageName：显示语言的完整名称，如“English”、“中文”。{% if item.IsCurrent %}class="active"{% endif %}：这是一个非常实用的条件判断。item.IsCurrent会判断当前正在访问的站点是否就是这个语言站点，如果是，就为其添加active类，方便您通过CSS进行高亮显示，让用户清晰地知道当前所处的语言环境。{% tr "switchLanguage" %}：这里使用了tr翻译标签，确保切换器本身的静态文本也能被正确本地化。
第三步：优化SEO：添加Hreflang标签
对于多语言网站，hreflang标签是国际SEO不可或缺的一部分。它告诉搜索引擎您的页面有哪些语言版本，以及它们之间的关系，有助于避免重复内容问题，并确保搜索引擎向用户展示正确语言版本的页面。
您需要将hreflang标签放置在HTML的<head>区块中。同样，我们可以利用languages标签来动态生成这些链接：
<head>
{# 其他head内容，如meta标签、title等 #}
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}" />
{%- endfor %}
{%- endlanguages %}
</head>
这里，item.Language会输出该语言站点的语言代码（例如en-us、zh-cn），item.Link则输出对应语言站点的URL。这样，搜索引擎就能准确理解您的多语言内容结构了。
实用技巧与进阶考量
- 样式定制： 您可以通过CSS来美化您的语言切换器。例如，为
.language-switcher、ul、li和.active类添加样式，使其与您的网站整体设计风格保持一致。 - 当前语言高亮： 正如上文所示，利用
item.IsCurrent属性可以轻松实现当前语言的高亮显示。 - 动态内容链接的关联： 在AnQiCMS中，由于每个语言站点是相对独立的，当您在一个语言站点内部创建内容并链接到其他内容时，这些链接默认是会指向当前语言站点的内部页面。例如，在英文站的文章中，其“相关阅读”或“分类”链接会默认指向英文站内的相关内容。这种设计极大地简化了多语言内容管理中的链接问题。
- 结合导航列表标签： 如果您的多语言站点导航菜单本身也是多语言的，您可以结合
navList标签，在不同的语言站点配置不同的导航菜单。navList标签同样支持siteId参数，可以在一个模板中灵活调用不同站点的导航。
通过以上步骤，您不仅可以在AnQiCMS模板中动态