“Joomla 很复杂”, “Joomla 适合技术人员”, “Joomla 对用户不友好”。这些只是我读过的关于这个很棒的 CMS 的一些最常见(不公平)的批评 - 或者更确切地说是假设。

事实上,Joomla 与任何其他 CMS 或主题完全相同:烹饪、天体物理、木工、水肺潜水等。如果你不花时间学习和训练,那就很复杂了。

但就像所有其他技能一样:如果你花几分钟时间深入研究 Joomla,你肯定会学到一些新的东西,一些有用的东西,而且你也可能会改变主意。

因为我确信我是对的,所以您将学会在不到 5 分钟的时间内完全更改 Joomla 语言切换器模块的设计。是的,不到 5 分钟!

如何在 Joomla 5 中自定义语言切换器?

本教程适用于哪些人?

本教程主要面向 Joomla 初学者,因为新手需要简单的示例来学习、理解和进步(所以,是的,高级用户:解释对你来说将是基本的,但我认为无论如何都值得阅读)。

本教程的目的是证明每个人都可以非常轻松地学习和提高他们的 Joomla 技能。你只需要愿意,而且 5 分钟!

您将如何使用本教程?

在本教程中,您将学习更改默认 Joomla 语言切换器的前端显示。

无需深呼吸,无需拥有计算机博士学位,无需担心,您不会破坏任何东西。

默认情况下,Joomla 语言切换器模块提供基本设计。多亏了本教程,您的语言切换器将如下所示:

Language switcher joomla override

您需要什么才能学习本教程?

     
  • 安装在服务器上的 Joomla 5(本地或远程)
  •  
  • 至少安装 2 种内容语言
  •  
  • 5 分钟自由活动时间

准备?让我们覆盖语言切换器!

1. - 打开您的 Joomla 管理面板

1.1 - 遵循:系统>模板>站点模板

1.2 – 点击模板名称以访问其文件

1.3 – 单击“Create Overrides(创建覆盖)”选项卡将其打开

1.4 – 单击模块列表中的 “mod_languages” 以生成覆盖

2. 编辑覆盖的代码

2.1 – 点击:HTML > mod_languages > default.php

2.2 – 在屏幕右侧的文本编辑器中,找到第 21 行并添加:

<style>
.dropdown-toggle:after {margin-left: .400em;}
.dropdown-menu {--dropdown-min-width: 9rem;}
</style>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。.3/font/bootstrap-icons.min.css">

说明
我们调整下拉显示,有一些边距和最小宽度
我们加载 Boostrap 图标库,以防您的模板没有加载任何图标。

2.3 – 在第 34 行的开头添加以下代码:

<i class="bi bi-globe2 pe-2" aria-hidden="true"></i>

说明
我们在语言名称前面添加一个地球图标,并带有一些右内边距。

2.4 – 在第 110 行的开头添加以下代码:

<i class="bi bi-check-lg fw-bold ps-2 pe-1" aria-hidden="true"></i>

说明
我们在下拉列表中的当前语言名称后添加一个复选图标。

2.5 – 完成后,单击 “Save and close(保存并关闭)”按钮。

您可以在此处查看和下载此覆盖的完整代码

3. 编辑语言的名称

默认情况下,Joomla 中的语言名称如下所示:。以下是编辑这些名称的方法:English (United Kingdom)

3.1 - 打开“系统>内容语言”(管理部分)

3.2 – 打开要编辑的语言

3.3 - 将参数 Title in Native Language 中的值更改为英语

3.4 – 对 Joomla 网站中安装的其他语言重复相同的操作

3.5 – 完成后,单击 “Save and close” 按钮。

4. 看看你的前端

是的,您的语言切换器的设计很好,干净,符合预期!

恭喜,您做到了,而且在不到 5 分钟的时间内,正如承诺的那样!

创建像 Boss 一样的覆盖的最佳实践

     
  • 不要覆盖 “default.php” 文件,而是创建一个副本并重命名此副本。这样,您可以将 “default.php” 文件保留为模型,并且可以根据需要创建同一模块的任意数量的覆盖。
  •  
  • 如果需要,请在覆盖名称中使用 “-”。使用 “_” 时,您的覆盖将不在模块布局下拉列表中。
  •  
  • 在覆盖中尽可能使用 Bootstrap 类(或模板框架的 CSS 类),以节省时间和性能。
  •  
  • 如果你的覆盖没有应用于 Frontend,请检查你是否在 “Advanced” 选项卡的 Module Layout 选项中选择了它。
  •  
  • 您不需要学习代码来创建覆盖,但知道如何阅读代码可能会有所帮助。
  •  
  • 最后,关于 overrides 的最佳建议很简单:测试、测试、再测试。你不会失败,你会学习如何失败。 

结论

正如承诺的那样,这并不是很复杂,但最重要的一点是您已经学习了有关 Joomla 的新技能,您可以为自己感到自豪!

Internet 上有大量的语言切换器设计。找到你喜欢的那个,然后按照这个例子,创建你自己的覆盖。

如果你喜欢这类教程,请让我知道你希望我下次以哪个 Joomla 核心模块为例!

Scroll to top