如何显示当前站点的多语言切换选项?

在安企CMS中,如何便捷地为网站添加多语言切换选项?

随着全球化趋势的不断深入,许多企业和内容运营者发现,拥有一个支持多语言的网站是拓展市场、服务不同地区用户的关键。安企CMS深知这一需求,因此内置了强大的多语言支持功能,让您能够轻松地管理和展示不同语言的内容。

当您的网站内容已经准备好多语言版本后,下一步自然是为访问者提供一个直观的语言切换器。这不仅能提升用户体验,还能确保您的内容能够触达更广泛的受众。本文将引导您如何在安企CMS的模板中,优雅地实现当前站点的多语言切换选项显示。

理解安企CMS的多语言站点机制

在深入模板代码之前,我们先简单回顾一下安企CMS如何处理多语言。

安企CMS支持多站点管理,这意味着您可以为每一种语言创建和管理一个独立的站点。例如,一个主站用于中文内容,另一个子站用于英文内容,它们在后台可以统一管理,但前台拥有独立的域名或子域名。

在后台的“全局功能设置”中,您可以为每个站点设置“默认语言包”。这个设置主要影响系统内置的提示信息、后台界面等默认文本的语言显示。然而,它并不会自动翻译您网站上的文章、产品、分类等具体内容。这些内容通常需要您在创建或编辑时,手动为不同的语言版本进行填充。

有了多站点配置的基础,安企CMS提供了一个简洁的模板标签,让您能够方便地在网站前端展示所有已配置的语言版本,并提供切换链接。

核心:如何在前端模板中显示多语言切换选项?

在安企CMS的模板系统中,要显示多语言切换选项,您需要使用 languages 模板标签。这个标签能够获取当前安企CMS实例下所有已配置的多语言站点信息。

基本的调用方式是这样的:

{%- languages websites %}
    {%- if websites %}
    <div>
        <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 %}

让我们来分解一下这段代码:

  1. {%- languages websites %}:这是调用多语言站点的核心标签。它会获取所有已配置的语言站点,并将它们作为一个数组对象赋值给 websites 变量。
  2. {%- if websites %}:这是一个条件判断,确保只有在存在多个语言站点时,切换选项才会被渲染出来,避免在单语言网站上显示空的切换器。
  3. {%- for item in websites %}websites 是一个包含多个站点信息的数组,我们通过 for 循环遍历这个数组,item 变量在每次循环中代表一个语言站点的信息。
  4. item 变量中可用的字段
    • item.LanguageName:当前语言的完整名称,例如“中文”、“English”。
    • item.Language:当前语言的代码,例如“zh-CN”、“en-US”,这对于SEO中的hreflang标签非常有用。
    • item.LanguageEmoji:当前语言对应的Emoji表情,例如🌐。
    • item.LanguageIcon:如果您在后台为语言设置了自定义图标,这里会显示图标的URL。
    • item.Name:站点的名称。
    • item.Link:最重要的字段,这是当前语言站点的访问链接,点击后可以直接切换到该语言版本的网站。
    • item.Remarkitem.Nofollow:其他辅助信息,通常在语言切换器中不直接显示。
  5. 显示逻辑
    • {%- if item.LanguageIcon %}:我们首先判断是否有自定义的语言图标。如果有,就显示图标 (<img src="{{item.LanguageIcon}}" />)。
    • {%- else %}:如果没有自定义图标,就显示语言的Emoji表情 ({{item.LanguageEmoji}})。
    • 最后,无论是否有图标/Emoji,都会显示语言名称 ({{item.LanguageName}}),提供清晰的文本提示。

通过这段代码,您可以灵活地组合显示语言名称、图标或Emoji,为您的网站访客提供一个美观且实用的语言切换入口。

优化SEO:添加 hreflang 标签

除了在页面上显示语言切换器,为了更好地引导搜索引擎理解您的多语言内容,推荐在网站的 <head> 部分添加 hreflang 标签。这有助于避免多语言内容被视为重复内容,并确保搜索引擎将正确的语言版本展示给相应地区的用户。

您可以在网站的公共头部模板文件(如 bash.htmlheader.html)中,使用 languages 标签生成 hreflang 信息:

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

这段代码会为每个语言版本生成一个 <link> 标签,指明其对应的 href(链接地址)和 hreflang(语言代码),帮助搜索引擎更好地索引您的多语言站点。

实际操作:将切换器集成到你的模板中

要将多语言切换器添加到您的网站,您可以选择以下几个常见的模板位置:

  • 网站头部(Header):通常位于 template/default/partial/header.html 或类似的公共头部文件中。这是最常见的位置,让用户在进入网站后就能快速找到切换选项。
  • 网站底部(Footer):在 template/default/partial/footer.html 等文件中,提供一个次要的切换入口。
  • 侧边栏(Sidebar):如果您的网站有侧边栏,也可以将切换器放置在此处。
  • 公共基础模板:例如 template/default/bash.html,如果您的所有页面都继承自一个基础模板,将其放置在这里可以确保所有页面都显示切换器。

您可以根据自己网站的设计风格,对上述代码进行CSS美化,例如将其制作为下拉菜单、国旗图标列表等形式,使其更好地融入整体界面。安企CMS提供的 LanguageIconLanguageEmoji 字段,为您在视觉设计上提供了很大的灵活性。

总结

通过安企CMS提供的 languages 模板标签,您可以方便快捷地在网站前端实现多语言切换选项的展示。无论是简单的文本链接,还是结合图标和Emoji的视觉化切换器,都能轻松实现。同时,不要忘记添加 hreflang 标签,为您的多语言站点提供良好的搜索引擎优化支持。善用这些功能,您的网站将能够更好地走向国际,服务全球用户。


常见问题 (FAQ)

1. 后台设置了“默认语言包”,为什么前台内容没有自动翻译?

安企CMS的“默认语言包”设置(位于后台“全局功能设置”中)主要针对系统内置的界面文本、提示信息等进行本地化显示。它不会自动翻译您在后台创建的文章、产品、分类等具体内容。对于这些内容,您需要手动为每个语言版本创建和填充相应的内容。例如,您可以为中文站点发布一篇中文文章,然后为英文站点发布其对应的英文翻译版本。

2. 如何为不同的语言版本网站配置独立域名?例如 www.example.com 用于中文,en.example.com 用于英文?

安企CMS支持多站点管理功能。您可以在后台的“多站点管理”中创建多个站点,每个站点都可以绑定一个独立的域名(或子域名),并配置其对应的语言、模板和内容。当用户访问不同的域名时,就会加载相应的语言版本网站。在前端模板中使用 languages 标签时,它会自动获取并生成每个站点的正确链接 (item.Link),从而实现不同域名之间的语言切换。

3. 我可以为多语言切换选项使用自定义的国旗图标或品牌图标吗?

是的,您可以。在 languages 标签返回的 item 对象中,包含了 LanguageIcon 字段。这意味着您可以在后台为每个语言上传一个自定义的图标(例如国旗图片),然后在模板中使用 {{item.LanguageIcon}} 来显示这些图标。如果未上传图标,您可以选择使用 {{item.LanguageEmoji}} 显示Emoji表情,或者只显示 {{item.LanguageName}} 文本名称。这种灵活性让您可以根据网站的设计风格,自由选择最合适的图标展现形式。