如何在前台页面显示AnQiCMS内置的系统语言包切换功能？

安企CMS提供了一套灵活的机制，让您的网站能够更好地服务于全球不同语言的用户。当您希望在前台页面实现语言切换功能时，AnQiCMS内置的标签和后台配置能够很好地满足这一需求。

理解AnQiCMS的语言包机制

首先，我们需要明确AnQiCMS中“语言包”的概念。AnQiCMS内置的系统语言包主要负责切换网站后台界面以及前端页面中系统内置的提示信息、标签等的语言。例如，日期格式、系统消息、或某些模板中预设的、与文章内容无关的文字。

需要注意的是，这一功能并不会自动翻译您网站上发布的文章、产品描述、分类名称等由用户编辑和创建的具体内容。这些内容的多语言支持需要通过其他方式（例如在内容编辑时创建不同语言版本或使用模板翻译标签）来实现。AnQiCMS在v2.1.1版本中就增加了对默认语言包的支持，这为网站的国际化运营奠定了基础。

在后台启用与配置默认语言

要在前台显示语言切换功能，您首先需要在AnQiCMS的后台进行一些基础设置。

  1. 进入全局功能设置： 登录您的AnQiCMS后台，在左侧导航栏中找到“后台设置”菜单，然后点击“全局功能设置”。
  2. 设置默认语言包： 在全局功能设置页面中，您会看到一个名为“默认语言包”的选项。AnQiCMS目前内置了中文和英文两种语言包。您可以选择您的网站默认使用的语言。这个设置会影响网站默认加载的系统内置语言。

虽然这个设置本身不会直接在前台显示语言切换按钮，但它确保了网站在处理不同语言时的基础环境。

在前台页面展示语言切换功能

AnQiCMS提供了一个专门的模板标签 {% languages %} 来获取所有已配置的多语言站点信息，您可以使用这个标签来构建前台的语言切换器。

使用 {% languages %} 标签获取语言列表

您可以在网站模板的任何位置（通常是页眉、页脚或侧边栏）添加以下代码片段，以显示一个简单的语言切换菜单：

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <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 %}

这段代码会遍历 websites 变量中的每一个语言站点信息，并为每个语言生成一个链接。

代码解析：

  • {% languages websites %}：这是核心标签，它会加载所有可用的语言站点信息到 websites 变量中。
  • {%- if websites %}：判断是否存在语言站点，如果存在则继续渲染。{%- 和 -%} 用于移除标签产生的空白行，保持HTML输出的整洁。
  • {%- for item in websites %}：循环遍历 websites 数组，item 变量在每次循环中代表一个语言站点。
  • {{item.Link}}：这是该语言站点的访问链接。点击后，用户将被重定向到对应语言版本的页面。
  • {{item.LanguageIcon}}：如果您的语言配置有图标（例如国旗图标），会在这里显示。
  • {{item.LanguageEmoji}}：如果没有图标，您可以选择显示语言对应的Emoji表情。
  • {{item.LanguageName}}：显示语言的名称（如“中文”、“English”）。

您可以根据您的网站设计，灵活地对这些元素进行样式美化，例如将其放入下拉菜单、弹出框或简单的横向列表。

为SEO优化添加Hreflang标签

对于多语言网站，为了更好地让搜索引擎理解不同语言版本的页面内容，并在搜索结果中为不同语言用户展示正确的版本，强烈建议在页面的 <head> 部分添加 hreflang 标签。这有助于避免重复内容问题，并提升用户体验。

您可以在网站模板的 base.html 文件（通常是所有页面都继承的通用模板）的 <head> 标签内添加如下代码：

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

代码解析：

  • <link rel="alternate" ...>：这是 hreflang 标签的标准格式。
  • href="{{item.Link}}"：指向当前页面的另一个语言版本的URL。
  • hreflang="{{item.Language}}"：指定该URL对应的语言代码（例如 zh-CN 代表简体中文，en 代表英文）。

更深层次的模板内容多语言处理

前面提到的系统语言包和切换器，主要针对系统级和站点级的语言展示。如果您希望网站模板中的自定义文字内容也能实现多语言显示，AnQiCMS还提供了{% tr %}标签和locales目录机制。

  1. 创建语言文件： 在您的模板目录下，创建一个名为 locales 的文件夹。然后在 locales 文件夹中，为每种支持的语言创建一个子文件夹（例如 en-us、zh-cn），并在每个子文件夹中创建一个 default.yml 文件。
    • 例如，locales/zh-cn/default.yml 可以包含 yourLocation: "您的位置"。
    • locales/en-us/default.yml 则包含 yourLocation: "Your Location"。
  2. 使用 {% tr %} 标签： 在模板中，您可以使用 {% tr "yourLocation" %} 这样的方式来调用翻译后的文本。系统会根据当前选定的语言自动加载对应 default.yml 中的翻译。

这种方式让您可以精细控制模板中所有硬编码文本的多语言版本，结合前台的语言切换器，为用户提供全面的本地化体验。

通过上述步骤，您的AnQiCMS网站将能够提供一个直观的语言切换功能，并为不同语言的用户提供更符合他们习惯的浏览体验，同时也兼顾了搜索引擎优化的需求。

常见问题 (FAQ)

  1. Q: 语言包切换功能是否会自动翻译我网站上的文章内容？ A: 不会。AnQiCMS内置的系统语言包切换功能主要针对网站后台界面和前端页面中系统内置的提示信息、导航标签等。您网站上发布的文章、产品描述等具体内容，需要您手动创建不同语言版本的内容，或者通过集成第三方翻译工具来实现。

  2. Q: 如果我想支持中文和英文之外的语言，例如法语或德语，AnQiCMS支持吗？ A: AnQiCMS内置的系统语言包目前主要提供中文和英文选项。但您可以通过创建自定义的locales语言文件（例如 locales/fr/default.yml 用于法语），并结合 {% tr %} 标签来翻译您模板中的自定义文本。对于系统核心界面和标签，可能需要更深入的二次开发来扩展更多语言支持。

  3. Q: hreflang 标签对网站的SEO有什么具体帮助？ A: hreflang 标签告诉搜索引擎特定页面是另一个页面内容的替代版本，针对不同的语言或地区。这有助于：

    • 避免重复内容惩罚： 即使内容相似，但语言或地区不同，搜索引擎也会正确识别，避免将它们视为重复内容。
    • 提升本地化搜索排名： 确保用户在搜索时能找到最适合他们语言和地区的内容版本。
    • 改善用户体验： 搜索引擎可以直接将用户引导到他们偏好的语言版本，减少跳出率。