如何在 AnQiCMS 模板中调用多语言站点的切换链接?

作为一名资深的安企CMS网站运营人员,我深知多语言站点切换链接对于拓展国际市场、提升用户体验至关重要。安企CMS以其强大的多站点和多语言支持功能,为我们提供了便捷高效的解决方案。下面,我将详细阐述如何在 AnQiCMS 模板中调用多语言站点的切换链接。

灵活构建多语言站点切换功能

安企CMS在设计之初就充分考虑了企业和运营者在全球化布局中的需求,原生支持多站点管理与多语言内容的切换。这意味着您可以在一个安企CMS实例下轻松管理多个针对不同语言市场的内容站点。为了实现这些站点之间的无缝切换,安企CMS提供了一个简洁而强大的模板标签,让您能够轻松地在网站前端展示语言切换选项。

通过利用 languages 模板标签,我们可以获取到所有已配置的多语言站点信息,并据此生成切换链接。这不仅有助于用户在不同语言版本之间自由导航,也对搜索引擎优化(SEO)起着关键作用,确保搜索引擎能正确识别和索引您网站的各个语言版本。

理解 languages 模板标签

languages 标签是安企CMS专门为多语言站点切换功能设计的。它能够获取到所有在后台配置并启用的多语言站点列表。这个标签的使用非常直观,它不需要任何额外的参数,只需在模板中声明一个变量来接收返回的站点数据集合。

当您在模板中调用 {% languages websites %} 时,websites 变量将成为一个包含所有多语言站点信息的数组对象。这意味着您可以通过循环遍历这个数组,逐一访问每个站点的具体信息,并将其呈现在页面上。

websites 数组中的每个元素(我们通常在循环中将其命名为 item)都包含了以下关键字段,它们是构建语言切换链接的基础:

  • LanguageName:站点的语言名称,例如“中文”、“English”。
  • Language:站点的语言代码,例如“zh-CN”、“en-US”,这对于 hreflang 标签的设置尤为重要。
  • LanguageEmoji:与该语言关联的表情符号,可用于视觉上的语言标识。
  • LanguageIcon:语言的图标地址,提供更丰富的视觉展示。
  • Name:站点的显示名称。
  • Link:该语言站点的完整 URL 链接,这是用户进行语言切换时跳转的目标地址。
  • RemarkNofollow:其他可选属性,用于链接的备注和是否添加 nofollow 属性。

在模板中构建语言切换器

有了 languages 标签提供的数据,我们就可以在网站模板的任何位置(通常是页眉、页脚或侧边栏)构建语言切换器。核心思想是遍历 websites 数组,为每个语言站点创建一个带有其链接和标识的 HTML 元素。

以下是一个在安企CMS模板中实现语言切换器的详细示例:

{%- 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}}" class="language-icon" />
        {%- else %}
        <span class="language-emoji">{{item.LanguageEmoji}}</span>
        {% endif %}
        <span class="language-name">{{item.LanguageName}}</span>
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

在上述代码片段中:

  • {%- languages websites %}{%- endlanguages %} 声明了要获取多语言站点列表,并将其存储在 websites 变量中。 - 符号用于移除标签本身产生的空白行,使输出更整洁。
  • {%- if websites %} 检查 websites 变量是否为空,确保只有在有可用语言站点时才渲染切换器,避免不必要的空元素。
  • {%- for item in websites %} 遍历每个语言站点。
  • href="{{item.Link}}" 设置了语言切换链接的目标地址。
  • {%- if item.LanguageIcon %} 优先使用语言图标来显示。
  • {%- else %} 如果没有图标,则退而求其次使用表情符号 {{item.LanguageEmoji}}
  • {{item.LanguageName}} 显示语言的文本名称,方便用户识别。

通过这样的结构,您可以在页面上呈现一个清晰、易用的语言切换列表,用户点击即可跳转到对应的语言站点。

优化多语言站点的 SEO:Hreflang 标签

除了为用户提供可见的语言切换链接外,正确地告知搜索引擎您的多语言站点结构也至关重要。这通常通过在每个页面的 <head> 部分添加 hreflang 标签来实现。hreflang 标签告诉搜索引擎该页面有哪些其他语言或区域的替代版本,从而避免重复内容问题,并确保将正确语言版本的页面展示给对应的用户。

利用 languages 标签,我们可以动态生成所有必要的 hreflang 链接,并将其插入到 HTML 的 <head> 区块中:

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

此代码应放置在您模板文件(例如 base.html)的 <head> 标签内部。

  • rel="alternate" 表明这是一个替代版本的页面。
  • href="{{item.Link}}" 指向特定语言版本的 URL。
  • hreflang="{{item.Language}}" 指定了该 URL 对应的语言(和可选的地区)。

通过实施 hreflang 标签,您不仅提升了用户体验,更有效地优化了多语言网站的搜索引擎可见性,确保您的内容能触达全球受众。

运营提示

在部署多语言切换功能后,我们还需要注意一些运营上的细节: 首先,确保每个语言站点的 config.json 或后台设置中的基础 URL 配置正确,这直接影响 item.Link 的生成。其次,建议将语言切换器放置在网站的显眼位置,如顶部导航栏、页脚或侧边栏,以便用户能够轻松找到。最后,定期检查各语言站点的链接是否有效,内容是否同步更新,以保证用户体验和数据一致性。

安企CMS通过其内置的 languages 标签,为多语言站点的构建和管理提供了强大而灵活的工具,让您能够更专注于高质量的内容创作,从而更好地服务全球用户。


常见问题解答

1. 为什么我在模板中使用了 languages 标签,但页面上没有显示任何语言切换链接?

这通常是因为您的安企CMS后台尚未配置或启用任何多语言站点。请前往后台的多站点管理或系统设置中的语言相关配置项,确保您已经添加了至少一个除默认语言之外的语言站点,并且这些站点处于启用状态。languages 标签只会拉取后台中实际存在的已启用站点数据。

2. languages 标签返回的 item.Link 是否总是指向当前页面的对应语言版本?

item.Link 默认指向的是各个多语言站点的首页地址。如果您希望在用户切换语言时,尽可能停留在当前内容的对应语言版本页面(例如,用户在中文站点的“关于我们”页面,切换语言后跳转到英文站点的“About Us”页面),您可能需要根据当前页面的路由动态构造 item.Link 的值。这通常涉及在模板中获取当前页面的路径信息,然后与 item.Link (即对应语言站点的根目录)进行拼接,或者通过 JavaScript 在客户端动态处理跳转逻辑,以实现更智能的语言切换体验。

3. hreflang 标签对于多语言站点的 SEO 真的很重要吗?

是的,hreflang 标签对于多语言和多区域站点的 SEO 至关重要。它能明确告诉搜索引擎您网站的每个页面的所有语言或区域替代版本,从而防止搜索引擎将您的不同语言内容误判为重复内容,并确保搜索引擎能够向正确语言的用户展示相应的页面。正确使用 hreflang 可以有效提升您网站在全球范围内的可见性,避免不同语言站点之间产生内部竞争。