You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Webflow中添加多语言功能?

多语言切换功能实现方案

我最终重做了整个多语言切换功能,原本打算写篇相关文章,目前还需要做些优化来支持两种以上语言,不过核心实现思路如下:

代码配置步骤

  • 将附带代码粘贴到站点设置的Footer Code区域
  • 修改DEFAULT_LANG为你的目标语言(遵循ISO 639-1标准)
  • 在changeLangTo(lang)函数的getElementsByClassName中编辑语言类名(这些类名后续会用到)
  • 保存站点设置

页面内容排版要求

在设计器中,按内容所属语言将其放入对应div块,不要使用[[en]]English[[sv]]Svenska这类嵌套格式。

举个例子:如果有文本块和按钮需要对应不同语言内容,把它们一起包裹在一个div块并赋予english类,再复制这个div块,替换成翻译后的内容并赋予swedish类。

注意:不要给swedish和english这类语言类设置样式,因为它们会被用于各类不同内容。

语言切换按钮设置

  • 创建一个按钮或链接块
  • 在设置(齿轮图标)的Custom Attributes中,点击加号,设置Name为whenClick,Value为setLang('en')
  • 将上述代码中的en替换为目标语言对应的ISO 639-1代码

内容的提问来源于stack exchange,提问作者Mansi Jani

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.19 18:22:11