如何将多语言内容切换按钮显示在网站前端？

在AnQiCMS上，让网站前端显示多语言内容切换按钮，对于拓展全球用户群体、提升用户体验至关重要。AnQiCMS以其强大的多语言支持和灵活的模板机制，让实现这一功能变得直观而高效。

AnQiCMS的多语言机制概览

AnQiCMS在设计之初就考虑到了全球化的内容发布需求。它的多语言支持核心在于“多站点管理”功能。这意味着，您可以通过在后台创建不同的站点来代表不同的语言版本。例如，您可以有一个 yourwebsite.com 作为中文站，另一个 en.yourwebsite.com 或 yourwebsite.com/en 作为英文站。每个站点可以拥有独立的域名、内容、甚至默认语言包设置，从而实现真正的多语言内容隔离与管理。

在后台的“系统设置”下的“全局功能设置”中，您会发现“默认语言包”选项。这里虽然可以设置中文或英文等默认语言，但这主要影响的是AnQiCMS后台管理界面以及一些内置系统提示的语言。对于您网站前端展示的文章、产品、分类等内容，它们是与具体站点绑定的，不会因为这里更改了“默认语言包”而自动翻译或切换。因此，要实现前端的多语言切换，关键在于为不同语言版本的内容创建并管理好各自的站点。

部署多语言站点：基础准备

在将语言切换按钮显示在前端之前，您需要先在AnQiCMS后台搭建好对应的多语言站点。这通常涉及到：

  1. 规划域名或子目录： 决定您的多语言站点将采用何种URL结构，例如：

    • 独立域名： yourwebsite.com (中文), yourwebsite.de (德文)
    • 子域名： zh.yourwebsite.com (中文), en.yourwebsite.com (英文)
    • 子目录： yourwebsite.com (中文), yourwebsite.com/en (英文) AnQiCMS的多站点管理非常灵活，能很好地支持这些模式。

  2. 创建新站点： 登录到您的主站点后台，进入“多站点管理”功能。在这里，您可以“添加新站点”，为每个语言版本配置独立的站点信息，包括站点名称、网站地址、数据库名称（用于独立存储该语言站点的数据）、以及管理员账号密码等。为确保内容隔离，每个语言站点应使用独立的数据库。

通过这样的设置，每个语言版本都拥有一个完整的、独立运营的AnQiCMS实例，您可以针对性地发布和管理不同语言的内容。

核心：在模板中添加语言切换按钮

当您的多语言站点都配置并运行起来后，下一步就是在网站前端的模板中添加实际的语言切换按钮。AnQiCMS提供了一个非常便捷的模板标签 languages 来获取所有已配置的多语言站点列表。

这个标签的使用方式十分简洁，它不需要任何参数，会自动遍历您后台配置的所有多语言站点信息。它会返回一个包含每个语言站点详细信息的数组，您可以通过循环遍历这个数组来生成对应的语言切换链接。

通常，您会将这段代码放在网站的公共部分，比如页头（header）、页脚（footer）或者侧边栏，以便用户随时随地进行语言切换。这些公共部分在AnQiCMS模板中通常通过 bash.html 或 partial 目录下的文件来管理。

下面是一段在模板中应用 languages 标签的示例：

{%- 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}}">
        {%- else %} {# 否则显示Emoji或语言名称 #}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}

这段代码首先会检查是否存在多语言站点配置 ({% if websites %})，如果存在，它会循环遍历每个站点。item 是循环中的当前语言站点对象，您可以通过 item.Link 获取该语言站点的链接地址，item.LanguageName 获取语言名称（如“中文”），item.LanguageEmoji 获取语言对应的Emoji表情（如🇨🇳），以及 item.LanguageIcon 获取语言图标的URL。您可以根据自己的设计偏好，选择显示图标、Emoji还是纯文本。

将这段代码片段插入到您模板的 bash.html 文件中（通常是负责渲染页面顶部导航或底部版权信息的地方），或者创建一个单独的 partial/language_switcher.html 文件，然后使用 {% include "partial/language_switcher.html" %} 将其引入到 bash.html 中。这样，您的网站前端就会出现一个包含所有语言选项的切换区域了。

优化与细节：提升用户体验

为了让多语言切换功能更加完善和用户友好，一些细节值得注意：

  • Hreflang 标签的设置： 对于搜索引擎优化（SEO）来说，hreflang 标签是告诉搜索引擎您的网站有不同语言版本的重要方式。它能帮助搜索引擎将正确语言的内容展示给相应语言的用户。在您的模板的 <head> 部分，您可以利用 languages 标签来动态生成这些 hreflang 链接：

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

    这段代码会为每个语言站点生成一个 link 标签，其中 item.Link 是对应语言站点的URL，item.Language 是该语言的ISO 639-1语言代码（如“zh-CN”或“en-US”）。

  • 样式与位置： 语言切换按钮的样式和位置很大程度上影响用户体验。您可以利用CSS对 .language-switcher 和 .language-option 类进行美化，使其与网站整体设计风格保持一致。常见的做法是将其放置在网站的右上角、页脚区域，或者作为一个下拉菜单集成到主导航中。

  • 当前语言高亮（进阶）： 虽然 languages 标签本身没有直接提供判断当前站点语言的 IsCurrent 属性，但您可以通过前端JavaScript或后端模板逻辑，比较 item.Link 与当前页面的URL或