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

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


一、理解 AnQiCMS 的多语言机制

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

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

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

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

  1. 设置默认语言包(针对后台界面和系统提示) 进入 AnQiCMS 后台,在左侧导航栏找到“后台设置”,点击“全局设置”。在这里,您会看到“默认语言包”选项。您可以选择“中文”、“英文”或其他已支持的语言。这个设置主要影响 AnQiCMS 后台的管理界面语言以及网站中由系统自动生成的提示信息。它并不会自动翻译您发布的文章、产品等动态内容。

  2. 创建多语言站点(针对前端内容) 这是实现前端多语言内容展示和切换的关键步骤。如果您需要一个独立的英文网站来展示英文内容,您需要在 AnQiCMS 后台的“多站点管理”中创建一个新的站点。

    • 在后台左侧菜单中找到“多站点管理”,然后点击“添加新站点”。
    • 在新站点创建页面,您可以填写诸如“站点名称”(如:AnQiCMS English Site)、“站点根目录”、“网站地址”(如:en.yourdomain.comwww.yourdomain.com/en/)等信息。
    • 重要的是,您可以为这个新站点选择不同的“默认语言包”,并配置其独立的数据库(或复用主站的数据库但使用不同的表前缀,以实现数据隔离)。
    • 完成站点创建后,您就拥有了一个独立的英文版本站点,您可以在此站点下发布专属的英文文章、产品等内容。对于其他语言版本,也依此方法创建。

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

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

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

  1. 使用 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。

    这段代码会循环遍历所有已配置的语言站点,并为每个站点生成一个链接,用户点击即可跳转到对应的语言版本网站。

  2. 为 SEO 优化配置 Hreflang 标签

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

    您可以将以下代码放置在您的模板文件(通常是 bash.htmlheader.html)的 <head> 区域:

    {%- languages websites %}
    {%- for item in websites %}
    <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
    {%- endfor %}
    {%- endlanguages %}
    
    • hreflang="{{item.Language}}" 会输出正确的语言代码(如 zh-cnen),帮助搜索引擎区分不同语言的页面。

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

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

  1. 翻译模板中的静态字符串 对于模板中固定的文本,例如导航菜单项、版权声明、“联系我们”按钮等,您可以使用 AnQiCMS 的 tr 翻译标签结合语言包文件来实现。

    • 在模板目录下创建 locales 文件夹,并在其中为每种语言创建对应的子文件夹(如 zh-cnen-us)。
    • 在这些子文件夹中放置 default.yml(或其他您自定义的 .yml 文件),并定义键值对,例如 “yourLocation”: “您的位置”
    • 在模板中,使用 {% tr "yourLocation" %} 即可根据当前站点的语言设置显示对应的翻译。
  2. 翻译动态内容(文章、产品等) 对于文章、产品等动态内容,您需要为每个语言站点独立创建和发布内容。例如,在您的中文站点下发布中文文章,然后在英文站点下发布对应的英文文章。AnQiCMS 的多站点管理功能使得这种内容隔离和管理变得非常高效。

五、一些实用的小建议

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

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


常见问题 (FAQ)

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