Webflow HTML Embed+Weglot翻译：多语言嵌入代码切换方案求助

方案1：通过Weglot客户端API动态加载对应语言表单 #

利用Weglot提供的初始化事件和语言检测方法，在页面加载完成后根据当前语言插入对应嵌入代码：

1. 先在页面预留表单容器：

<div id="email-subscribe-container"></div>

2. 编写JavaScript逻辑：

// 等待Weglot完成初始化
document.addEventListener('WeglotReady', function() {
  const currentLang = Weglot.getCurrentLang();
  const container = document.getElementById('email-subscribe-container');
  
  // 定义各语言对应的嵌入代码（替换为你的实际代码）
  const formConfigs = {
    'en': '<form action="https://your-en-mail-service.com/subscribe" method="POST"><input type="email" name="email" placeholder="Enter your email"><button type="submit">Subscribe</button></form>',
    'fr': '<form action="https://your-fr-mail-service.com/subscribe" method="POST"><input type="email" name="email" placeholder="Entrez votre email"><button type="submit">S\'abonner</button></form>',
    'zh': '<form action="https://your-zh-mail-service.com/subscribe" method="POST"><input type="email" name="email" placeholder="输入您的邮箱"><button type="submit">订阅</button></form>'
  };
  
  // 插入对应表单，无匹配则用默认语言
  container.innerHTML = formConfigs[currentLang] || formConfigs['en'];
  
  // 若嵌入代码含第三方脚本，需动态创建脚本标签（示例）
  if (currentLang === 'fr') {
    const script = document.createElement('script');
    script.src = 'https://your-fr-mail-service.com/embed.js';
    script.async = true;
    container.appendChild(script);
  }
});

方案2：监听语言切换事件实时更新表单 #

如果需要在用户切换语言时立即更新表单，可监听Weglot的languageChanged事件：

// 初始化默认语言表单
const container = document.getElementById('email-subscribe-container');
const formConfigs = { /* 同方案1的配置 */ };
container.innerHTML = formConfigs['en'];

// 监听语言切换
document.addEventListener('languageChanged', function(event) {
  const newLang = event.detail.lang;
  container.innerHTML = formConfigs[newLang] || formConfigs['en'];
  
  // 重新加载第三方脚本（若需要）
  const existingScripts = container.querySelectorAll('script');
  existingScripts.forEach(s => s.remove());
  
  if (newLang === 'zh') {
    const script = document.createElement('script');
    script.src = 'https://your-zh-mail-service.com/embed.js';
    script.async = true;
    container.appendChild(script);
  }
});

方案3：纯CSS控制多表单显示/隐藏 #

若嵌入代码无需动态加载脚本，可同时插入所有语言表单，通过Weglot自动添加的HTML语言类实现显示控制：

1. 插入多语言表单：

<form class="subscribe-form lang-en" action="https://your-en-mail-service.com/subscribe">...</form>
<form class="subscribe-form lang-fr" action="https://your-fr-mail-service.com/subscribe">...</form>
<form class="subscribe-form lang-zh" action="https://your-zh-mail-service.com/subscribe">...</form>

2. 添加CSS规则：

/* 默认隐藏所有表单 */
.subscribe-form {
  display: none;
}

/* 显示当前语言对应的表单 */
html.lang-en .lang-en,
html.lang-fr .lang-fr,
html.lang-zh .lang-zh {
  display: block;
}

注意事项 #

• 确保Weglot初始化脚本在自定义代码之前加载，避免Weglot对象未定义错误
• 第三方邮件服务的嵌入脚本可能需要在DOM插入后重新执行，需用动态创建脚本的方式处理
• 测试所有语言切换场景，验证表单提交功能正常

内容的提问来源于stack exchange，提问作者Dominik Mimra