如何在AnQiCMS中显示多语言站点的切换选项和hreflang标签？

在AnQiCMS中构建多语言网站，并提供便捷的语言切换选项及正确的hreflang标签，是拓展国际市场和提升用户体验的关键一步。AnQiCMS以其灵活的架构，提供了清晰的路径来实现这一目标，让您的网站内容能够精准触达全球用户，同时确保搜索引擎的友好性。

AnQiCMS 多语言实现原理概述

AnQiCMS在设计上，将多语言支持与多站点管理功能深度融合。这意味着，每个不同的语言版本，在系统内部通常被视为一个独立的站点进行管理。这种设计的好处在于，不同语言站点的后台管理、内容发布、URL结构乃至模板样式都可以高度独立和定制，从而避免了单站点多语言可能带来的复杂性。

例如，您的中文站点（www.example.com）和英文站点（en.example.com）将拥有各自独立的内容库，可以发布完全不同的文章、产品或页面。AnQiCMS的“默认语言包”设置主要影响后台管理界面或系统内置的提示信息语言，而网站前台展示的核心内容，如文章标题、正文、分类名称等，则需要为每个语言站点单独创建和维护。

正是基于这样的架构，AnQiCMS提供了强大的标签功能，帮助我们轻松地在前端实现语言切换和hreflang标签的集成。

第一步：配置多语言站点

首先，您需要在AnQiCMS后台设置多个独立的语言站点。

  1. 安装主站点： 如果您尚未安装AnQiCMS，请先完成主站点的安装。
  2. 创建新的语言站点： 登录到您的AnQiCMS主站点后台。在左侧菜单中，找到“多站点管理”功能，点击“添加新站点”。
    • 在弹出的界面中，您需要为每个语言站点填写相应的信息。例如，要创建一个英文站点：
      • 站点名称： 例如“英文站点”。
      • 站点根目录： 这是一个独立的目录路径，用于存放该站点的缓存、配置文件等数据，例如/app/en_example_com。确保这个目录名是唯一的。
      • 网站地址： 设定该语言站点将使用的域名或子域名，例如https://en.example.com或https://www.example.com/en。
      • 管理员账号密码： 为该新站点设置独立的后台管理员账号和密码。
      • 数据库名称： 为该站点创建独立的数据库，例如en_example_com_db。如果您是在Docker环境下使用AnQiCMS，并且复用默认数据库账号信息，通常无需额外填写数据库账号密码。
      • 选择使用的模板： 您可以为每个语言站点选择一套独立的模板，也可以复用现有模板并进行语言相关的修改。

完成站点的添加后，您还需要在服务器层面（如Nginx或Apache）配置相应的反向代理，将用户的请求正确路由到AnQiCMS的Docker容器端口（默认是8001），并确保您的域名解析正确。这部分操作与AnQiCMS的安装部署文档中关于多站点配置的说明类似，确保每个语言站点都能独立访问。

第二步：在模板中添加语言切换选项

当您的多语言站点都配置好并可独立访问后，接下来就是在网站前端提供一个显眼的语言切换选项，方便用户根据自己的偏好选择语言。AnQiCMS提供了一个名为 languages 的强大标签，可以获取所有已配置的语言站点信息。

通常，我们建议将这段代码放置在全局的模板文件，例如template/{您的模板名称}/bash.html或header.html中，这样可以确保它在所有页面上都可见。

您可以通过以下方式使用 languages 标签来显示语言切换选项：

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" {% if item.Link == currentUrl %}class="active"{% endif %}>
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}图标" />
        {%- else %}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

在这段代码中：

  • {% languages websites %} 会遍历所有在AnQiCMS后台配置的多语言站点，并将它们的数据存储在 websites 变量中。
  • item.Link 会提供该语言站点的完整URL。
  • item.LanguageName 显示语言的名称（例如“中文”、“English”）。
  • item.LanguageEmoji 提供语言对应的Emoji图标，如果您的模板支持显示Emoji，这是一个简洁的选择。
  • item.LanguageIcon 如果您在后台为语言配置了图标，这里会显示图标的URL。您可以根据实际需求选择显示Emoji还是图标。
  • {% if item.Link == currentUrl %}class="active"{% endif %} 这一行（currentUrl需要作为全局变量传入模板，或者通过其他方式获取当前页面的URL）可以用于高亮显示当前用户正在访问的语言。

第三步：实现 hreflang 标签

除了为用户提供可见的语言切换选项，正确配置 hreflang 标签对于多语言站点的SEO至关重要。hreflang 标签告诉搜索引擎特定页面有哪些其他语言版本，有助于避免重复内容问题，并确保用户在搜索结果中看到正确语言和地区的内容。

hreflang 标签需要放置在每个页面的 <head> 部分。您可以继续利用 languages 标签来动态生成这些链接：

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

在这段代码中：

  • item.Link 同样提供了每个语言站点的URL。
  • item.Language 则提供了该语言站点的ISO 639-1语言代码（例如 zh-cn、en-us）。这些代码是AnQiCMS在创建语言站点时自动生成的，或者您在后台进行配置时设定的。

将这段代码添加到您模板的 <head> 部分（例如template/{您的模板名称}/bash.html或head.html），即可确保每个页面都包含正确的 hreflang 信息。

集成与**实践

  • 模板文件位置： languages 标签的代码，无论是语言切换选项还是 hreflang 标签，都应该放置在网站的全局头部模板文件（如bash.html、header.html）中，确保它们在所有页面上都能被正确加载和渲染。
  • 内容同步： 由于每个语言版本都是一个独立站点，您需要为每个站点分别维护内容。在发布新文章或产品时，请记得在所有相关语言站点上进行发布和翻译。
  • 统一URL结构： 规划清晰且一致的URL结构（例如，使用子目录/en/或子域名en.example.com）有助于用户和搜索引擎理解您的多语言内容布局。
  • 规范化标签： 尽管 hreflang 解决了多语言内容问题，但仍建议在每个页面上使用 <link rel="canonical" href="..."/> 标签指向该语言版本的主URL，以避免不必要的爬虫混淆。AnQiCMS提供了 tdk 标签来获取规范链接。

通过上述步骤，您就可以在AnQiCMS中有效地显示多语言