基于终端类型适配不同内容

本示例展示如何通过 Edge Cloud Apps函数实现页面的国际化响应。例如当您的源站只提供英文内容时，可以使用此功能根据用户浏览器的语言设置，自动将网页内容翻译成中文、德文和日文。

详细代码

async function handleRequest(request) {
    const url = new URL(request.url)
    const language = clientLanguage(request)
    const countryStrings = strings[language] || {}
    const response = await fetch(request.url)

    // 使用 HTMLRewriter  对网页内容进行流式改写
    return new HTMLRewriter()
        .on('[data-i18n-key]', new ElementHandler(countryStrings)) // 查找带有 'data-i18n-key' 属性的标签
        .transform(response) // 对响应内容进行转换
}

// 获取浏览器语言偏好
function clientLanguage(request) {
    // Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
    try {
        const languageHeader = request.headers.get('Accept-Language')
        // 解析 Accept-Language 头部信息，获取首选语言
        return languageHeader.split(';')[0].split(',')[0].split('-')[0] 
    } catch (e) {
        // 如果无法获取语言偏好，则默认为中文
        return 'zh' 
    }
}

// 处理元素内容的替换
class ElementHandler {
    constructor(countryStrings) {
      this.countryStrings = countryStrings
    }
  
    element(element) {
      const i18nKey = element.getAttribute('data-i18n-key')
      if (i18nKey) {
        const translation = this.countryStrings[i18nKey]
        if (translation) {
          element.setInnerContent(translation) // 替换标签内容
        }
      }
    }
  }

// 翻译文本配置
const strings = {
    de: {
      title: 'Beispielseite',
      headline: 'Beispielseite',
      subtitle:
        'Dies ist meine Beispielseite. Abhängig davon, wo auf der Welt Sie diese Site besuchen, wird dieser Text in die entsprechende Sprache übersetzt.',
      disclaimer:
        'Haftungsausschluss: Die anfänglichen Übersetzungen stammen von Google Translate, daher sind sie möglicherweise nicht perfekt!',
      tutorial:
        'Das Tutorial für dieses Projekt finden Sie in der CDNetworks ECA-Dokumentation.',
      copyright: 'Design von HTML5 UP.',
    },
    ja: {
      title: 'サンプルサイト',
      headline: 'サンプルサイト',
      subtitle:
        'これは私の例のサイトです。 このサイトにアクセスする世界の場所に応じて、このテキストは対応する言語に翻訳されます。',
      disclaimer:
        '免責事項：最初の翻訳はGoogle翻訳からのものですので、完璧ではないかもしれません！',
      tutorial:
        'CDNetworks ECAのドキュメントでこのプロジェクトのチュートリアルを見つけてください。',
      copyright: 'HTML5 UPによる設計。',
    },
    zh: {
        title: '示例站点',
        headline: '示例站点',
        subtitle:
          '这是我的示例站点。根据您访问本网站的地点，本文将被翻译成相应的语言。',
        disclaimer:
          '免责声明:最初的翻译来自谷歌翻译，所以他们可能不完美！',
        tutorial:
          '在CDNetworks ECA文档中找到这个项目的教程。',
        copyright: '由HTML5 UP设计。',
      },
  }
                    
addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request))
}) 

说明

• 源站需要在需要翻译的 HTML 标签中预先添加 data-i18n-key 自定义属性，例如 <title data-i18n-key="title">...</title>。
• Edge Cloud Apps函数通过 HTMLRewriter API对带有该属性的标签内容进行流式改写，即在接收网页内容的同时进行翻译改写并输出，无需等待整个网页加载完成，从而有效缩短响应时间，提升用户体验。