如何在Webflow 中添加语言下拉菜单

创建多语言网站，意味着为国际访客提供一条通往目标内容的清晰路径。在Webflow 添加语言下拉菜单，正是为此而设。我们将为您详细介绍三种实现方法：Webflow 的“语言列表”组件、自定义编写的 JavaScript 切换按钮，以及通过 Weglot的自动化配置。针对每种方法，您将了解具体的点击路径、它们之间的对比，以及哪种方式最符合您现有的工作流程。

总而言之

• Webflow原生“语言环境”列表组件会根据您启用的语言环境自动生成下拉选项，因此您无需手动为每种语言创建单独的链接。
• 对于多项目或子域名配置场景，若原生切换器无法满足需求，可在自定义代码中添加一个简短的 JavaScript 切换按钮，用于引导访客在不同语言版本之间切换。
• Weglot 这样的AI翻译工具只需一次设置，Weglot 下拉菜单、hreflang标签和符合SEO规范的URL，并且支持Webflow （Webflow 则不支持）。
• 移动端无障碍设计至关重要：请将触控目标区域设置为至少 44x44 像素，并在触摸屏上使用“点击打开”功能，而非悬停效果。

在Webflow中添加语言下拉菜单的三种方法

在选择方法之前，了解每种方法能带来什么会很有帮助。

Webflow“语言环境”列表最适合已经使用Webflow 且配置完善的工作团队。如果您尚未配置，则设置难度中等。该功能需要订阅已启用本地化功能的付费Webflow ，且不兼容Webflow 。

自定义编写的 JavaScript 切换开关适用于多项目或子域名环境。配置难度为低至中等。它虽然灵活，但您需要维护代码。

Weglot 希望一站式获取高质量翻译、语言切换和 SEO 设置的团队。其部署工作量极低，兼容所有Webflow （包括电商Webflow ），并能自动添加 hreflang 标签。

方法 1：使用Webflow语言列表构建原生语言切换器

• 如果您已在项目中启用了Webflow ，请使用此方法。

步骤 1：启用本地化并添加语言环境

在Webflow ，转到“设置”>“本地化”，然后点击“启用本地化”。选择您的主要语言环境，然后针对您希望支持的每种语言点击“添加语言环境”。

对于每个新的语言环境，请配置其显示名称和子目录，并启用“允许发布到此子目录”选项。未启用发布功能的语言环境之后将不会出现在切换器中，因此请勿跳过此步骤。

步骤 2：在导航栏中添加下拉菜单

打开“添加”面板，滚动至“高级”选项。将一个“下拉菜单”组件拖放到导航栏中。打开“导航器”，展开“下拉菜单”以显示其子元素，然后删除三个占位符链接（链接 1、链接 2、链接 3）。在下一步完成配置后，您的语言环境将显示在此处。

步骤 3：添加语言环境列表

在“添加面板”>“高级”中，将“语言环境列表”元素拖放到“下拉菜单”的“导航”元素中。该语言环境列表的工作原理与“集合列表”类似：它会根据每个已发布的语言环境自动生成一个项目，因此您无需为每种语言单独创建链接。

第 4 步：选择下拉菜单中显示的内容

点击区域设置项目中的“链接”元素，然后打开“元素设置”面板，点击“文本”字段旁边的紫色圆点图标。在“区域设置列表项”下，选择每个选项的标签显示方式：区域设置 (en-US)、语言 (en)、国家 (US) 或显示名称 (英语 (美国))。

若要让下拉切换按钮显示当前选中的语言环境，请选中下拉切换按钮内的文本块，点击“文本”旁边的紫色圆点，然后在“当前语言环境”下选择相同的标签格式。

第 5 步：为移动端添加国旗和波兰语

如果您已为每个语言环境上传了显示图片，请在 Locale 元素内添加一个 Image 元素，点击 Image 旁边的紫色圆点，然后在“语言环境列表项”下选择“语言环境图片”。在“下拉切换”控件内重复此操作，使用“当前语言环境 > 语言环境图片”来在当前选中的语言环境上显示国旗。

在移动端，请选择下拉菜单，并设置“菜单 > 点击打开”（而非悬停，因为悬停功能在触摸屏上无法正常工作）。请确认触控区域的尺寸至少为 44x44 像素，以确保切换器能够被舒适地点击。

方法 2：自定义 JavaScript 切换按钮

当您的语言版本位于不同的Webflow 或使用不同的子域名（例如 example.com 和 es.example.com）时，且原生的“语言环境”列表无法满足需求，请使用此方法。您肯定需要具备一定的编程知识，或者团队中有一位能够为您完成此操作的开发人员。

Add a button or link to your navbar and give it a class like language-toggle. Then paste a short script into Page Settings > Custom Code > Before </body> tag that redirects the visitor to the equivalent page on your alternate domain, preserving the path so they don’t land on the homepage of the other language.

如果涉及三种或更多语言，请通过在每个按钮上添加数据属性（例如 data-language="fr"）以及一个将每个代码映射到其域名的查找对象，来扩展此方法。

方法 3：使用Weglot的自动切换器

如果您不想处理代码，并且希望通过一次设置即可同时管理语言切换器、翻译、hreflang 标签以及 SEO 友好型 URL，请使用此方法。这在Webflow 商店中尤为有用，因为Webflow 不支持此类商店。

首先，请创建一个Weglot ，并添加您的Webflow 。

选择源语言和目标语言，然后复制Weglot snippet 将其粘贴到Webflow 设置”>“自定义代码”>“头部代码”中。发布网站后，语言切换器会自动显示，就这样完成了！您的内容将被翻译并显示在符合 SEO 规范的子目录或子域名下，系统会自动为您处理 hreflang 标签和翻译后的元数据。

您可以在Weglot 直观地编辑切换器：将其拖动到页面上的任意位置，开启或关闭国旗，并选择显示语言名称、语言代码还是国家代码。

针对Webflow设计，Weglot Kit包含 20 多个可克隆的语言切换器，可直接拖放至 Designer 中使用。

Webflow 上的Webflow Weglot 以下几个原因选择Weglot 。自动内容检测功能意味着新页面无需手动操作即可自动翻译。翻译内容存储在独立的控制台中，因此翻译人员无需Webflow 席位。它支持Webflow ，而Webflow 则不支持。此外，所有套餐均内置多语言 SEO 功能。

Webflow Weglot Webflow ：并排对比

如果你正在权衡这两种最常见的途径，以下是在通常最关键的几个方面它们的区别：

• 切换器设置：Webflow 原生Webflow 手动操作（拖放下拉菜单、拖放语言列表、绑定文本、设置样式）。Weglot 在安装时Weglot 自动Weglot 切换器。
• 跨语言环境的内容同步：在Webflow 原生版本中，更新内容时Webflow 手动触发每个页面。Weglot 自动Weglot 新内容并进行翻译。
• Webflow ：Webflow 原生Webflow 不兼容Webflow 商店。Weglot 。
• Hreflang 和 SEO 友好 URL：如果您使用 Localization 的子目录设置，Webflow 自动为您Webflow 这些内容，但您仍需按语言环境配置显示名称和发布设置。Weglot 自动Weglot hreflang 标签和 SEO 友好 URL。
• 团队访问权限：Webflow 要求任何在 Designer 中编辑翻译的人员都必须拥有付费的 Workspace 席位。Weglot 则通过所有套餐均包含的独立控制面板Weglot 翻译。

让您的Webflow 面向全球开放

语言下拉菜单虽只是导航栏中的一小部分，却是网站面向多语种受众的最直观体现。无论您是通过Webflow“语言环境”列表来实现，还是自行编写脚本，抑或是借助Weglot 进行自动化处理，目标都是一致的：让访客能够快速、顺畅地切换到合适的语言。

如果您希望在一次设置中同时处理语言切换、翻译和多语言SEO（Webflow ），不妨在您的Webflow Weglot 试用Weglot 14天。