如何使用`languages`标签构建页面上的多语言切换菜单?

安企CMS致力于为企业提供高效、灵活的内容管理解决方案,其中一个核心亮点就是其强大的多语言支持能力。在全球化的今天,一个能够轻松应对多语言内容的网站,无疑能为企业拓展国际市场,触达更广泛的用户群体提供有力支撑。今天,我们就来深入探讨安企CMS如何通过巧妙运用languages标签,在您的网站上构建一个自然流畅的多语言切换菜单,从而开启全球内容营销的新篇章。

拥抱全球化:安企CMS的多语言生态

在安企CMS中,多语言支持不仅仅是简单地翻译网站界面文字,它更意味着为不同语言的用户提供一套完整、独立的站点内容体验。这意味着您可以为不同语言的用户提供定制化的内容,甚至针对不同地域进行SEO优化。安企CMS的languages标签正是实现这一目标的关键工具之一,它能够帮助您在页面上方便地展示并切换到不同的语言站点。

核心工具:languages 标签解析

languages标签是安企CMS模板引擎中专门用来获取您已配置的所有多语言站点列表的利器。它的设计非常简洁直观,使用时不需要附加任何参数。当您在模板中调用{% languages websites %}时,它会默默地为您收集所有在后台配置好的语言站点信息,并将这些信息作为一个名为websites的数组对象,供您在后续的模板代码中进行遍历和展示。

这个websites数组中的每一个元素都代表一个语言站点,并包含了构建多语言切换菜单所需的所有实用信息,比如:

  • LanguageName: 这个站点的语言名称,例如“中文”、“English”。
  • Language: 语言的ISO代码,例如“zh-CN”、“en-US”,这对于设置hreflang属性进行SEO优化至关重要。
  • LanguageEmoji: 语言对应的Emoji图标,如🇨🇳,能为用户提供直观的视觉识别。
  • LanguageIcon: 语言对应的图标URL,如果后台配置了专属图标,可以用来展示更丰富的视觉效果。
  • Name: 站点的名称。
  • Link: 切换到该语言站点的完整URL链接。
  • Nofollow: 一个布尔值,表示该链接是否应添加rel="nofollow"属性,这通常用于SEO控制。

构建一个实用的多语言切换菜单

有了languages标签提供的数据,在页面上构建一个多语言切换菜单就变得轻而易举。您只需在模板中运用一个for循环,遍历websites数组,然后根据每个语言站点的信息来生成相应的切换链接。

例如,您可以在网站的页眉或页脚部分,添加一个简洁的语言切换区域。下面是一个常见的实现示例,它会展示语言名称,并优先使用配置的语言图标,如果未配置图标,则使用Emoji作为备选:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言:</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" class="language-item {% if system.Language == item.Language %}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 %}获取所有语言站点列表。接着,一个for循环遍历websites数组。对于每个语言站点item,我们生成一个<a>标签,其href属性直接绑定到item.Link。为了增强视觉效果,我们判断item.LanguageIcon是否存在,优先显示图标,否则显示item.LanguageEmoji。同时,为了让用户清晰地知道当前正处于哪个语言版本,我们通过比较system.Language(当前网站的语言代码,可通过{% system with name='Language' %}获取)与item.Language,为当前语言的链接添加了active类名,以便通过CSS进行高亮显示。

不仅仅是切换:Hreflang与SEO优化

多语言网站的成功不仅在于提供切换选项,还在于确保搜索引擎能够正确理解并索引您的多语言内容。hreflang属性就是实现这一目标的关键SEO信号。它告诉搜索引擎您的页面存在其他语言或地区版本,有助于避免重复内容问题,并确保用户在搜索时能够看到与其语言和地区最匹配的内容。

安企CMS的languages标签同样可以帮助您轻松生成这些hreflang标签。您只需将以下代码段放置在您网站模板的<head>区域内:

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

这段代码会为每个语言站点生成一个<link rel="alternate">标签,其中href指向该语言站点的链接,hreflang则设置为对应的语言代码。这将极大地提升您多语言网站的SEO表现。

完善多语言体验:内容翻译与后台配置

需要强调的是,languages标签主要用于构建语言切换菜单和生成hreflang属性,它并不会自动翻译您网站的文章内容。要提供真正的多语言内容体验,您还需要:

  1. 后台内容管理: 安企CMS支持多站点管理,您可以为每一种语言设置一个独立的站点(或通过其他方式管理不同语言的内容)。在这些独立的站点中,分别发布和管理对应语言的文章、产品、单页面等内容。languages标签生成的item.Link正是指向这些已配置好的多语言站点的URL。
  2. 模板静态文本翻译: 对于模板中不变的静态文本(如导航菜单项、按钮文字、页脚声明等),安企CMS提供了{% tr "key" %}标签进行翻译。您需要在模板目录下创建locales文件夹,并在其中为每种语言创建相应的.yml翻译文件,例如zh-CN/default.ymlen-US/default.yml,定义键值对来存储不同语言的翻译文本。

通过这些细致的配置与灵活的标签运用,安企CMS能够帮助您搭建功能强大、用户体验友好的多语言网站,让您的企业在国际舞台上更具竞争力。


常见问题 (FAQ)

1. 我是否需要在安企CMS后台为每种语言创建单独的站点才能使用languages标签?

是的,languages标签返回的列表是您在安企CMS后台“多站点管理”中配置的各个语言站点。每个语言站点通常会对应一个独立的域名、子域名或子目录。标签会自动获取这些已配置站点的链接信息。如果您没有创建多语言站点,该标签将不会返回任何有意义的数据。

2. languages标签会自动翻译我的文章或产品内容吗?

不会。languages标签的主要功能是获取多语言站点的切换链接和相关元数据,它不具备内容翻译功能。您网站上的文章、产品描述等具体内容,需要您在对应的语言站点后台手动进行翻译和发布,或者利用{% tr "key" %}标签对模板中的静态文本进行本地化处理。

3. 如果我的网站目前只有一种语言,我还应该使用languages标签吗?

即便您的网站目前仅支持一种语言,在模板中预留languages标签的位置也是一个好习惯。