如何在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
相关产品推荐
相关产品推荐

