如何在安企CMS中显示多语言切换链接和当前的语言标识？

在安企CMS中，实现多语言切换链接和当前语言标识是一个非常实用的功能，它能帮助您的网站轻松面向全球用户，提升网站的国际化水平。安企CMS为此提供了直观而强大的模板标签，让您能够灵活地在网站前端展示这些元素。

一、理解安企CMS的多语言能力

安企CMS从设计之初就考虑到了多语言站点的需求，提供了完善的多语言内容管理支持。这意味着您可以在后台为不同的语言创建和管理独立的内容，例如文章、产品、页面等。在系统设置中，您可以配置默认的语言包，而每个独立的站点也可以拥有自己的语言设置。这项功能不仅让内容运营更加高效，也为前端展示多语言切换提供了坚实的基础。

二、在模板中显示多语言切换链接

要在您的网站前端显示一个多语言切换的下拉菜单或链接组，您需要利用安企CMS提供的 {% languages %} 模板标签。这个标签会获取所有已配置的多语言站点信息，供您在模板中遍历并生成相应的链接。

这个标签不接受任何参数，它会直接返回一个包含所有语言站点信息的集合。您可以像处理普通列表一样，使用 for 循环来遍历这个集合，并提取出每个语言站点的相关数据。

在每个语言站点的数据项中，您可以获取到以下关键信息：

  • LanguageName：语言的显示名称（例如“简体中文”，“English”）。
  • Language：语言的代码（例如“zh-CN”，“en-US”），常用于hreflang标签。
  • LanguageEmoji：语言对应的表情符号（例如🇨🇳，🇬🇧），方便直观显示。
  • LanguageIcon：如果后台上传了语言图标，这里会提供图标的URL。
  • Name：站点的名称。
  • Link：该语言站点的访问链接，这是进行语言切换的关键。

有了这些信息，您就可以在网站的页头、页脚或侧边栏等任何您希望显示语言切换功能的位置添加代码。

这是一个简单的示例，展示如何构建一个语言切换菜单：

{% languages websites %}
    {% if websites %}
        <ul class="language-switcher">
            {% for item in websites %}
                <li>
                    <a href="{{item.Link}}">
                        {% if item.LanguageIcon %}
                            <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}" style="width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;"/>
                        {% else %}
                            <span style="margin-right: 5px;">{{item.LanguageEmoji}}</span>
                        {% endif %}
                        {{item.LanguageName}}
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endlanguages %}

在这段代码中，我们首先通过 {% languages websites %} 获取所有语言站点列表。然后，使用 {% for item in websites %} 循环遍历每个语言站点。在循环内部，我们创建了一个 <a> 标签，其 href 属性直接使用 {{item.Link}} 来指向对应语言的站点。为了美观，我们还判断了是否存在 LanguageIcon，如果存在则显示图标，否则显示 LanguageEmoji，最后显示 LanguageName。

三、标识当前的语言

除了提供切换链接，清晰地标识当前用户正在浏览的语言版本同样重要。安企CMS在 {% languages %} 标签返回的每个语言站点数据中，包含一个 IsCurrent 字段。当某个语言站点是当前页面所处的语言时，IsCurrent 的值为 true，否则为 false。

利用这个 IsCurrent 字段，您可以为当前语言的切换链接添加特殊的样式，例如高亮显示、加粗字体，或者添加一个“active”类名，通过CSS进行视觉上的区分。

我们将上面的语言切换代码稍作修改，以包含当前语言的标识：

{% languages websites %}
    {% if websites %}
        <ul class="language-switcher">
            {% for item in websites %}
                <li {% if item.IsCurrent %}class="active"{% endif %}> {# 如果是当前语言，添加 active 类 #}
                    <a href="{{item.Link}}">
                        {% if item.LanguageIcon %}
                            <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}" style="width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;"/>
                        {% else %}
                            <span style="margin-right: 5px;">{{item.LanguageEmoji}}</span>
                        {% endif %}
                        {{item.LanguageName}}
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endlanguages %}

在您的CSS文件中，您可以定义 .active 类的样式，例如：

.language-switcher li.active a {
    color: #007bff; /* 蓝色字体 */
    font-weight: bold; /* 字体加粗 */
    border-bottom: 2px solid #007bff; /* 下划线 */
}

此外，对于HTML文档的 <html> 标签，通常会添加 lang 属性来声明文档的主要语言，这对于搜索引擎优化（SEO）和辅助功能（Accessibility）都非常重要。您可以使用 {% system %} 标签来获取当前站点的语言代码：

<html lang="{% system with name='Language' %}">

这将确保您的HTML文档始终正确声明其语言。

四、优化用户体验：Hreflang标签

对于多语言网站，除了前端的切换链接，在 <head> 部分添加 hreflang 标签是SEO的关键。hreflang 标签告诉搜索引擎特定页面有哪些语言版本，以及这些版本是针对哪个地区或语言的。这有助于搜索引擎向用户展示最合适的语言或地区版本。

安企CMS也为此提供了便利，您可以直接使用 {% languages %} 标签来生成这些 hreflang 标签：

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

将这段代码放置在您模板的 <head> 部分，它会自动为每个语言站点生成一个 hreflang 链接，大大提升网站的国际SEO表现。

五、实践建议与灵活应用

  • 位置选择： 语言切换器通常放置在网站的页头、页脚或易于访问的侧边栏，确保用户能够快速找到并切换语言。
  • 样式定制： 上述代码仅提供了基础结构，您可以结合自己的网站设计，使用CSS和JavaScript对语言切换器进行美化，使其与整体风格协调一致。
  • 抽离为公共片段： 考虑到语言切换器会在多个页面重复出现，建议将其代码封装在 partial 文件夹下的一个独立模板文件（例如 _language_switcher.html）中，然后通过 `{% include “partial/_language