【免费下载链接】cookieconsent:cookie: Simple cross-browser cookie-consent plugin written in vanilla js项目地址https://gitcode.com/gh_mirrors/co/cookieconsent点击查看免费下载本文基于开源 Cookie 同意插件 CookieConsentvanilla JS 编写的官方高级文档系统讲解其language配置对象的使用方法涵盖默认语言、内联翻译、外部翻译文件、异步获取翻译、语言自动检测autoDetect、RTL 布局以及运行时切换语言setLanguage等完整能力。读完本文你将能够为插件搭建一套可维护的多语言文案体系并理解翻译数据从配置到弹窗渲染的底层加载流程从而在自己项目中正确落地。language配置对象两个必填字段CookieConsent 的所有翻译能力都集中在一个顶层配置字段language中它要求开发者定义以下两个字段字段类型说明language.defaultstring默认语言例如enlanguage.translationsobject包含生成弹窗所需全部文本内容的翻译对象一个最小的language配置如下CookieConsent.run({ language: { default: en, translations: { /* ... */ } } });从仓库的类型声明 types/index.d.ts 可以看到language字段在CookieConsentConfig中定义如下language: { default: string, rtl?: string | string[] autoDetect?: document | browser translations: { [locale: string]: Translation | string | (() Translation) | (() PromiseTranslation) } }也就是说除两个必填字段外还有两个可选字段autoDetect启用语言自动检测取值document或browserrtl指定需要启用 RTL从右向左布局的语言代码可以是单个字符串或字符串数组。其中translations的每个locale键如en、it、ar对应一种语言的文案来源值的类型有三种形态内联翻译对象、外部翻译文件的路径字符串、返回翻译对象的异步函数。下文将逐一展开。翻译对象的标准结构translations中每种语言的翻译对象都由两个顶层部分组成consentModal同意弹窗与preferencesModal偏好设置弹窗。类型声明位于 types/index.d.ts。consentModal支持的字段字段说明label可访问性标签aria-label尤其在没有标题时有用title弹窗标题description弹窗描述acceptAllBtn“全部接受”按钮文案acceptNecessaryBtn“仅接受必要”按钮文案showPreferencesBtn“管理偏好”按钮文案closeIconLabel指定后会在box布局下生成一个大号X关闭按钮行为等同于acceptNecessaryBtnrevisionMessage修订消息仅当修订号变化时展示见 revision-managementfooter底部链接区域可放置隐私政策、法律声明等链接preferencesModal支持的字段字段说明title弹窗标题acceptAllBtn“全部接受”按钮文案acceptNecessaryBtn“仅接受必要”按钮文案savePreferencesBtn“保存当前选择”按钮文案closeIconLabel关闭按钮的可访问性标签serviceCounterLabel服务数量角标的文案支持Service|Services这种单复数写法管道符|左侧为单个、右侧为多个在bar布局与窄视口下不显示sections必填的段落数组用于组织弹窗正文sections中每个段落的字段字段说明title段落标题description段落描述linkedCategory关联某个已定义的类别如analytics指定后该段落会渲染为一个可开关的开关togglecookieTableCookie 表格用于列出并说明该类别下的 Cookie其中cookieTable的类型为interface CookieTable { caption?: string, headers: {[key: string]: string}, body: {[key: string]: string}[] }headers定义表头列键为内部键名值为显示文本body中的每个对象按表头键名提供单元格文本。需要特别指出的是上述所有文案字段均支持 HTML 标记。在 preferencesModal.js 与 consentModal.js 中标题、描述等内容最终通过innerHTML写入 DOM因此可以在文案中嵌入a链接、span徽标等元素。仓库自带的 demo_iframemanager/en.json 中就有这样的真实用法例如在必要 Cookie 的标题中插入徽标title: Strictly necessary cookies span class\pm__badge\Always enabled/span或在描述中插入按钮description: ... The latter will be set only after consent. button type\button\>CookieConsent.run({ language: { default: en, translations: { en: { consentModal: { title: Consent Modal Title, description: Consent Modal Description, acceptAllBtn: Accept all, acceptNecessaryBtn: Reject all, showPreferencesBtn: Manage preferences }, preferencesModal: { title: Cookie preferences, acceptAllBtn: Accept all, acceptNecessaryBtn: Reject all, savePreferencesBtn: Save preferences, closeIconLabel: Close, sections: [ { title: Cookie usage, description: We use cookies to ensure the basic functionalities of the website and to enhance your online experience ... }, { title: Strictly necessary cookies, description: These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly, linkedCategory: necessary }, { title: Performance and Analytics cookies, description: These cookies allow the website to remember the choices you have made in the past, linkedCategory: analytics, cookieTable: { headers: { name: Name, domain: Service, description: Description, expiration: Expiration }, body: [ { name: _ga, domain: Google Analytics, description: Cookie set by a href\#das\Google Analytics/a, expiration: Expires after 12 days }, { name: _gid, domain: Google Analytics, description: Cookie set by a href\#das\Google Analytics/a, expiration: Session } ] } }, { title: More information, description: For any queries in relation to our policy on cookies and your choices, please a class\cc-link\ href\#yourdomain.com\contact us/a. } ] } } } } });仓库的官方示例 demo_basic/cookieconsent-init.js 与 demo_gtm/cookieconsent-init.js 均采用内联翻译方式可作为直接可运行的完整参考。外部翻译文件External translations将翻译与插件配置分离是最干净、最可维护的方案——尤其适合文案较长或需要交给翻译人员单独维护的场景。做法分两步第一步创建独立的翻译文件新建一个 JSON 文件例如en.json内容结构如下{ consentModal: { title: Consent Modal Title, description: Consent Modal Description, acceptAllBtn: Accept all, acceptNecessaryBtn: Reject all, showPreferencesBtn: Manage preferences }, preferencesModal: { title: Cookie preferences, acceptAllBtn: Accept all, acceptNecessaryBtn: Reject all, savePreferencesBtn: Save preferences, closeIconLabel: Close, sections: [ { title: Cookie usage, description: We use cookies to ensure the basic functionalities of the website and to enhance your online experience ... }, { title: Strictly necessary cookies, description: These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly, linkedCategory: necessary }, { title: Performance and Analytics cookies, description: These cookies allow the website to remember the choices you have made in the past, linkedCategory: analytics, cookieTable: { headers: { name: Name, domain: Service, description: Description, expiration: Expiration }, body: [ { name: _ga, domain: Google Analytics, description: Cookie set by a href\#das\Google Analytics/a., expiration: Expires after 12 days }, { name: _gid, domain: Google Analytics, description: Cookie set by a href\#das\Google Analytics/a, expiration: Session } ] } }, { title: More information, description: For any queries in relation to our policy on cookies and your choices, please a class\cc-link\ href\#yourdomain.com\contact us/a. } ] } }仓库中可以直接参考的真实外部翻译文件包括 demo/demo_iframemanager/en.json以及 playground 中覆盖英文、德文、法文、西班牙文、意大利文、阿拉伯文等多语言的 playground/src/translations 目录。第二步在配置中指向外部文件将translations中对应语言的值设置为 JSON 文件的路径字符串CookieConsent.run({ language: { default: en, translations: { en: ./en.json } } });配置阶段插件会把translations原样保存到内部状态state._allTranslations见 config-init.js。当需要渲染弹窗时language.js 中的loadTranslationData会检测到值是字符串并通过fetchJson定义于 general.js发起fetch请求加载并解析该 JSON。用异步函数获取翻译如果翻译文件需要经过鉴权、拼接、服务端渲染或其他预处理你还可以把值写成async函数由插件在加载阶段调用并等待返回值CookieConsent.run({ language: { default: en, translations: { en: async () { const res await fetch(path-to-json); return await res.json(); } } } });在loadTranslationData的实现中language.js插件按以下规则解析翻译值if (isString(translationData)) { translationData await fetchJson(translationData); } else if (isFunction(translationData)) { translationData await translationData(); }即字符串类型 →fetch加载 JSON函数类型 → 直接调用函数并await其结果。如果加载结果为空插件会抛出错误Could not load translation for the locale language这一行为也被测试用例 language.test.js 所验证。配置多语言同一套步骤多个 locale外部翻译和异步获取方式天然适合多语言场景——只需为每种语言准备一个翻译文件并在translations中按语言代码分别声明即可CookieConsent.run({ language: { default: en, translations: { en: ./en.json, it: ./it.json, de: ./de.json, ar: ./ar.json } } });仓库中的 tests/config/it.json 就是为测试环境准备的一份意大利语翻译文件。同样地你也可以混用内联与外部两种形态某些语言内联书写另一些语言指向外部文件或异步函数插件不会对此加以限制。运行时切换语言setLanguage多语言配置完成后除了根据访问者环境自动选择语言你还可以在运行时通过公开 APICookieConsent.setLanguage(languageCode, forceUpdate)主动切换语言。该 API 位于 api.js其行为要点如下目标语言必须已经在translations中声明否则直接返回false若目标语言与当前语言相同默认不执行任何操作传入第二个参数trueforceUpdate可强制重新加载语言加载成功后如果同意弹窗或偏好弹窗已经存在插件会调用createConsentModal/createPreferencesModal重建弹窗内容因此新文案会立即生效函数返回Promiseboolean可用于判断是否切换成功。语言代码的匹配回退规则语言检测的核心函数是 language.js 中的getAvailableLanguage其匹配逻辑为优先匹配完整的语言代码如en-GB匹配失败时截取前两位如en-GB→en再次尝试仍失败则返回null由上层回退到默认语言。这一规则兼容en、en_US、en-US等多种写法并有三组测试用例在 language.test.js 中验证完整代码命中、截断回退、无匹配返回null。语言自动检测autoDetect与默认回退language.autoDetect允许插件根据访问环境动态决定当前语言取值有两个document读取html标签的lang属性如html langen-USbrowser读取用户浏览器的语言设置通过navigator.language获取。检测流程由 language.js 中的resolveCurrentLanguageCode实现先按autoDetect指定的策略取得语言代码再交给getAvailableLanguage判断该语言是否存在有效翻译检测到的语言仅在存在对应翻译时才被采用否则回退到language.default。CookieConsent.run({ language: { default: en, autoDetect: browser, translations: { en: ./en.json, it: ./it.json } } });例如访问者浏览器语言为it-IT且配置了it翻译则弹窗以意大利语呈现若浏览器语言是fr-FR而配置中没有fr翻译则自动回退到默认的en。resolveCurrentLanguageCode对不支持检测策略如误传not-supported的处理、autoDetect: document与browser的各分支行为均在 language.test.js 中有对应测试覆盖。RTL从右向左语言支持对于阿拉伯语、希伯来语等从右向左书写的语言可以通过language.rtl声明启用 RTL 布局CookieConsent.run({ language: { default: en, rtl: ar, // 为阿拉伯语启用 RTL 布局 autoDetect: browser, translations: { en: /assets/translations/en.json, ar: /assets/translations/ar.json } } });rtl支持单个字符串或字符串数组如rtl: [ar, he]。实现上language.js 的handleRtlLanguage会在每次语言确定后检查当前语言代码是否命中rtl列表若命中则向插件主容器元素添加cc--rtl样式类否则移除该类配合 scss 中的样式定义即可完成整体镜像排版。setLanguage切换语言时也会同步调用handleRtlLanguage更新布局状态见 api.js。仓库的 playground/src/translations/ar.json 提供了一份完整的阿拉伯语翻译包含 RTL 场景下所需的全部文案字段可直接对照使用。源码级原理翻译数据从配置到弹窗的完整调用链了解底层加载流程有助于排查“翻译不生效”“语言回退不符合预期”等问题。以下是插件初始化时语言相关代码的完整执行链配置入队CookieConsent.run(userConfig)调用setConfigconfig-init.js将userConfig.language.translations存入state._allTranslationsconfig-init.js同时通过resolveCurrentLanguageCode初步确定当前语言代码config-init.js。异步加载run中调用await loadTranslationData()api.js。loadTranslationDatalanguage.js首先用getAvailableLanguage判断目标语言是否可用随后按“字符串→fetch JSON / 函数→调用执行”两种路径解析翻译内容最终把结果存入state._currentTranslation并把state._currentLanguageCode更新为该语言代码。注意run是async函数且loadTranslationData失败时会抛出异常——因此请务必保证默认语言的翻译真实可用。生成弹窗generateHtml创建弹窗时consentModal.js 与 preferencesModal.js 分别从state._currentTranslation.consentModal/state._currentTranslation.preferencesModal读取文案渲染标题、描述、按钮、开关toggle、Cookie 表格等内容。其中linkedCategory会触发创建对应类别的开关控件preferencesModal.jscookieTable则按headers与body生成完整表格preferencesModal.js。运行时切换调用setLanguage时重复步骤 2–3重建弹窗从而完成文案的即时替换。由此可见翻译配置的本质是一份“数据契约”translations决定了插件有哪些语言可用、每种语言的内容从哪里来而language.default、autoDetect与getAvailableLanguage的回退逻辑共同决定了最终采用哪种语言。在编写配置时建议始终保证默认语言的翻译完备并参考 configuration-reference 核对language的全部可用选项。实践建议小结少量文案、单一语言直接使用内联翻译配置即文档文案较长或多语言优先采用外部 JSON 文件将翻译交给独立目录维护仓库中的 demo/demo_iframemanager/en.json 与 playground/src/translations 是现成的结构范本需要动态获取翻译使用异步函数形态注意函数需返回结构完整的翻译对象面向国际访客开启autoDetect: browser或document并记得为阿拉伯语等语言配置rtl多语言切换控件在页面上提供语言切换入口时调用CookieConsent.setLanguage(code)并配合CookieConsent.getUserPreferences()见 api-reference在onChange回调中同步记录用户的语言偏好。赞分享【免费下载链接】cookieconsent:cookie: Simple cross-browser cookie-consent plugin written in vanilla js项目地址https://gitcode.com/gh_mirrors/co/cookieconsent点击查看免费下载相关推荐Boss Show Time4大招聘平台智能时间显示工具让你抓住最新工作机会Boss Show Time4大招聘平台智能时间显示工具让你抓住最新工作机会 还在为投递过期职位而浪费时间吗Boss Show Time是一款专为求职者设前端Spack 编译器配置完全指南外部编译器检测、手动配置与多编译器构建Spack 编译器配置完全指南外部编译器检测、手动配置与多编译器构建 Spack 支持用多种编译器及其不同版本构建软件包编译器既可以是系统自带的exter开发工具构建工具CLI前端多语言翻译自动化工作流Crowdin完整配置指南前端多语言翻译自动化工作流Crowdin完整配置指南 在当今全球化时代 前端项目的多语言支持 已经成为标配。无论是面向国际市场还是本地化需求高效的 多语言前端文档上一篇Diablo Edit2终极暗黑破坏神2存档修改器完全指南下一篇Diablo Edit2终极指南如何5分钟成为暗黑2存档编辑专家创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
